Color contrast is one of the most fundamental aspects of web accessibility — and one of the most commonly overlooked. Studies estimate that roughly 300 million people worldwide experience some form of color vision deficiency. If your website's text blends into its background, you're locking out a massive audience. This guide walks you through everything you need to know about color contrast checking, from WCAG requirements to practical workflows.
A contrast ratio measures the difference in luminance (perceived brightness) between two colors. The formula produces a value between 1:1 (identical colors) and 21:1 (black versus white). Higher ratios mean better readability.
The ratio is calculated using the WCAG formula, which accounts for the relative luminance of each color. Here's the simplified version:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the lighter color and L2 is the darker colorThe Web Content Accessibility Guidelines (WCAG) define specific contrast ratio thresholds at three conformance levels:
| WCAG Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| Level AA | 4.5:1 minimum | 3:1 minimum | 3:1 minimum |
| Level AAA | 7:1 minimum | 4.5:1 minimum | — |
WCAG defines large text as:
This is a generous threshold. Most body text on websites falls well below 18px, which means the 4.5:1 ratio applies in most practical situations.
A color contrast checker tool lets you input two colors (foreground and background) and instantly see the resulting contrast ratio. Here's a practical workflow:
Start with your design's text color and background color. You can use hex values (#1a1a2e), RGB (rgb(26, 26, 46)), or HSL (hsl(240, 28%, 14%)). Most checkers accept all three formats.
Paste your foreground and background colors into the checker. The tool will display:
If your pair doesn't meet the threshold, darken the background or lighten the text. Good checkers provide suggested adjustments — a slightly modified color that passes compliance while staying close to your original palette.
#e2e8f0 (light gray text) on #0f1117 (near-black background) yields a contrast ratio of 14.3:1 — well above AAA requirements. This is a textbook dark-mode combination.
#94a3b8 on #1e293b gives a ratio of only 3.8:1. It looks acceptable to many users but fails WCAG AA for normal text. Bump the text to #cbd5e1 to reach 6.2:1.
#8b5cf6 (purple) on #0f1117 (dark) gives 6.5:1 — passes AA. But #a78bfa (lighter purple) on the same background drops to 4.7:1 — barely passes. Always verify with a checker rather than guessing.
Placeholder text is frequently styled in light gray, creating poor contrast. WCAG considers placeholders as "text" that must meet contrast requirements. Use a mid-range gray like #9ca3af on white, which achieves 3.9:1 — still below 4.5:1. The safest approach is to use #6b7280 (5.1:1 on white) or implement visible labels above inputs.
A hamburger menu icon or search icon with no text label relies entirely on color contrast. Ensure the icon color meets the 3:1 minimum for non-text UI components, and always provide an aria-label for screen reader support.
Interactive elements need visible focus indicators. A subtle 1px border in a similar shade won't cut it. WCAG requires a 3:1 contrast ratio between the focused and unfocused states for the indicator itself. A bright purple outline (#8b5cf6) on a dark card works well.
Manual checking is fine for small projects, but larger codebases benefit from automation:
Accessibility isn't just about compliance checkboxes. Good contrast benefits everyone:
Key takeaway: A color contrast checker isn't just a compliance tool — it's a quality gate that makes your product usable for a significantly larger audience. Make it a non-negotiable part of your design process.
Use our free Color Contrast Checker to verify your color pairs against WCAG standards instantly.
No. Decorative graphics, logos, and purely visual elements are exempt from contrast requirements. However, if an image conveys meaning (like an icon button), it must meet the 3:1 minimum.
The same ratios apply. Dark mode doesn't get a free pass. Light text on dark backgrounds must still meet 4.5:1 for normal text and 3:1 for large text.
In many jurisdictions, yes. The ADA, Section 508 (US), EAA (Europe), and AODA (Ontario) all reference WCAG. Non-compliance can result in lawsuits, especially for businesses serving the public.