♿ Color Contrast Checker
WCAG requires 4.5:1 contrast for normal text (AA), pick your text and background colors and get the exact ratio with pass/fail per level.
Sample text
The quick brown fox jumps over the lazy dog.
Contrast ratio
7.88:1
1:1 identical · 21:1 black-on-white
AA normal (4.5:1)
✓ Pass
AA large (3:1)
✓ Pass
AAA normal (7:1)
✓ Pass
AAA large (4.5:1)
✓ Pass
How the color contrast checker works
The ratio uses the WCAG 2.x formula: each color's relative luminance is computed from linearized sRGB channels (L = 0.2126R + 0.7152G + 0.0722B), then ratio = (L₁ + 0.05) ÷ (L₂ + 0.05), ranging 1:1 (identical) to 21:1 (black on white). Thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (18pt/24px, or 14pt/18.66px bold); AAA raises those to 7:1 and 4.5:1. Non-text UI components need 3:1 under WCAG 2.1.
Contrast is the accessibility check with legal teeth: WCAG AA is the reference standard in the EU Accessibility Act (applying to services since June 2025), the ADA context in the US, and most public-sector web law. It is also just good design, passing text is readable on a sunny phone screen.
Frequently asked questions
What contrast ratio does WCAG require?
Level AA: 4.5:1 for normal text, 3:1 for large text (≥24px, or ≥18.66px bold) and UI components. Level AAA: 7:1 and 4.5:1. The checker reports all four verdicts.
What counts as "large text"?
At least 18pt (24px), or 14pt (18.66px) if bold, larger glyphs stay legible at lower contrast, hence the relaxed 3:1 threshold.
Is 21:1 the maximum?
Yes, pure black on pure white (or inverse). A ratio of 1:1 means identical colors.
Do I need AA or AAA?
AA is the standard cited by the EU Accessibility Act and most regulations; AAA is enhanced guidance worth meeting for body text where you can. Logos and decorative text are exempt.
My brand color fails, what now?
Usually darken it for text use while keeping the bright variant for graphics (this site does exactly that), or reserve the failing color for large headlines where 3:1 suffices.
Is the math here the official formula?
Yes, the WCAG 2.x relative-luminance and contrast-ratio equations, computed exactly, in your browser.
Related color tools
From the blog
-
Brand Colors: The Exact Hex Codes of Famous Brands, and How to Use Them Legally
Exact brand color hex codes, Netflix #e50914, Spotify #1db954, Tiffany #0abab5, for 1,100+ brands, plus when using a brand's palette is legal.
-
Accessible Color: Contrast Ratios and Color Blindness, Explained
Accessible color needs enough contrast (WCAG AA: 4.5:1 text, 3:1 large) plus cues beyond color, ~1 in 12 men are color-blind. How to get both right.
-
WCAG Color Contrast Explained: The 4.5:1 Rule Without the Jargon
WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text and UI. What the ratio means, how to check it, and how to fix failing brand colors.