Color accessibility: contrast and perception by people with color vision deficiency
Who actually cannot distinguish colors
Complete color blindness — when the world is seen in black and white tones — is extremely rare. In 99% of cases, it is partial color blindness: a person confuses specific pairs of hues, rather than losing color entirely. The prevalence varies significantly by gender: color vision impairments affect about 8% of men and only 0,5% of women — the difference is explained by the fact that the genes responsible for red-green perception are located on the X-chromosome.
- Deuteranopia — the most common type, problems with the green spectrum;
- Protanopia — difficulties with red, which makes red appear dark and muted;
- Tritanopia — a rare form affecting blue and yellow, occurring in less than 0,01% of people;
- Achromatopsia — complete absence of color perception, an extremely rare form.
For a brand, this means one thing: the red-green pair, which seems like an obvious 'bad/good' signal to a designer, appears to millions of users as two shades of gray.
Case: how Robinhood encountered the red-green chart problem
The financial application Robinhood has for years displayed stock growth in green and decline in red — a standard for the entire trading industry. After receiving complaints from users with deuteranopia and protanopia, the company added an alternative color scheme based on blue and orange, which can be enabled in the settings. This solution did not change the main interface for most users, but provided an option for those for whom the original palette literally prevented them from understanding whether an asset was growing or declining. This is a telling example: accessibility does not require a complete rebranding — it is sufficient to provide an alternative mode of perception for critical information.
What standards say about contrast
There are clear figures to rely on instead of a designer's intuition. The web consortium W3C sets minimum contrast ratios in its WCAG 2.1 recommendations:
| Type of content | Level AA | Level AAA |
|---|---|---|
| Regular text | 4.5:1 | 7:1 |
| Large text (from 18pt/24px) | 3:1 | 4.5:1 |
| Interface elements and graphics | 3:1 | — |
The ratio is calculated based on brightness, not on 'looks similar or not', so checking must be done with tools, not intuition.
Why one color for a signal is not enough
The main branding mistake is using color as the only carrier of meaning. A red dot for 'error', a green checkmark for 'success', a yellow triangle for 'attention' — if color is removed, these elements should still be readable. The rule is simple: any color signal must be duplicated by shape, icon, text, or pattern (dashed, dotted, solid line versus dashed). That is how quality infographics and dashboards are structured — lines on a chart differ not only by color but also by thickness or type.
How to check a brand's palette for accessibility
- Run the brand's main colors through a color blindness simulator (Coblis, Color Oracle) and check if they are distinguishable in three main modes — protanopia, deuteranopia, and tritanopia.
- Check text and background contrast with a calculator (WebAIM Contrast Checker, Stark) to ensure it meets the AA level of WCAG.
- Remove color completely (convert the layout to grayscale) and check if the interface remains understandable.
- Add duplicate markers — icons, labels, textures — for all color signals critical for user action.
- Test the final palette on real users with color perception disorders, if the product's audience is mass.
What this means for brand identity
Brand logo and key brand colors are not required to undergo strict WCAG compliance — this is more of a requirement for interfaces and communication rather than brand identity per se. But where color carries functional load — buttons, order statuses, map legends, infographics in reports — accessibility becomes part of the style guide no less important than font or spacing. A reasonable approach: building in color blindness and contrast checks at the stage of palette approval, rather than after user complaints, as happened with Robinhood.
Who actually cannot distinguish colors
Complete color blindness — when the world is seen in black and white tones — is extremely rare. In 99% of cases, it is partial color blindness: a person confuses specific pairs of hues, rather than losing color entirely. The prevalence varies significantly by gender: color vision impairments affect about 8% of men and only 0,5% of women — the difference is explained by the fact that the genes responsible for red-green perception are located on the X-chromosome.
- Deuteranopia — the most common type, problems with the green spectrum;
- Protanopia — difficulties with red, which makes red appear dark and muted;
- Tritanopia — a rare form affecting blue and yellow, occurring in less than 0,01% of people;
- Achromatopsia — complete absence of color perception, an extremely rare form.
For a brand, this means one thing: the red-green pair, which seems like an obvious 'bad/good' signal to a designer, appears to millions of users as two shades of gray.
Case: how Robinhood encountered the red-green chart problem
The financial application Robinhood has for years displayed stock growth in green and decline in red — a standard for the entire trading industry. After receiving complaints from users with deuteranopia and protanopia, the company added an alternative color scheme based on blue and orange, which can be enabled in the settings. This solution did not change the main interface for most users, but provided an option for those for whom the original palette literally prevented them from understanding whether an asset was growing or declining. This is a telling example: accessibility does not require a complete rebranding — it is sufficient to provide an alternative mode of perception for critical information.
What standards say about contrast
There are clear figures to rely on instead of a designer's intuition. The web consortium W3C sets minimum contrast ratios in its WCAG 2.1 recommendations:
| Type of content | Level AA | Level AAA |
|---|---|---|
| Regular text | 4.5:1 | 7:1 |
| Large text (from 18pt/24px) | 3:1 | 4.5:1 |
| Interface elements and graphics | 3:1 | — |
The ratio is calculated based on brightness, not on 'looks similar or not', so checking must be done with tools, not intuition.
Why one color for a signal is not enough
The main branding mistake is using color as the only carrier of meaning. A red dot for 'error', a green checkmark for 'success', a yellow triangle for 'attention' — if color is removed, these elements should still be readable. The rule is simple: any color signal must be duplicated by shape, icon, text, or pattern (dashed, dotted, solid line versus dashed). That is how quality infographics and dashboards are structured — lines on a chart differ not only by color but also by thickness or type.
How to check a brand's palette for accessibility
- Run the brand's main colors through a color blindness simulator (Coblis, Color Oracle) and check if they are distinguishable in three main modes — protanopia, deuteranopia, and tritanopia.
- Check text and background contrast with a calculator (WebAIM Contrast Checker, Stark) to ensure it meets the AA level of WCAG.
- Remove color completely (convert the layout to grayscale) and check if the interface remains understandable.
- Add duplicate markers — icons, labels, textures — for all color signals critical for user action.
- Test the final palette on real users with color perception disorders, if the product's audience is mass.
What this means for brand identity
Brand logo and key brand colors are not required to undergo strict WCAG compliance — this is more of a requirement for interfaces and communication rather than brand identity per se. But where color carries functional load — buttons, order statuses, map legends, infographics in reports — accessibility becomes part of the style guide no less important than font or spacing. A reasonable approach: building in color blindness and contrast checks at the stage of palette approval, rather than after user complaints, as happened with Robinhood.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
