Contrast Checker
Measure WCAG ratio and APCA Lc, preview real text, simulate color vision, and verify AA and AAA before you ship.
Aa
The quick brown fox jumps over the lazy dog.
Body copy at 16px — how paragraphs, labels, and form fields will read on this background.
Foreground: #000000
Background: #FFFFFF
Contrast ratio: 21.00:1
WCAG level: AAA
AA normal: Pass
AA large: Pass
AAA normal: Pass
APCA Lc: 106.0 (min 75 at 16px / 400)
APCA: Pass · Contrast out of readable range
APCA version: 0.98G (apca-w3 0.1.9)Why contrast matters
Low contrast between text and its background is one of the most common accessibility failures on the web. Users with low vision, color-vision deficiency, or glare on mobile screens struggle when gray body copy sits on slightly lighter gray panels.
WCAG 2.2 Success Criterion 1.4.3 requires sufficient contrast for readable text. Meeting Level AA is the baseline most organizations target; Level AAA is stricter and often reserved for essential content.
WCAG contrast requirements
Normal text (below 18pt regular or 14pt bold): at least 4.5:1 for Level AA and 7:1 for Level AAA.
Large text (18pt+ regular or 14pt+ bold): at least 3:1 for Level AA and 4.5:1 for Level AAA.
Contrast ratio is computed from relative luminance of the foreground and background colors—it does not measure hue difference. Two colors can be easy to distinguish yet fail contrast if their brightness is too similar.
Do not rely on color alone to convey meaning. Pair sufficient contrast with icons, underlines, patterns, or labels so information remains clear without hue cues.
Using the checker
Enter or pick foreground and background values to see the computed ratio and whether common WCAG thresholds pass. Adjust lightness or pick a alternate swatch until both readability and brand intent align.
Test light and dark themes separately—a palette that passes in one mode may fail when surfaces invert.