Check color contrast for accessibility compliance
Check color contrast for accessibility compliance
This is normal text to demonstrate readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is small text that might be harder to read with poor contrast.
Four WCAG 2.1 tests run for every pair: AA for normal text needs at least 4.5:1, AA for large text 3:1, AAA for normal text 7:1, and AAA for large text 4.5:1. Each row shows its threshold and a PASS or FAIL verdict, so you can target the level your project requires.
Both colors are converted to relative luminance using the WCAG gamma-corrected sRGB formula, and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. That is why the result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white), regardless of which color is text and which is background.
WCAG defines large text as roughly 18.66 pixel bold or 24 pixel regular and larger. The live preview reflects both cases: a large sample heading, a normal paragraph, a smaller fine-print line, and a bordered button, letting you judge how each size and weight actually reads with your pair.
Luminance is nonlinear: near-white and near-black backgrounds shift the ratio a lot, while changes between two mid-tone backgrounds often move it only slightly. If you are stuck between two levels, darken the text color rather than nudging the background, or start from a preset like Black on White or Blue Link and adjust from there.
No network calls happen at all. The ratio math, compliance verdicts, and live preview all recompute in your browser the moment you change either color.