Accessible Color Pairing Guide
Certain color pairings fail accessibility checks over and over, for predictable reasons. Every ratio below was computed with the WCAG relative-luminance formula — verify any of them yourself in the Contrast Checker.
Common failures and their fixes
| Symptom | Ratio | Why it fails | Fix | Fixed ratio |
|---|---|---|---|---|
#AAAAAA text on white | 2.32 : 1 | Light gray reads fine to a sighted designer on a good monitor but falls well under the 4.5:1 AA floor. | Darken to #767676 or below |
4.54 : 1 (AA pass) |
#FFFF00 text on white | 1.07 : 1 | Yellow and white have almost identical luminance — this is one of the most common "invisible text" bugs. | Keep the yellow but move it to a dark background, e.g. #1A1A2E |
15.88 : 1 (AAA pass) |
#0000FF text on black | 2.44 : 1 | Pure blue has very low luminance, so blue-on-black links are consistently under-contrast. | Lighten to #99C2FF |
11.51 : 1 (AAA pass) |
Red status text on a green badge (#FF0000 on #00FF00) | 2.91 : 1 | Fails contrast and is the single worst pairing for red-green color blindness — see below. | Use a dark red on white/pale background, and add an icon or label, not color alone | Depends on chosen pair — check in tool |
The hue-confusion problem (separate from contrast)
Contrast ratio only measures luminance difference — it says nothing about whether two hues are distinguishable to someone with a color vision deficiency. Red/green, and blue/purple, are the two pairings that cause the most real-world confusion for the roughly 8% of men and 0.5% of women with red-green color deficiency (see the prevalence guide). A pass/fail badge that is only "red vs. green" will fail for these users even if the luminance contrast happens to be adequate.
The fix is never color alone. Pair color with a second signal: an icon, a text label, a pattern, or an underline. Test your actual palette in the Color Blindness Simulator before shipping it.
Quick pre-flight checklist
| Check | Tool |
|---|---|
| Body text vs. background meets 4.5:1 | Contrast Checker |
| No status/meaning conveyed by hue alone | Color Blindness Simulator |
| Interactive elements (buttons, links, focus rings) meet 3:1 against adjacent colors | Contrast Checker |