WCAG Accessibility Contrast Color Checker & Vision Simulations

Free WCAG color contrast checker

SimpleTools Contrast Checker measures the contrast ratio between a foreground and background color and evaluates it against the WCAG 2.x success criteria for normal and large text, at both the AA and AAA conformance levels. Everything runs locally in your browser.

How to check color contrast

1. Pick a foreground (text) color and a background color using the color pickers, or type a HEX, RGB or HSL value.
2. Adjust the preview text, font size and weight to match your real design.
3. Read the contrast ratio and the AA / AAA results for normal and large text — they update instantly.
4. Open the vision simulations to see how the same combination might look with color blindness, low vision, cataracts, glaucoma, direct sunlight or a night shift filter.

What is WCAG contrast?

WCAG contrast is a measure of how different two colors are in relative luminance, expressed as a ratio between 1:1 (identical colors) and 21:1 (pure black on pure white). The Web Content Accessibility Guidelines define minimum ratios so text remains legible for people with low vision, color vision deficiencies, or who are viewing a screen in poor lighting conditions.

How is contrast ratio calculated?

The ratio comes from the relative luminance of both colors, calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker one. Relative luminance is derived from the gamma-corrected sRGB value of each color channel, weighted to reflect how the human eye perceives red, green and blue differently.

What is AA vs AAA?

AA is the standard conformance level most products target: a 4.5:1 ratio for normal text and 3:1 for large text. AAA is an enhanced level with stricter thresholds — 7:1 for normal text and 4.5:1 for large text — intended for content where readability is especially critical.

What is normal vs large text?

WCAG classifies text as large when it's at least 24px (18pt), or at least 19px (14pt) and bold. Larger, heavier strokes are easier to distinguish from the background, so large text is allowed a lower minimum contrast ratio than normal body text.

Why color contrast matters for accessibility

Insufficient contrast makes text hard to read for people with low vision, color vision deficiencies, or age-related changes in eyesight, and for anyone using a device outdoors or on a low-brightness screen. Good contrast also reduces eye strain and improves readability for every user, not only people with disabilities.

Limitations of contrast checking

Passing a WCAG contrast ratio does not mean an interface is fully accessible. This checker only evaluates the contrast between two colors. Real-world accessibility also depends on factors this tool doesn't measure, including typography and font choice, visible focus indicators, semantic structure and headings, keyboard interaction, and the states of interactive components (hover, focus, disabled, error, and so on).

It's also worth noting that the Vision conditions and Situational simulations — cataracts, glaucoma, low vision, direct sunlight and night shift — are not official WCAG success criteria. There is no standardized formula for "passing" them; they are simplified, approximate simulations meant to build intuition about how a combination might be perceived, not a certification of accessibility. The color blindness simulations use the classic HCIRN (Wickline, 2000-2001) gamma-corrected simulation model, the same reference algorithm behind most well-known color blindness simulators — but they are still an approximation of a condition that varies from person to person, not a diagnostic tool.