Color Contrast and Accessibility: A WCAG Guide
Good color contrast accessibility is the difference between a design everyone can read and one that quietly excludes a chunk of your audience. The rules are not vague: the Web Content Accessibility Guidelines (WCAG) give you exact contrast ratios to hit, and you can check any color pair in seconds. This guide covers the ratios that matter, how to measure them, and the practical fixes designers reach for when text fails.
If you are new to the underlying theory, start with our guide to color theory basics and circle back here — contrast is where theory meets a hard pass/fail line.
What contrast ratio actually measures
Contrast ratio is a number between 1:1 and 21:1 that describes the difference in relative luminance between two colors — typically your text and its background. Pure white text on pure black is 21:1, the maximum. Identical colors are 1:1, the minimum, and unreadable.
The key word is luminance, not “how different the colors look.” Two colors can feel distinct to your eye — say a medium red and a medium green — yet sit at nearly the same luminance, producing dangerously low contrast. That is exactly why you measure instead of guessing.
The WCAG thresholds you need to memorize
WCAG defines two conformance levels for contrast. AA is the practical baseline most teams and legal standards require; AAA is the stricter target for high-accessibility contexts like government and healthcare.
| Content type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | — |
“Large text” means roughly 24px regular or 18.66px bold and up. The logic: bigger, heavier strokes are easier to read, so they earn a lower required ratio. This is also why a failing body color can sometimes pass simply by being used at a larger heading size.
How to test contrast (three reliable methods)
You do not need to calculate luminance by hand. Use one of these:
- WebAIM Contrast Checker — paste two hex values and it returns the ratio plus AA/AAA pass/fail for normal and large text. The fastest sanity check.
- Browser DevTools — Chrome and Firefox show a contrast ratio (and a suggested accessible color) right in the color picker when you inspect a text element. Best for auditing a live page.
- Figma plugins — tools like Stark or the built-in contrast readouts let you check while you design, before anything ships.
If you are choosing palettes from raw codes, it helps to understand how those codes work — our explainer on HEX, RGB, and HSL shows why HSL makes it easy to darken a color until it passes without shifting the hue.
Fixing text that fails contrast
When a pair fails, resist the urge to swap to a totally different color. Usually a controlled adjustment is enough and keeps your brand intact:
- Darken or lighten the text, not the hue. In HSL, drop the lightness value until the ratio clears 4.5:1. The color still reads as “your blue,” just deeper.
- Adjust the background instead. A pale tint behind dark text often passes more comfortably than fighting the text color.
- Add a scrim. Text over photos is the classic failure. A semi-opaque dark or light overlay between image and text stabilizes contrast regardless of the photo.
- Increase size or weight. Bumping a caption to large-text size lowers the requirement from 4.5:1 to 3:1.
Designing dark mode without breaking contrast
Dark mode flips the usual assumptions and quietly reintroduces contrast failures. The two mistakes designers make most often are using pure white text on pure black, and reusing light-mode accent colors that were tuned for white backgrounds.
Pure white (#ffffff) on pure black (#000000) hits the maximum 21:1 ratio, but that extreme contrast causes a shimmering “halation” effect that strains the eyes, especially for readers with astigmatism. The practitioner fix is to soften both ends: use an off-white like #e6e6e6 for text and a very dark gray such as #121212 for the background. You stay well above 4.5:1 while removing the harsh glare.
Accent colors need re-tuning too. A saturated blue that passed contrast against white can fall below 4.5:1 against a near-black surface, or it can pass but vibrate uncomfortably. In dark mode, lighten and slightly desaturate your accents so they sit calmly on the dark base. The cleanest way to do that is in HSL — raise lightness, drop saturation a touch — which is exactly the kind of adjustment our HEX, RGB, and HSL guide makes painless. Always re-run every text and UI color through a checker in dark mode; passing in light mode guarantees nothing.
Building contrast into your process, not bolting it on
The teams that never ship contrast failures are not more careful at the end — they bake contrast into the start. Three habits make that happen:
- Define an accessible palette once. Lock in text-on-background pairs that already pass AA, and only ever use those pairs. If the decision is made at the palette stage, individual screens cannot drift below threshold.
- Annotate your design tokens. Note the contrast ratio next to each text-color token in your design system so anyone reusing it sees the number, not just the swatch.
- Add an automated check. Tools like axe and Lighthouse flag contrast failures in the browser automatically, catching regressions before they reach users.
This shift — from auditing at the end to designing with accessible pairs from the start — is what separates compliant products from ones that merely passed an audit once. It also tends to produce a more disciplined palette overall, which dovetails neatly with proportioning color via the 60-30-10 color rule.
Contrast is not the same as color blindness
Passing WCAG contrast does not automatically make a design color-blind friendly, and the reverse is also true. Contrast is about luminance difference; color blindness is about hue confusion. A red error message and a green success message can both pass 4.5:1 against white yet be indistinguishable to someone with deuteranopia.
The fix is redundancy: never encode meaning with color alone. Pair color with an icon, a label, an underline, or a pattern. A red ✕ and a green ✓ work for everyone; two identical dots in red and green do not.
Where contrast gets overlooked
Most audits catch body paragraphs but miss the edges. Check these:
- Placeholder text in form fields — it is often light gray and almost always fails.
- Disabled buttons — frequently below 3:1, which is acceptable for disabled states but easy to misuse on active controls.
- Focus indicators and borders — the 3:1 rule for UI components applies here.
- Link colors inside body text — they need contrast against both the background and the surrounding text, or an underline.
Once your contrast is solid, balancing the palette as a whole is the next step — our breakdown of the 60-30-10 color rule helps you distribute those accessible colors so the page feels intentional rather than loud.
Frequently Asked Questions
What is the minimum contrast ratio for WCAG AA?
For normal body text, WCAG AA requires a contrast ratio of at least 4.5:1 between text and background. Large text (24px regular or 18.66px bold and above) needs only 3:1. User interface components and graphical elements also require 3:1.
Does white text on a colored button need to pass contrast?
Yes. Button text is normal text and must meet 4.5:1 against the button’s background color (3:1 if the text is large). White on a light brand color often fails — darken the button or use dark text instead to clear the threshold.
Is AAA contrast always better to aim for?
Not necessarily. AAA (7:1 for body text) is the right target for high-stakes content like medical or government sites, but it sharply limits your palette. Most products target AA as a solid, legally defensible baseline and reserve AAA for critical text.
Can a design pass contrast but still fail color-blind users?
Yes. Contrast measures luminance difference, not hue. Two colors can pass 4.5:1 yet look identical to someone with color blindness. Always reinforce color-coded meaning with text, icons, or patterns so information never depends on color alone.
