Curated picks
WCAG contrast checker
Contrast underpins readable text for many users and common accessibility audits.
Try it
WCAG contrast checker
Enter two sRGB hex colors. We use the same relative luminance formula as WCAG 2.x (normal text: 4.5:1 AA, 3:1 for large text; 7:1 / 4.5:1 for AAA).
Contrast ratio
10.94:1
- AA — normal text (4.5:1) Pass
- AA — large text (3:1) Pass
- AAA — normal text (7:1) Pass
- AAA — large text (4.5:1) Pass
Sample heading
Preview how body copy might look with this pair. Adjust colors above.
Relative luminance
WCAG 2.x derives contrast from relative luminance of foreground and background in sRGB. The interactive checker on this page uses that model for AA/AAA thresholds.
It measures text against its immediate background. If text sits on a gradient, image, or glass effect, sample the worst-case color or test the component in a real screenshot — not only flat hex pairs.
AA vs AAA
AA is widely referenced for body text (4.5:1 normal, 3:1 large). AAA is stricter (7:1 / 4.5:1). Validate brand colors before shipping UI components.
What counts as large text?
WCAG defines large text as at least 18pt regular or 14pt bold (roughly 24px / 18.6px CSS at default sizing). If you are unsure, use the stricter normal-text thresholds.
Non-text contrast
WCAG 2.1 also includes contrast for UI components and graphics (focus rings, icons). This tool focuses on text contrast; for borders and icons, use design tools or additional audits.
Dark mode and system themes
Test both light and dark themes. A pair that passes in light mode may fail when users switch to dark mode or high-contrast system settings. Prefer design tokens per theme.
Interpreting the results
Pick foreground and background hex values that match your production CSS (see the checker at the top of this page). Compare the ratio to the AA/AAA rows. If you only change one color, watch for hue shifts that make brand palettes inconsistent.