Color contrast is one of the most commonly overlooked accessibility requirements in web development — and one of the easiest to fail accidentally. You pick a beautiful grey text on a white background, it looks fine on your calibrated monitor, and then someone with low vision or a washed-out phone screen can't read it at all.
This post covers how contrast ratios work, what WCAG requires, and how to check your colors before they ship.
What Is a Contrast Ratio?
The contrast ratio between two colors is a number from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). It is calculated from the relative luminance of each color, which is a perceptual measure of how bright a color appears to the human eye.
The formula is:
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the luminance of the lighter color and L2 is the luminance of the darker one. Luminance itself is computed from the RGB values after gamma-correcting them (which is why the math is not as simple as just comparing hex codes).
Fortunately, you do not need to calculate this by hand. SnappyTools has a free Color Contrast Checker that computes the ratio instantly and shows you exactly which WCAG levels you pass.
WCAG 2.1 Requirements
The Web Content Accessibility Guidelines define three conformance levels — A, AA, and AAA — and contrast requirements that differ by text size:
| Element | AA minimum | AAA enhanced |
|---|---|---|
| Normal text (< 18pt or < 14pt bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt or ≥ 14pt bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
Level AA is the legal baseline in most jurisdictions (it's what the ADA, EN 301 549, and WCAG 2.1 compliance frameworks reference). Level AAA is aspirational — aim for it on body text where possible.
Common Failures (And How to Spot Them)
Light grey on white
/* Fails AA — ratio ~4.1:1 */
color: #767676;
background: #ffffff;
The classic mistake. #767676 on white is almost exactly at the AA threshold and fails it narrowly. Use #595959 or darker for reliable compliance.
Brand colors with white text
Bright brand colors frequently fail:
-
#FF6B6B(coral) on white: ~3.0:1 — fails AA for normal text -
#FFD700(gold) on white: ~1.7:1 — fails everything
If your brand color fails contrast on white, either darken the shade for UI text or use dark text on the brand color instead.
Placeholder text
CSS ::placeholder styling inherits from the input but is typically rendered at reduced opacity. The effective contrast of opacity: 0.5 on a #555 placeholder over white is much lower than #555 measured directly. Check your placeholder styling explicitly.
Link underline color
When text-decoration-color is set separately from color, both need adequate contrast. A common pattern that fails: grey underline color on a white background used to subtly de-emphasise links.
Checking Contrast in Your Workflow
There are three points where it's worth checking:
1. During design — before a pixel is written to CSS. Design tools like Figma have contrast plugins (Stark, Contrast) that flag issues while you're still moving colors around.
2. During development — when you translate the design to code. Use a browser-based tool so you can quickly iterate on hex values. The Color Contrast Checker at SnappyTools lets you enter hex codes or use a color picker and shows the ratio and pass/fail for all WCAG levels at once.
3. During audit — before shipping. Chrome DevTools has a contrast ratio indicator in the color picker (accessible when inspecting an element). axe DevTools and Lighthouse both flag contrast failures automatically.
Quick Reference: Ratios That Always Pass
| Ratio | Passes |
|---|---|
| ≥ 7:1 | AAA normal text, AAA large text |
| ≥ 4.5:1 | AA normal text, AAA large text |
| ≥ 3:1 | AA large text, AA UI components |
| < 3:1 | Fails everything |
Text Over Images and Gradients
WCAG contrast rules assume a flat background. When text sits over an image or gradient, you need to ensure the minimum contrast is met at the worst-case point in the image.
Common solutions:
-
Text shadow —
text-shadow: 0 1px 4px rgba(0,0,0,0.8)works but can look harsh -
Semi-transparent scrim —
background: linear-gradient(transparent, rgba(0,0,0,0.6))from the bottom up - Solid background strip — old-fashioned but reliable
None of these are checkable by automated tools — you need a human eye (or a per-pixel luminance calculation) to verify.
One Last Thing: Colour Is Not the Only Signal
WCAG 1.4.1 says you cannot convey information using colour alone. A red/green "error/success" indicator needs a second signal (icon, label, border shape) to be accessible to colour-blind users. This is separate from the contrast ratio — a fully accessible red error state has high contrast and an error icon.
Color contrast takes about 30 seconds to check per color pair. Making it part of your review workflow is one of the highest-ROI accessibility habits you can build.
Use the free Color Contrast Checker — no signup, runs in your browser, shows WCAG AA and AAA results instantly.
Top comments (0)