Home
/
Apps
/
Color Blindness Contrast Checker
Color Blindness Contrast Checker

Color Blindness Contrast Checker

Simulate how your text and background colors look under protanopia, deuteranopia, tritanopia, and monochromacy, and check WCAG AA/AAA contrast for each.

Simulate how your text and background colors look under protanopia, deuteranopia, tritanopia, and monochromacy, and check WCAG AA/AAA contrast for each.

Share this app

Color Blindness Contrast Checker

What this calculator does

Checks whether your text and background color pair stays readable not just for typical vision, but for the four most common forms of color vision deficiency: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and monochromacy (full color blindness). Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency, so a color pair that looks high-contrast to you may collapse into near-identical shades for a meaningful share of your visitors. Ordinary contrast checkers only test the colors you entered — this one also simulates how those same colors are perceived under each condition, and re-checks WCAG contrast for every case.

How the simulation works

Each color vision deficiency is simulated by transforming the sRGB values of your text and background colors through a fixed matrix that approximates how that condition compresses the color signal:

[RGB]=Mdeficiency×[RGB]\begin{bmatrix} R' \\ G' \\ B' \end{bmatrix} = M_{\text{deficiency}} \times \begin{bmatrix} R \\ G \\ B \end{bmatrix}

Monochromacy is simulated by converting both colors to their perceptual luminance (grayscale), since a fully color-blind viewer relies on brightness contrast alone:

Y=0.299R+0.587G+0.114BY = 0.299R + 0.587G + 0.114B

Contrast ratio and WCAG thresholds

For the original colors and every simulated variant, contrast is calculated using the standard WCAG relative luminance formula:

L=0.2126Rlin+0.7152Glin+0.0722BlinL = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}} Contrast Ratio=Llighter+0.05Ldarker+0.05\text{Contrast Ratio} = \frac{L_{\text{lighter}} + 0.05}{L_{\text{darker}} + 0.05}

The ratio is then checked against the WCAG 2.1 thresholds for your chosen text size:

Text size AA (Minimum) AAA (Enhanced)
Normal text 4.5 : 1 7 : 1
Large text (18pt+/24px+, or bold 14pt+/18.66px+) 3 : 1 4.5 : 1

How to use it

  1. Pick your text color and background color.
  2. Select the text size category the pair will be used at.
  3. Submit to see the overall verdict, a breakdown of the simulated colors and contrast ratio for typical vision plus all four deficiency types, and a quick pass/fail checklist for WCAG AA.

Example

Text #1A73E8 (a common "link blue") on a #FFFFFF background passes WCAG AA for normal text under typical vision, but under deuteranopia the blue shifts toward gray and loses enough luminance separation from white that the effective contrast ratio drops — the table below the form shows exactly how much, so you can decide whether to darken the blue or increase the font size before shipping it.

Notes

  • This tool simulates congenital color vision deficiencies using well-established approximation matrices; individual perception varies, and the simulation is not a substitute for testing with real users where possible.
  • A color pair that fails only under one deficiency type is still worth fixing — deuteranopia alone affects roughly 1% of the world's population, more than many disabilities addressed by other accessibility guidelines.
  • If every row in the table passes AA, the pair is safe to ship for color-blind readers at that text size; passing AAA everywhere gives extra headroom for low-vision users too.

Related Articles

View all articles