If users can't read your text, the design failed. Contrast is the single most important accessibility metric, and it is easy to check.
The WCAG rules
- AA normal text — at least 4.5:1.
- AA large text (18px+ or 14px bold) — at least 3:1.
- AAA normal text — at least 7:1.
- AAA large text — at least 4.5:1.
How the contrast ratio is calculated
The ratio compares the relative luminance of the two colors — a perceptual measure that
accounts for how the eye responds to red, green, and blue. The formula normalizes each color, applies
a gamma curve, weights the channels, then computes (L1 + 0.05) / (L2 + 0.05). The result
runs from 1:1 (invisible) to 21:1 (black on white).
Why it matters
Low contrast hurts everyone in sunlight or on cheap screens, and it is a hard blocker for low-vision users. Meeting AA is a baseline legal and ethical standard, and in many jurisdictions it is also a requirement.
Real-world pairings
- Good — near-black on white (21:1), dark slate on light gray (≈ 7:1).
- Bad — gray on gray (≈ 2:1), yellow on white (≈ 1.1:1), light blue on white.
- Sneaky — brand colors that pass for large text but fail for body copy.
Contrast beyond text
WCAG also expects 3:1 for UI components (buttons, form borders) and graphical objects. A disabled button that's invisible against its background fails even if no text is involved.
Dark mode considerations
Contrast rules apply in both themes. A palette that passes on white may fail on near-black, so test every pairing in each mode rather than assuming symmetry.
Check your pairings
Enter a foreground and background color in the DevToolbox Contrast Checker and get an instant AA/AAA verdict for both normal and large text.
- Pick the text color and background color.
- Read the computed ratio.
- Adjust until you pass AA at minimum.
- What ratio do I need?
- Aim for 4.5:1 (AA) for body text. Go higher (7:1) for AAA if you can.
- Do images count?
- Text over images needs the same contrast against the busiest part of the background.
Tools beyond this checker
The DevToolbox checker is great for a quick verdict. In a design workflow, browser devtools and plugins like a contrast analyzer give live feedback as you pick colors. Use the checker to confirm, the live tools to iterate.
Contrast and color blindness
About 1 in 12 men has some color vision deficiency. Relying on color alone (red vs green) fails them. Pair color differences with icons, text, or patterns so meaning never depends on hue.
Testing with real users
Automated checks catch ratio failures, not real-world legibility. If you can, watch someone use your interface in varied lighting. A ratio that passes on paper can still be hard to read on a phone in sunlight.
A practical accessibility checklist
- Body text passes AA (4.5:1) at its actual rendered size.
- Interactive elements and their labels are distinguishable without color alone.
- Text over images keeps contrast against the busiest region.
- Both light and dark themes are checked, not just one.
Contrast, font weight, and size
Larger, bolder text needs a lower contrast ratio to remain legible, which is why WCAG sets a 3:1 bar for large text. But don't use that as an excuse to pair two light colors — bigger still isn't readable at 2:1. Check the actual rendered size, not the design intent.
A roundup of testing tools
- DevToolbox Contrast Checker — quick AA/AAA verdict, no upload.
- Browser devtools — live color picking and contrast hints.
- Automated audits — accessibility linters in your CI pipeline.
The most common failures
Placeholder gray text on white, light-on-light brand pairings, and disabled-button states that vanish into the background. All three are caught by a 30-second check before you ship.
Don't forget focus states
Keyboard users rely on a visible focus ring. A low-contrast or missing focus outline is an accessibility failure even when your text passes. Check that focused elements stand out against their background.
Contrast in data visualization
Charts and maps often pair colors that are indistinguishable to color-blind users or fail contrast on their own. Apply the same 4.5:1 thinking to labels and legends, not just body text.
Automating checks in CI
Accessibility linters can flag low-contrast pairs in your stylesheets before they reach production. Pair them with a manual check using this tool so you catch both systematic and one-off issues.
Contrast in dark mode
Dark themes often pair low-contrast grays that look sleek but fail WCAG. The same discipline applies: check text against its actual dark background, not against the light-theme assumption. Many "pretty" dark UIs quietly exclude low-vision users until someone measures the ratio.
Takeaway
Accessible contrast is not a cosmetic nicety; it is the difference between readable and unusable. A thirty-second check before you ship protects low-vision users and meets a baseline legal and ethical bar — there is no good reason to skip it.