Accessible color palette checker
Paste your palette to check every color pair against WCAG 2.2 and see it the way people with color blindness do.
Color blindness simulator
Choose a vision type to simulate.
#1D3557#457B9D#A8DADC#F1FAEE#E63946#2A9D8FColors that become hard to tell apart
- Protanopia:✓ none
- Deuteranopia:✓ none
- Tritanopia:✓ none
- Achromatopsia: #457B9D / #E63946 #E63946 / #2A9D8F
Contrast of every pair
Rows are text colors, columns are backgrounds. Ratios are WCAG 2.2 and do not change under simulation, because the formula uses luminance.
| Text / background | #1D3557 | #457B9D | #A8DADC | #F1FAEE | #E63946 | #2A9D8F |
|---|---|---|---|---|---|---|
| #1D3557 | Aa2.69:1Fail | Aa8.07:1AAA | Aa11.56:1AAA | Aa2.96:1Fail | Aa3.71:1Large | |
| #457B9D | Aa2.69:1Fail | Aa3.00:1Large | Aa4.29:1Large | Aa1.10:1Fail | Aa1.38:1Fail | |
| #A8DADC | Aa8.07:1AAA | Aa3.00:1Large | Aa1.43:1Fail | Aa2.72:1Fail | Aa2.17:1Fail | |
| #F1FAEE | Aa11.56:1AAA | Aa4.29:1Large | Aa1.43:1Fail | Aa3.89:1Large | Aa3.11:1Large | |
| #E63946 | Aa2.96:1Fail | Aa1.10:1Fail | Aa2.72:1Fail | Aa3.89:1Large | Aa1.25:1Fail | |
| #2A9D8F | Aa3.71:1Large | Aa1.38:1Fail | Aa2.17:1Fail | Aa3.11:1Large | Aa1.25:1Fail |
Text on your lightest color
| Color | Ratio on #F1FAEE | Body text (AA) | Nearest passing shade |
|---|---|---|---|
#1D3557 | 11.56:1 | Pass | — |
#457B9D | 4.30:1 | Fail | #3F7597 |
#A8DADC | 1.43:1 | Fail | #4A797B |
#E63946 | 3.90:1 | Fail | #D7283A |
#2A9D8F | 3.11:1 | Fail | #007D71 |
Designing for color vision deficiency
Most color blindness is a weakened or missing red (protan) or green (deutan) cone. Reds and greens of similar lightness collapse into the same muddy olive, which is why a red “error” and green “success” state that differ only in hue fail for millions of people. The fix is rarely to change the brand color; it is to separate colors by lightness and to add a second cue — an icon, a label, a pattern or an underline.
Two quick rules: if a chart is readable in the achromatopsia (grayscale) view, it works for nearly everyone; and links inside body text should be underlined, not only colored (WCAG 1.4.1, Use of Color).
Frequently asked questions
What makes a color palette accessible?
Enough lightness contrast between text and background (4.5:1 for body text under WCAG 2.2 AA, 3:1 for large text and UI parts), and never relying on color alone to carry meaning. Pair colors with labels, icons or patterns so people with color vision deficiency get the same information.
How accurate is the color blindness simulator?
It uses the Machado, Oliveira and Fernandes (2009) model at full severity for protanopia, deuteranopia and tritanopia, applied in linear RGB, plus a luminance-only view for achromatopsia. It is a good approximation for design review; real vision varies from person to person and most people have milder anomalous trichromacy.
How common is color blindness?
Red–green color vision deficiency affects about 8% of men and 0.5% of women of Northern European descent (figures cited by the NHS and the American Academy of Ophthalmology). Blue–yellow deficiency (tritan) is rare.
What does “hard to tell apart” mean here?
For each simulation, every pair of palette colors is compared in OKLab. When two colors fall within a small perceptual distance they are flagged, because a person with that type of vision may see them as the same color.