A common failure
Foreground #999999 on background #ffffff
Contrast ratio 2.85:1 — fails AA for normal text (needs 4.5:1), passes neither AA nor AAA at that size.
Color Contrast Checker
Check whether a text and background color pair meets WCAG AA or AAA contrast.
Large text preview
Normal text preview — the quick brown fox jumps over the lazy dog.
17.40:1
✓ AA — normal text✓ AA — large text✓ AAA — normal text✓ AAA — large text
Was this tool useful?
About this tool
WCAG (Web Content Accessibility Guidelines) sets a minimum contrast ratio between text and its background so that people with low vision, or anyone reading on a washed-out screen in sunlight, can still read it. The ratio is a single number derived from both colors' relative luminance — it doesn't care which color is text and which is background, only how far apart they are.
How to use it
- Pick a foreground (text) and background color, either with the color swatch or by typing a hex value.
- The contrast ratio and a live preview update immediately.
- Check the badges: AA is the legal/practical minimum most sites target (4.5:1 for normal text, 3:1 for large text — 18pt or 14pt bold and up); AAA is the stricter enhanced standard.
Examples
Common problems
- My design passes AA for large text but fails for normal text.
- This is expected and by design — WCAG allows a lower ratio (3:1) for large text specifically because bigger characters remain legible at lower contrast. Either increase the contrast or keep that color pairing to headings and other large text only.