Color Vision Accessibility Checker

Use this checker to evaluate both contrast compliance and how a color pair behaves for users with different kinds of color-vision deficiency.

What the badges mean:

• AA normal: whether the contrast ratio passes WCAG AA for normal-sized text. The threshold is 4.5:1.
• AAA normal: whether the contrast ratio passes WCAG AAA for normal-sized text. The threshold is 7:1.

Why this matters:

• "Normal" means standard body text, small labels, and most UI copy.
• Large text has lower thresholds in WCAG: AA large passes at 3:1 and AAA large passes at 4.5:1.
• So a pair can fail AAA normal but still be acceptable for large headings or bold display text.

How to use the fields:

• Foreground Color: the text, icon, or main UI color placed on top
• Background Color: the surface color behind it
• Design Image: optional screenshot or mockup for region-based low-contrast analysis
• WCAG Level: controls the threshold used when flagging image regions

Reading the result:

• The Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia cards show how the pair looks under each simulation.
• The contrast ratio is recalculated after simulation so you can see whether a pair that works in normal vision becomes risky for other users.
• Screenshot analysis marks tiles whose local contrast falls below the selected WCAG threshold.