Designing for color blindness
Not everyone sees colors the same way. Some people cannot tell certain colors apart, and the W3C also notes that many older users do not see color well. A design that uses color as its only signal fails them.
The good news is that fixing this rarely needs a new palette. It needs a second cue next to the color, and enough difference in lightness between colors that must be told apart.
Checked against the W3C’s WCAG 2.2 Understanding documents on November 12, 2026.
The common types
Color vision deficiency has several forms. The ones that design tools simulate are:
- Protanopia: the red-sensitive cones do not work. Reds look darker and shift toward brown or olive, and red and green are easy to confuse.
- Deuteranopia: the green-sensitive cones do not work. Red and green are again confused, without the darkening of reds.
- Tritanopia: the blue-sensitive cones do not work. Blue and green blur together, and yellow and violet can be confused.
- Achromatopsia: no usable color vision, so the world is seen in shades of gray.
Milder versions of the first three also exist, where the cones work but respond differently. A simulation of the full deficiency is a useful stress test for a palette.
What breaks
- Red and green pairs of similar lightness, used for status, success and error, or profit and loss.
- Chart series told apart only by hue, especially lines that cross.
- Links that are distinguished from body text only by color.
- Form fields marked as errors only by a red border or red label.
- Maps and heat maps with a rainbow scale.
A quick example: #D32F2F (red) and #2E7D32 (green) look nothing alike to most people, but their contrast ratio is 1.03:1. They have almost the same luminance, so anyone who cannot separate the hues has nothing else to go on.
WCAG 1.4.1: do not use color alone
Success criterion 1.4.1 Use of Color (level A) says color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. The W3C’s guidance names the common failures and fixes:
- Links: give inline links a contrast ratio of at least 3:1 against the surrounding text (technique G183), or add an underline.
- Charts: pair color with pattern or direct labels, and describe the information in text.
- Forms: mark required and error fields with a text cue, not only a color change.
The safest habit is redundancy. Every color that carries meaning gets an icon, a label, a pattern, or a position as well.
How to test a palette
- Simulate it. Run your palette or screenshots through a protanopia, deuteranopia, tritanopia, and grayscale simulation.
- Look for pairs that merge. Any two colors that mean different things but look the same afterward need a fix.
- Compare lightness. Two colors with a clear luminance difference stay distinguishable even in grayscale, so check the contrast ratio between them.
- Add the second cue anyway. A simulation is an estimate, and real vision varies.
To fix a pair, make one color lighter and the other darker rather than changing hue alone. Then confirm the result with the contrast formula.
In Opalite
Opalite simulates protanopia, deuteranopia, tritanopia, and achromatopsia across the app. For a whole palette, the Color Vision tool gives a score from 0 to 100 for each of the first three, which is the share of pairs that look different in normal vision and still look different under that deficiency. It lists the problem pairs, closest first. The distance it uses is perceptual (OKLab), with a margin over the smallest visible difference. Treat the score as a guide to where to look, not a guarantee.
Quick answers
- What is WCAG 1.4.1?
- Use of Color, a level A criterion. It says color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- Is red and green always a problem?
- The pair is a problem when the two colors have similar lightness and nothing else tells them apart. Differences in lightness, icons, labels, and patterns all help.
- Can a simulation prove a design is accessible?
- No. It estimates how colors may appear, and real color vision varies. Use it to find problems, and keep a second visual cue anyway.
Want these checks built into your palette?
Opalite checks contrast, simulates color blindness, and exports palettes to code on iPhone, iPad, Mac, and more. Free to start.
Opalite is an independent app from Molargik Software. WCAG is published by the W3C, which is not affiliated with and does not endorse Opalite.