Color Contrast Checker: WCAG AA & AAA Ratio Test

How the contrast ratio is calculated

WCAG defines contrast using relative luminance, a measure of how bright a color appears to the human eye. Each sRGB channel is converted from 0-255 to 0-1, linearized to undo gamma encoding, and weighted: 21.26 percent red, 71.52 percent green, 7.22 percent blue. Green dominates because our eyes are most sensitive to it.

The ratio is (L1 + 0.05) ÷ (L2 + 0.05), with L1 the lighter color's luminance and L2 the darker's. The 0.05 accounts for ambient light on a screen. Black on white is 21:1, the maximum. Identical colors are 1:1.

The thresholds you need to hit

WCAG 2.2 Level AA, the standard most laws and organizations target, requires 4.5:1 for normal text and 3:1 for large text. Large means at least 18 point (24 CSS pixels) or 14 point bold (about 18.67 CSS pixels). Level AAA raises those to 7:1 and 4.5:1.

Non-text contrast (success criterion 1.4.11) requires 3:1 for things users need to see to operate the interface: form field borders, focus indicators, icons without text labels, and chart lines. Disabled controls, logos, and pure decoration are exempt. The checker shows all five results at once.

Worked examples with real colors

Gray text on white is where most sites fail. #767676 on white scores 4.54:1 and passes AA. One shade lighter, #777777, scores 4.48:1 and fails. There is no rounding: 4.49:1 is a fail. #959595 on white scores 2.99:1, which fails even for large text and is a common placeholder color that shouldn't be used for real content.

Brand colors often sit in the gray zone. White text on #2563eb (a common blue) scores 5.17:1 and passes AA for all text. #0f766e teal on white scores 5.47:1. For AAA with gray text on white you need to go as dark as #595959, which gives 7.0:1.

Who contrast actually helps

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and low vision affects millions of Americans, especially after 60. Contrast helps everyone else too: people reading on a phone in sunlight, on a cheap laptop screen, or with the brightness turned down to save battery.

Contrast is about luminance, not hue, so red text on a green background can fail badly even though the colors look different to most people. Never rely on color alone to convey meaning; add an icon, a label, or an underline for links.

Legal context in the US

Section 508 requires federal agencies and their contractors to meet WCAG 2.0 AA. In 2024 the Department of Justice issued a rule under Title II of the ADA requiring state and local government websites to meet WCAG 2.1 AA, with compliance dates starting in 2026 for larger entities. Private businesses are covered by Title III, and courts frequently look to WCAG AA in the thousands of web accessibility lawsuits filed each year.

Insufficient contrast is consistently among the most common accessibility failures found in automated scans of popular home pages. It is also one of the easiest to fix.

Fixing a failing pair

Darken the text or lighten the background, whichever preserves your design. Usually shifting the text color a few steps darker in the same hue is enough; the color palette generator's 700 to 900 shades are a good place to look. Keep large headings for colors that only reach 3:1.

Check hover, focus, visited, and disabled states, plus text over images, where contrast changes across the image; a semi-opaque overlay behind the text solves most of those. Test dark mode separately, because a palette that passes in light mode can fail when inverted. The checker runs entirely in your browser.

Use the Swap button to test the reverse pairing, which gives the same ratio but a different look, and watch the live preview: numbers near the threshold can still feel harsh or muddy at small sizes, so trust your eyes as a second check.