Tinta Guide
Designing for color blindness
By Haikal Akif · Updated · 6 min read
Never use color as the only signal: pair every color-coded state with text, an icon, a pattern or a position, keep a clear lightness difference between colors that must be told apart, and test the palette in a simulator before shipping.
Who is affected
Red-green color vision deficiency affects roughly 8% of men and 0.5% of women of Northern European descent; rates are somewhat lower in most other populations. On a site with 10,000 visitors a day, that is hundreds of people. The main types:
| Type | What is missing | What happens to colors | How common |
|---|---|---|---|
| Deuteranopia / deuteranomaly | Green (M) cones absent or shifted | Reds, greens, oranges and browns converge | The most common form |
| Protanopia / protanomaly | Red (L) cones absent or shifted | As above, and reds also look darker | Common |
| Tritanopia / tritanomaly | Blue (S) cones absent or shifted | Blues and greens converge; yellows look pinkish or pale | Rare (well under 0.1%) |
| Achromatopsia | Cone function | Only lightness remains | Very rare (around 1 in 30,000) |
The "-anomaly" forms are milder and far more common than the complete "-anopia" forms, so a simulation at full severity is a worst case, which is exactly what you want to design against.
Rule one: color is never the only signal
WCAG success criterion 1.4.1 Use of Color says color must not be the only visual means of conveying information. In practice:
- Form errors: a red border plus an error message and an icon, not a red border alone.
- Links in body text: underline them, or make sure they differ from the text by 3:1 and gain an underline on hover and focus.
- Status badges: "Paid", "Overdue" and "Draft" as words, not three colored dots.
- Charts: direct labels, different line styles or markers, and a legend in the same order as the data.
- Required fields: an asterisk or "(required)", not only a colored label.
Rule two: separate colors by lightness
Lightness survives every kind of color vision deficiency; hue does not. If two colors must be told apart — a success and an error state, two series in a chart — give them clearly different lightness, not just different hue. A classic failure is a mid green next to a mid red at the same lightness: to a deuteranope both become the same olive brown.
Blue and orange is the pairing most often recommended for charts precisely because it differs in hue on the axis all dichromats keep (blue–yellow), and usually in lightness too. See the blue palettes and orange palettes for pairs that hold up.
Testing a palette
Tinta’s color blindness simulator shows any palette under protanopia, deuteranopia, tritanopia and monochromacy, and warns when two swatches become hard to tell apart. It uses the Machado, Oliveira and Fernandes (2009) model at full severity, applied in linear RGB — the same model Chrome DevTools uses for its "Emulate vision deficiencies" option — and plain luminance for monochromacy. Every palette page on Tinta has the same check built in.
- Paste your palette into the simulator, including your status colors.
- Look for pairs that converge in any mode. Those are the pairs that must never carry meaning on their own.
- Switch to monochromacy: if two important colors look the same, their lightness is too close.
- Check text pairs with the contrast checker; contrast is lightness, so a pair that passes 4.5:1 stays readable in every simulation.
A safer status palette
A pattern that works for most products: keep status colors, but make each one distinct in lightness and always pair it with an icon and a word.
<p class="status status--error">
<svg aria-hidden="true"><!-- ✕ icon --></svg>
Payment failed — check the card number
</p>
<p class="status status--success">
<svg aria-hidden="true"><!-- ✓ icon --></svg>
Payment received
</p>