How to Check Color Contrast for WCAG
Checking color contrast means measuring how different two colors are in brightness, expressed as a ratio from 1:1 (no difference) to 21:1 (black on white), and comparing that ratio with the WCAG thresholds. Low-contrast text is hard to read for people with low vision or color blindness, and for everyone else on a phone in sunlight.
The WCAG thresholds
The Web Content Accessibility Guidelines set minimum ratios by text size:
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
- AA is the level most sites and many accessibility policies target.
- AAA is the enhanced level, worth aiming for in long-form body text.
- UI components covers icons, input borders, and focus rings that users need to see.
Large text means at least 18pt (24px) at regular weight, or at least 14pt (about 18.67px) bold. Bigger text is easier to read, so the bar is lower.
Check a color pair
- Open the Color Contrast Checker.
- Enter the Foreground (Text) color and the Background color as HEX values, or pick them.
- Read the Contrast Ratio and the Pass/Fail result for each level.
- Look at the Preview, which shows normal and large sample text in your colors.
Use Swap to flip the two colors, which is handy for checking dark mode.
Reading the result
- Passes all levels: safe for any text.
- Passes AA for all text: fine for body copy on most sites.
- Acceptable for large text and UI only: usable for headings, big buttons, and icons, not for paragraphs.
- Fails all criteria: change the colors.
A few reference points: #767676 on white is about 4.5:1, right at the AA line for normal text. Light gray placeholder text such as #AAAAAA on white is around 2.3:1 and fails.
How to fix a failing pair
- Darken the text or lighten the background. Small shifts in lightness move the ratio quickly. Keep the hue and adjust only lightness to stay on brand.
- Make it large text. A brand color that fails at 16px may pass as a 24px heading.
- Don't rely on color alone. Links inside body text should have an underline or another cue besides color.
- Check every state. Hover, disabled, placeholder, and error states are common failures.
- Test text on images. Sample the lightest and darkest areas behind the text and check the worse one, or add a solid overlay behind the text.
Contrast in dark mode
Dark themes fail in the opposite direction: dim gray text on near-black backgrounds. Pure white on pure black can feel harsh, so many designs use off-white on dark gray. Check that pair too. It usually still passes comfortably.
Where contrast fits in accessibility
Contrast is one of the most common failures in accessibility audits, and one of the cheapest to fix. It's only part of the picture: keyboard navigation, alt text, form labels, and focus visibility matter too. Fixing contrast early, while choosing a palette, avoids reworking components later.
Summary
Check each text and background pair in the Color Contrast Checker, aim for 4.5:1 on normal text and 3:1 on large text and UI elements, and adjust lightness until it passes. To build the palette in the first place, start with the Color Picker.