Color Contrast Checker
Test text and background colors against WCAG
The Color Contrast Checker measures the contrast ratio between a text color and a background color, and tells you instantly whether the pair passes WCAG accessibility standards — the criteria used in accessibility audits, legal compliance checks (ADA, European Accessibility Act), and Lighthouse scores.
Pick colors with the swatches or type hex codes. The live preview shows real text at both sizes, and the pass/fail badges update as you adjust. The ratio runs from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white).
What the WCAG levels mean
- AA normal text — 4.5:1 — the standard requirement for body text; what most audits and laws demand
- AA large text — 3:1 — for text ≥24px, or ≥18.5px bold
- AAA — 7:1 / 4.5:1 — the stricter enhanced level, recommended for reading-heavy content
Working on a design system? Pair this with our CSS clamp() calculator for fluid type and the px to rem converter for accessible sizing.
Example
Gray text #767676 on white #ffffff gives a ratio of 4.54:1 — it passes AA for normal text, just barely. The popular lighter gray #999999 gives only 2.85:1 and fails even for large text.
This is the most common accessibility failure on the web: light gray "subtle" text that's unreadable for low-vision users — and in bright sunlight, for everyone.
Frequently Asked Questions
What is a good color contrast ratio?
For normal body text, at least 4.5:1 (WCAG AA). For large text — 24px and up, or 18.5px bold — 3:1 is enough. The stricter AAA level asks 7:1 for body text. Black on white is 21:1, the maximum possible.
How is the contrast ratio calculated?
WCAG defines it as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker color. Luminance weights the RGB channels by how bright they appear to the human eye — green counts most (71.5%), blue least (7.2%) — after gamma correction.
What is WCAG?
The Web Content Accessibility Guidelines — the international standard for accessible websites, published by the W3C. Contrast requirements are criterion 1.4.3 (AA) and 1.4.6 (AAA). Laws like the ADA (US) and the European Accessibility Act reference WCAG, so failing contrast can be a legal problem, not just a UX one.
What counts as 'large text' in WCAG?
18pt (24px) regular weight, or 14pt (18.66px) bold and above. Large text only needs 3:1 contrast instead of 4.5:1, because bigger strokes are easier to distinguish at lower contrast.
Does contrast matter for people without vision impairments?
Yes. Low-contrast text becomes unreadable for everyone on a phone in sunlight, on cheap or aging displays, or with night-mode filters. Roughly 8% of men are also color-blind — luminance contrast is what remains reliable when hue perception isn't.
Why does light gray text fail contrast so often?
Designers reach for #999 or #aaa to make secondary text 'subtle', but on white those give ratios of 2.8:1 and 2.3:1 — well below the 4.5:1 requirement. The darkest gray that passes AA on white is about #767676. Subtlety is better achieved with size and spacing than with low contrast.
Do contrast rules apply to buttons and icons?
Yes — WCAG 1.4.11 requires 3:1 for 'non-text' UI elements: button borders, form field outlines, icons, focus indicators, chart elements. Text inside buttons follows the normal text rules against the button's background color.
Does contrast checking work for gradients and images as backgrounds?
Check the worst spot: sample the lightest area of the background that sits behind text (any color-picker/eyedropper tool works) and test that against the text color. If text sits on photos, add a solid or semi-transparent overlay and test against the overlay color.
What is the contrast requirement for dark mode?
The same ratios apply — 4.5:1 for body text. A common dark-mode mistake is pure white text (#fff) on very dark backgrounds, which passes easily but causes halation (glow) for astigmatic users; slightly dimmed white like #e8e8e8 on #121212 still passes (14.6:1) and reads more comfortably.
How do I fix a failing color pair without changing my brand color?
Three options: darken/lighten the background instead of the brand color; use the brand color for large headings only (3:1 threshold) and a darker variant for body text; or reserve the brand color for non-text accents (borders, backgrounds) where 3:1 suffices. Small luminance shifts often preserve the hue impression.
Does Lighthouse check color contrast?
Yes — the Accessibility score in Chrome's Lighthouse flags text below WCAG AA thresholds automatically. It only tests rendered text it can see, so hover states, disabled states and text over images still need manual checks with a tool like this one.
Is 3:1 contrast ever acceptable for normal text?
Not under WCAG — 3:1 is only for large text and UI components. Normal-size body, labels and links need 4.5:1 at level AA. The one exception: purely decorative text and logos are exempt from contrast requirements entirely.