♿ 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
Netflix red is #e50914, Spotify green #1db954, Tiffany blue #0abab5. Where to find the exact hex codes of 1,100+ brands, why colors themselves aren't owned, and where using a brand's palette crosses from normal design practice into trademark trouble.
-
Accessible Color: Contrast Ratios and Color Blindness, Explained
Accessible color rests on two things: enough contrast (WCAG AA needs 4.5:1 for text, 3:1 for large text) and not relying on color alone (~1 in 12 men are color-blind). How the ratios work, what deuteranopia/protanopia/tritanopia change, and how to fix a failing color.
-
WCAG Color Contrast Explained: The 4.5:1 Rule Without the Jargon
WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text and UI — the standard cited by the EU Accessibility Act. What the ratio means, how to check it, and how to fix failing brand colors.