Hey friends,

👋 Big welcome to the 783 designers who have joined us since our last issue!

As I continue working on our color field guide, I'm diving deeper into color accessibility.

Most designers have heard of how color blindness can negatively affect the people who use our apps. But I wanted to clarify the effects of color blindness and give a little guide on the ways we as designers can address it. The result is the below article.

Happy designing,

— Jordan & Taylor

🎨 Guide to addressing color blindness

1 in 12 men and 1 in 200 women are color blind.

So chances are pretty high that many people who use your app have color blindness.

Here’s a guide on how to make sure they have a good experience.

First, understand how color blindness determines what a person sees (and, in turn, how it affects your designs).

There are several different kinds of color blindness, which affect your ability to see red, yellow, and/or blue.

See the chart below for examples.

When you're designing a UI, color can be a great way to enhance information and make things easier to understand.

But if you rely too much on it, those who are color blind will have a difficult time.

Let’s walk through the main ways a designer should account for this:

1) Never use color alone to convey meaning

For example, if you only use color to show a form validation error, a color blind person will struggle to understand what's happening simply because they can't distinguish the colors.

Instead, include an error message and/or icon.

2) Utilize contrast in addition to different hues

Contrast isn't an issue for most people who are color blind. Take advantage of that by darkening or lightening your colors and relying on contrast to convey information.

You can also add patterns or shape differences.

3) Run your designs through color blind checkers

There are lots of tools out there for this (most of them free).

It helps quite a bit to run your specific designs through a simulator to test how they will appear to a color blind person.

Here are four of my favorite color blind simulators:

👉 Stark​

👉 Color Blind Figma plugin​

👉 Sim Daltonism​

👉 Color Oracle​

Good example

You can create different modes for color blind people. For example, Trello has a "Colorblind friendly" toggle that adds patterns to labels so they are always distinguishable.

Conclusion

If you remember one thing, make it this:

Always use color to support something your UI is already saying; never use it as the only way to communicate.

From this week's sponsor:

🎶 All you need is... code! ❤️

Design 10x faster and streamline design handoff by bringing coded UI components to the design editor.

Discover more

📰 Scoop

What’s going on in the world of product design and why it matters.

So-called Ridiculous Redesigns are making their way around the design community. These change the UI of popular apps to include unlikely or impossible new additions.

Our take

These are just for fun, and we’re along for the ride. While unsolicited redesigns have dominated portfolios and Medium posts for so long, these Ridiculous Redesigns don’t take themselves so seriously. Unsolicited redesigns are criticized for lacking User Research and business context, but these are more light hearted. No one is pretending these are actually better experiences.

In a way, it’s an outlet for some designers to expose current problems in design— like the terrible state of canceling subscriptions (but it’s usually just for laughs).

💎 Gems

Quick item to consider this week.