WebAIM Contrast Checker
Quick online tool. Enter two colors, get instant pass/fail.
Why Contrast Matters
Color contrast affectseveryone'sability to read and interact with content:
- 1 in 12 men(8%) have some form of color vision deficiency
- Millions of peoplehave low vision conditions that require higher contrast
- Situational impairmentsaffect us all: bright sunlight, dim rooms, tired eyes, old monitors
- Legal requirement: WCAG 2.2 Level AA mandates minimum contrast ratios
Good contrast isn't just accessible—it's better design for everyone.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines specify minimum contrast ratios:
| Element Type | Minimum Ratio | WCAG Criterion |
|---|---|---|
| Normal text (under 18pt / 24px) | 4.5:1 | 1.4.3 Contrast (Minimum) |
| Large text (18pt+ or 14pt bold) | 3:1 | 1.4.3 Contrast (Minimum) |
| UI components & graphics | 3:1 | 1.4.11 Non-text Contrast |
| Enhanced Level AAA | 7:1 / 4.5:1 | 1.4.6 Contrast (Enhanced) |
What Counts as "Large Text"?
- 18pt (24px)at regular weight, OR
- 14pt (18.5px)at bold weight
What Needs Contrast?
- Body text, headings, and labels
- Form field borders and placeholders
- Icon-only buttons and controls
- Focus indicators
- Charts, graphs, and data visualizations
- Links (must be distinguishable from surrounding text)
Testing Your Colors
Recommended Tools
Colour Contrast Analyser (CCA)
Desktop app with eyedropper. Test colors directly from your screen.
axe DevTools
Browser extension that scans entire pages for contrast issues.
Figma Contrast Plugin
Check contrast while designing, before development.
How to Test
- Identify theforeground color(text or icon)
- Identify thebackground color(what's behind it)
- Enter both colors into a contrast checker
- Verify the ratio meets the requirement for that element type
- For gradients: test thedarkestforeground on thelightestbackground
Common Problems & Fixes
Problem 1: Light Gray Text
Gray text on white backgrounds is the most common failure.
Don't: 2.5:1 ratio
color: #999999;
background: #ffffff;This gray text fails contrast requirements.
Do: 4.6:1 ratio
color: #767676;
background: #ffffff;This gray text passes for normal text.
Problem 2: Placeholder Text
Most browser defaults for placeholder text fail contrast.
Don't
::placeholder {
color: #aaaaaa;
}Do
::placeholder {
color: #767676;
}Problem 3: Brand Colors That Fail
When your brand colors don't meet contrast requirements:
- Option A:Darken or lighten the color slightly (often unnoticeable)
- Option B:Use the color on a dark background instead
- Option C:Reserve the color for large text or decorative elements only
- Option D:Use as an accent with accessible text alongside
Problem 4: Focus Indicators
Custom focus styles must have 3:1 contrast against adjacent colors.
/* Good focus indicator */
:focus {
outline: 3px solid #005EA2;
outline-offset: 2px;
}
/* High contrast focus ring */
:focus-visible {
outline: 2px solid #000000;
box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px #000000;
}Color Blindness Considerations
Contrast ratios help withlightnessperception, but don't solve color blindness. Additional steps:
- Never use color aloneto convey information—add icons, patterns, or text labels
- Red/green combinationsare problematic for 8% of men
- Test with simulatorsto see how your design appears to color blind users
Color Blindness Simulation Tools
- Sim Daltonism(Mac) — Free app that overlays your screen
- Color Oracle(Windows/Mac/Linux) — Free desktop simulator
- Chrome DevToolsRendering Emulate vision deficiencies
Quick Test
Print your design in grayscale. Can you still understand all the information? If not, you're relying too heavily on color.