Color Contrast Checker
Test any foreground and background color pair against WCAG AA and AAA accessibility standards. Live preview, instant results, 100% browser-based.
The quick brown fox
jumps over the lazy dog
Normal text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contrast Ratio
WCAG Compliance
Partially accessible
♿ What This Tool Does
A free online color contrast checker that tests any foreground (text) and background color pair against the Web Content Accessibility Guidelines (WCAG). You get a live preview, the exact contrast ratio, and PASS/FAIL results for all four WCAG levels: AA Normal, AA Large, AAA Normal, and AAA Large. Everything runs in your browser — no data is sent anywhere.
Use it to verify that your website, UI designs, email templates, or marketing materials are readable for users with low vision, color blindness, or viewing on poor screens. Accessibility compliance is a legal requirement in many countries (ADA, EAA, Equality Act, Section 508) and a major SEO ranking signal.
📐 WCAG Contrast Requirements
| Level | Normal text | Large text | When to use |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | Legal minimum for most websites |
| AAA | 7:1 | 4.5:1 | Enhanced — recommended for vision-critical content |
Large text = 18pt (24px) regular or 14pt (18.66px) bold. Everything smaller counts as normal.
🧮 How Contrast Ratio is Calculated
The WCAG contrast formula uses the relative luminance of each color in the sRGB color space. For each color, each RGB channel is gamma-corrected:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(where R, G, B are sRGB-gamma-corrected)
ratio = (L_brighter + 0.05) / (L_darker + 0.05)The ratio ranges from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white — the maximum). The 0.05 offset handles pure black and prevents division by zero.
⚠️ Common Accessibility Mistakes
Light gray on white
The classic fail. #999 on #FFF is only 2.85:1 — fails AA for normal AND large text. Designers love it for looking "subtle" but it's unreadable for many users.
Pastel colors
Light blues, mint greens, lavenders on white backgrounds rarely meet 4.5:1. Great for backgrounds; bad for text.
Text over gradients
A contrast ratio that passes at one end of a gradient fails at the other. Test against the lightest and darkest points.
Disabled state colors
UI designers often use very low contrast for "disabled" buttons, but WCAG 2.1 still requires 3:1 for UI component colors (1.4.11 Non-Text Contrast).
🔒 Privacy
- ✓ All calculations run in your browser using JavaScript
- ✓ Color values are never sent, stored, or logged
- ✓ Works offline after the page first loads
❓ Frequently Asked Questions
What is a color contrast ratio?
Color contrast ratio is a measure of how different two colors appear to the human eye, calculated from their relative luminance. The ratio ranges from 1:1 (identical colors, invisible) to 21:1 (maximum possible, black on white). Higher ratios mean more contrast and better readability — especially important for users with low vision or color blindness.
What are WCAG AA and AAA standards?
WCAG (Web Content Accessibility Guidelines) defines two levels of conformance for color contrast. AA is the minimum standard most websites should meet: 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA is the enhanced standard: 7:1 for normal text and 4.5:1 for large text. AAA is recommended for content aimed at users with vision impairments.
How is contrast ratio calculated?
The formula uses relative luminance based on the sRGB color space. For each color, you compute the relative luminance as a weighted sum of gamma-corrected R, G, B values (L = 0.2126×R + 0.7152×G + 0.0722×B). The ratio is then (L_brighter + 0.05) / (L_darker + 0.05). The 0.05 offset handles pure black and prevents division by zero. This exact formula is mandated by WCAG.
What counts as "large text"?
WCAG defines large text as 18 point (24 pixels) or larger at normal weight, OR 14 point (18.66 pixels) or larger at bold weight. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because the larger letterforms are inherently easier to read even at lower contrast. Everything smaller counts as "normal" text.
Why does my beautiful design fail accessibility?
Common culprits: light gray text on white (#999 on #FFF is only 2.85:1 — fails AA for both normal and large text), pastel colors on white, thin fonts on busy gradients, and low-contrast "subtle" UI states. Design trends often prioritize aesthetics over readability. The fix is usually to darken the text color or lighten the background until you hit at least 4.5:1.
Does this apply to images and icons too?
WCAG 2.1 added a separate requirement (1.4.11 Non-Text Contrast) for UI components and graphical objects: minimum 3:1 contrast against adjacent colors. This applies to icons, form borders, focus indicators, chart elements, and similar. This tool measures the ratio; the 3:1 level is what you should target for those cases.
Is color contrast the only accessibility concern?
No, it is one of many. WCAG also covers keyboard navigation, screen reader support, alt text, form labels, focus management, motion and animation preferences, and more. Contrast is one of the easiest wins because it is measurable and testable — but accessible design goes much further than just colors.
Is my color data private?
Yes. Everything runs entirely in your browser. The colors you enter are never sent, stored, or logged anywhere. Works offline after the page first loads.