Contrast Checker
Check any two colors for WCAG contrast.
Pick a foreground and background color and see the contrast ratio, live, against all four WCAG 2.1 pass/fail thresholds. Built as a companion to Lab Experiment 8's pre-deploy accessibility checker — same relative-luminance math, just interactive.
Large text sample (24px)
Normal text sample (16px) — the quick brown fox jumps over the lazy dog.
For demo purposes only. This tool implements the same relative-luminance contrast math WCAG 2.1 defines, but it isn't a certified accessibility auditor and doesn't check anything besides the two colors you give it — no font weight, no real layout, no assistive-tech testing. Verify anything shipping to real users with a dedicated accessibility tool.
How this works
Four thresholds, one ratio.
WCAG 2.1's Success Criterion 1.4.3 (AA) and 1.4.6 (AAA) set minimum contrast ratios between text and its background — a plain number computed from each color's relative luminance, the same formula used above. Normal text needs more contrast than large text (defined as 18pt/24px, or 14pt/18.66px bold, or larger) because small text is harder to read at low contrast. AA is the widely-adopted legal baseline; AAA is a stricter, optional standard most sites don't target for body copy.