Colorblind-Safe Palettes: Check Your Brand Colors Against 8% of Your Users
2026-10-08 · zhoujingkang · Founder
About 8% of men have a color vision deficiency. Your palette can pass every WCAG contrast check and still be unreadable for them — because WCAG measures luminance contrast, not whether two colors look different to someone whose red cones don't fire. ColorwayKit now simulates four types of color blindness against your actual theme and reports exactly where it breaks. This article shows the real numbers from a real brand color.
Why WCAG AA doesn't guarantee colorblind-safe
WCAG contrast ratio is a luminance calculation: it measures the difference in perceived brightness between two colors. Color blindness doesn't change brightness — it changes hue discrimination. A red success indicator and a green error indicator can have identical luminance (and identical WCAG ratios) while being literally the same color to a deuteranope.
That's why WCAG 2.1 has a separate guideline — 1.4.1 Use of Color — that says color must not be the only visual means of conveying information. But it doesn't tell you HOW to check it. That's where simulation comes in.
Four types, one simulation engine
ColorwayKit uses the Machado et al. (2009) sRGB matrices to project every color in your theme through four types of color vision deficiency: protanopia (missing L cones), deuteranopia (missing M cones), tritanopia (missing S cones) and achromatopsia (no color vision at all).
The preview applies the simulation instantly — flip between Normal, Protanopia, Deuteranopia, Tritanopia and Achromatopsia to see your theme the way 8% of your users see it. The data layer and exports are never affected: the simulation is preview-only.
The report: 4 views × 26 pairs, measured
The color-blind check tab goes beyond preview: it re-measures all 26 text/background pairs under each CVD type and flags two kinds of risk. Contrast risk: the simulated WCAG ratio drops below the pair's original threshold. Semantic risk: two status colors converge after simulation (ΔE under 20, CIEDE2000) — meaning success and error look the same to a color-blind user.
Real findings from the brand color #EA580C: under deuteranopia the primary on background drops from 4.12:1 to 1.95:1 — the brand button becomes nearly invisible on white. And warning vs danger converges to ΔE 3.6 — two status colors that mean completely different things become the same olive tone.
Design patterns that survive color blindness
The report is a diagnosis, not a prescription — but three patterns consistently help:
- Never rely on color alone: add icons (✓/✕), shapes or labels to carry the same meaning.
- Check semantic pairs, not just text/background: success vs error is the pair that matters most under red-green deficiency.
- If a pair fails after simulation, adjust lightness within the same hue — darkening one of the two colors usually restores distinguishability without changing the brand feel.
Continue with a tool
References
FAQ
Is WCAG AA enough for colorblind users?
No — WCAG AA measures luminance contrast, which is preserved under most CVD simulation. You need a separate check for hue distinguishability, which is what the color-blind report provides.
What's the difference between colorblind simulation and contrast checking?
Contrast checking measures brightness difference between two colors. Colorblind simulation projects colors through a CVD model first, then measures — catching pairs that pass contrast but become indistinguishable from each other.
How common is color blindness?
About 8% of men and 0.5% of women have some form of color vision deficiency. Red-green deficiency (protanopia and deuteranopia) is by far the most common.
Does the colorblind check have a one-click fix like WCAG?
No — CVD fixes are design decisions (add icons, adjust semantic colors, change lightness) with no single correct answer. The report tells you where the problems are; the fix strategy is yours.
Try it on your own brand color
Paste one hex into the Brand Theme Engine and get a full light & dark web theme — semantic tokens, contrast-checked, export-ready.
Open the Brand Theme Engine →