Colorblindness: Designing and Developing for the Colorblind
How and why to build colorful, yet accessible, digital products
Web accessibility is no longer just a “nice-to-have”: with the passing of the European Accessibility Act (EAA), EU member states are required by law to enforce Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards before July 28, 2025. As we know from GDPR, the impact of these regulations will be felt far beyond the borders of the EU.
One such impact is that accessibility is no longer just a topic for UX and UI designers. Many of the WCAG standards involve features that are not visible to the end user, such as support for screen readers, or controlling the webpage via the keyboard. While the use of color traditionally falls in the domain of design, we are all stewards of accessibility. Developers can, and should, raise visual accessibility concerns when they notice them. As a colorblind developer, I have had many opportunities to suggest UI improvements that would have otherwise slipped past the color-seeing gaze of our design team.
In this article, we will focus on accessibility standards related to colorblindness: what colorblindness is, who it affects, why color guidelines are important, and how designers and developers alike can create accessible (and colorful) digital products.
What is colorblindness?
For a moment, close your eyes (color-seeing or not), and take yourself back to high school biology. You may remember that the human eye is made up of light-detecting cones and rods.
Rods are clustered around the periphery of our retina and are responsible for our low-light and peripheral vision. Rods are very sensitive to light, but don’t process color, hence why our vision at night is primarily in gray scale.
Cones are clustered around the center of our eyes and are responsible for color vision. Cones come in 3 main types:
- Red-sensing cones (60%)
- Green-sensing cones (30%)
- Blue-sensing cones (10%)
Colorblindness is the result of a lack or weakness of the cones in the retina. As such, there are 4 main types of colorblindness:
- Deuteranopia (green weak)
- Protanopia (red weak)
- Tritanopia (blue weak)
- Monochromacy (total colorblindness)
What does colorblindness look like?
The number one question I am asked when I tell someone that I’m colorblind is “what color is this?”. Typically they’ll then hold up a bright yellow pencil or a neon blue pen, and are shocked when I can identify the color correctly.
Full black and white colorblindness is extraordinarily rare, impacting an estimated 0.003% of the population (about 240,000 people globally) [1]. For most people, the effect is that certain colors are difficult to distinguish or appear more muted.
To get a better idea of what colorblindness “looks like”, images have been created to emulate how a particular scene appears to someone with colorblindness. Because I have deuteranopia, I’m completely unable to distinguish between the two images; they look exactly the same to me.
We can also look at some simulations that include the other major types of colorblindness. Because I only have deuteranopia, I am still able to distinguish the differences in the simulations for protanopia and tritanopia.
Who does colorblindness affect?
Colorblindness affects more than 300 million people globally [2]. It impacts certain demographics much more frequently than others.
Let’s go back to high school biology again: it’s time to break out those Punnett Squares. The genetic mutation for colorblindness is a recessive trait carried on the X chromosome. As a result, colorblindness impacts men with much greater frequency than women.
Colorblindness also impacts certain ethnicities more than others [3]. People with Northern European ancestry are more likely than other ethnicities to be affected by colorblindness [4].
Why are color guidelines important?
WCAG standards should not be viewed as an annoyance or just another compliance hurdle to cross before launching a new website. Just as we place importance on creating functional experiences across a variety of device breakpoints, we should place the same importance on creating functional experiences for people of all ability levels.
While colorblindness doesn’t have as profound of an impact on day-to-day life as many other disabilities, it is just as important to take into consideration when designing and developing digital products. A color-compliant design means that your data visualizations, graphics, logos, etc. are impactful and beautiful for everyone, and not just an indecipherable, muddy mess for some 8% of your male users [2].
Color and internationalization
In addition to considering colorblindness as a disability, it’s important to be mindful of how color is interpreted across different cultures when designing for a global audience. The meanings and associations assigned to various colors can vary significantly between regions and cultures.
For example, while white is worn at weddings in Western cultures to signify purity, in parts of Asia white is associated with death and funerals. Red is considered lucky in China, but in some African countries red is the color of mourning. Green has positive connotations of nature and growth in the West, but in Indonesia it’s an unlucky, forbidden color [5].
When color is used to convey meaning in an interface, such as red for errors or green for success messages, it’s critical to research whether those color associations will translate appropriately to other cultures. What may seem intuitive to a Western audience could cause confusion or offense to users from a different background. Therefore, it’s important to research color meanings in your key target markets to avoid offensive or confusing uses of color, or choose a culturally-neutral color palette that isn’t strongly linked to emotions or symbolism.
How to design and develop for the colorblind
By now, I’ve hopefully convinced you of the plight of the colorblind. Let’s talk about some tricks for designing and developing in a colorblind-friendly way.
Choose your color palette carefully
Okay, this one is obvious. It goes without saying that the first step to creating color-compliant designs is to use compliant colors. WCAG guidelines stipulate contrast ratio requirements (4.5:1 for text, 3:1 for large images), but more goes into choosing a good palette than contrast alone. Here are some tips for choosing a good palette:
- Work in monochrome
Working in monochrome will help you naturally choose high contrast colors and will cover all, even the most extreme, types of colorblindness. This doesn’t mean that you need to choose a monochromatic palette, but applying a monochrome simulator or filter (by using one of the tools discussed below, such as Stark or Dalton) can give you an idea of what your palette looks like in monochrome.
Here are some examples to illustrate the usefulness of this approach:
2. Try different shades of the same color (but not too many)
For data visualizations, using different shades of the same color is a great way to differentiate between data sets. I would recommend limiting this approach to ~4 different shades, otherwise the contrast may be too low for color-seeing and colorblind users alike. This technique is especially useful for working within a prescribed set of colors where options are limited, such as when working with a brand.
3. Avoid problematic color combinations
Certain color combinations are especially challenging to differentiate for colorblind users. They should be avoided altogether when possible:
- Red + green
- Blue + purple
- Brown + green
- Brown + red
4. Use a pre-vetted color palette
Feeling uninspired? Tons of colorblind-friendly palettes are available online. Googling “colorblind friendly palettes” turns up tons of great options.
Use patterns, textures, and text to show contrast
One of the WCAG Level A (in other words, bare minimum) requirements for color is that “color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element”.
“Only” is the key word here: the use of color is encouraged, but it should never be the only way that information is communicated.
Here are some examples showing how patterns and textures are especially useful for dense data visualizations. We’ll use the monochrome verification technique discussed above to demonstrate.
Symbols and iconography also play a huge part in how we can make colorful yet accessible designs. For example, instead of just highlighting a field in red when there is an error, include a warning icon so that the message is clearly conveyed.
Tools to help with color
It can be difficult for color-seeing designers and developers to truly understand whether or not something is colorblind-safe. Thankfully, there are many tools available that help simulate and solve for colorblindness.
- “Dalton” Chrome plugin
Dalton applies a filter over the browser that simulates all types of colorblindness. This is a great tool for verifying that your website is colorblind compliant without having to drag your colorblind friend over to look things over.
2. “Stark” plugin for Sketch + Figma
Stark is a comprehensive suite of accessibility tools that can be integrated directly into Sketch and Figma. Among many other incredible features, it can simulate colorblindness directly in your design tool, ensuring that your designs are colorblind safe before they even make it to development.
3. “Stark” as a CI/CD tool, or as a Chrome plugin
Stark again! It’s not just for designers — Stark can be integrated directly into your CI/CD pipeline and checks for WCAG compliance in your code across a wide range of guidelines, including color contrast. It can also be installed as a Chrome plugin and run accessibility checks directly in your browser along side your other dev tools.
4. “color-blind” JavaScript package
The color-blind library remaps hex codes to simulate the different types of colorblindness, and is based on the same code used to create Dalton. After installing with the package manager of your choice, use is simple:
var blinder = require('color-blind');
blinder.deuteranopia('#42b3ad'); // returns #a99db3To quickly test color compliance, this may be more than you need. However, it’s a powerful tool for creating side-by-side comparisons, or for demonstrating the impact of colorblindness on your website.
Tools for mobile
Considering color for mobile apps is just as important as it is for web. In addition to the tools mentioned above, both iOS and Android have built in tools to help solve for colorblindness.
- Color filters
Both Android and iOS have support for full-screen color filters that provide assistive color correction for different types of colorblindness. It is important to note that this is not a colorblindness simulator, but rather an assistive feature that remaps colors to be easier to distinguish for different types of colorblindness. Making sure your app still looks good while using one of these filters is a great way to validate colorblind accessibility.
2. Android only — Simulate color space
If you enable developer options on your Android device, under Hardware-accelerated Rendering you’ll find an option to simulate color space. This option provides a simulation of what your app looks like to users with different types of colorblindness. Just like the colorblind simulator tools mentioned above, this is a powerful way to understand whether or not your app is accessible for users with colorblindness.
Conclusion
Understanding colorblindness shows how important it is to make websites accessible for everyone. With the European Accessibility Act requiring adherence to WCAG 2.1 Level AA standards, inclusive digital experiences are now a legal necessity. It’s not just about following rules, but about making sure that all users, including the millions affected by colorblindness, can use digital products easily.
By choosing colors carefully, using patterns and symbols, and testing with tools like Dalton and Stark, creators can ensure their designs are inclusive. Ultimately, designing with colorblindness in mind means creating digital spaces that welcome everyone, regardless of their abilities.
And if you ever need a colorblind guinea pig to verify your designs, I’m always glad to help out!
References
[2] Cleveland Clinic — Color Blindness
[3] NIH — Color vision deficiency in preschool children: the multi-ethnic pediatric eye disease study
[4] NIH — Worldwide prevalence of red-green color deficiency
