Color Contrast Checker — WCAG AA / AAA
Check WCAG contrast ratios between two colors. AA and AAA pass/fail badges for normal and large text with live preview.
The quick brown fox jumps over the lazy dog (14px normal)
The quick brown fox jumps over the lazy dog (18px large)
The quick brown fox (24px extra-large)
A WCAG color contrast checker that takes a foreground and background color, computes the contrast ratio using the official sRGB luminance formula, and tells you whether the pair passes AA and AAA for normal and large text. Includes a live sample preview at three font sizes and common color presets. Everything runs client-side.
Accessible color choices come down to one number: the contrast ratio between text and its background. WCAG 2.1 defines four thresholds worth memorizing. 4.5:1 is the minimum for AA normal text. 3:1 is the minimum for AA large text (roughly 18pt regular or 14pt bold and up). 7:1 and 4.5:1 are the stricter AAA bars for normal and large text respectively. This tool computes the ratio with the exact formula from the spec and shows pass or fail badges for all four thresholds at once.
The math linearizes each sRGB channel using the piecewise gamma function from the spec, then combines them with the luminance weights 0.2126 R + 0.7152 G + 0.0722 B, and finally divides the lighter luminance by the darker (plus 0.05 on both sides to avoid division by zero on pure black). A live preview renders real sample text at 14px, 18px, and 24px so you can eyeball legibility alongside the numeric result. Picking an accessible palette usually means iterating through a few presets until the ratio crosses 4.5:1, and the preset buttons exist to make that loop fast.
- 1
Pick two colors
Use the native color pickers or paste a hex code into either input. 3-digit shorthand like #fff is expanded automatically.
- 2
Read the ratio and badges
See the contrast ratio printed as X.XX : 1 alongside pass or fail badges for AA Normal, AA Large, AAA Normal, and AAA Large.
- 3
Iterate with presets
Try the preset combinations to quickly find an accessible starting point, then adjust the hex until you hit your target threshold.
Audit existing UI
Check button, link, and body-text colors against their background to find WCAG failures before a review.
Build an accessible palette
Test brand colors against light and dark backgrounds to confirm both modes meet AA for body text.
Choose chart colors
Verify that data-viz series colors are readable as small labels over a card surface.
Spec design tokens
Lock in foreground and background pairs for a design system and note which tier they clear.
What is the WCAG contrast formula?
(L1 + 0.05) / (L2 + 0.05) where L1 is the lighter relative luminance and L2 the darker. Luminance is 0.2126 R + 0.7152 G + 0.0722 B after each sRGB channel is linearized per the spec.
What counts as large text for AA Large?
WCAG defines large text as 18pt or larger, or 14pt bold or larger. In CSS that lands near 24px regular or 18.66px bold. Anything smaller falls under the normal-text thresholds.
Does this check the new APCA contrast?
Not yet. APCA is proposed for WCAG 3 but is not part of WCAG 2.1 or 2.2. This tool uses the current official ratio formula that audit tools and legal compliance require.
Why does pure black on pure white only score 21:1?
21:1 is the maximum possible contrast ratio on sRGB displays. Every other color pair is strictly less than that, so 21 is the ceiling you are comparing against.
Is my color selection sent anywhere?
No. Everything runs in your browser. Colors never leave your device.