Image
100% in your browser
Color Contrast Checker — WCAG Accessibility Test
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards. Live preview and instant pass/fail results.
Contrast ratio
21.00 : 1
Large text preview
This is normal body text shown on your chosen background color.
Color Contrast Checker — Test Your Colors for Accessibility
Check whether the contrast between your text and background colors meets WCAG accessibility standards. Good contrast makes your content readable for everyone, including people with low vision or color blindness — and it’s increasingly required by law and rewarded by search engines.
What is contrast ratio?
Contrast ratio measures the difference in brightness between two colors, expressed from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The higher the ratio, the easier the text is to read.
WCAG standards explained
- AA (minimum): 4.5:1 for normal text, 3:1 for large text — the legal standard in most countries
- AAA (enhanced): 7:1 for normal text, 4.5:1 for large text — the gold standard
- Large text is defined as 18pt+ (24px) or 14pt+ bold (about 18.66px bold)
Features
- Live calculation: the ratio updates instantly as you change colors
- Color picker + hex input: choose visually or type exact hex codes
- Four compliance checks: normal and large text, at both AA and AAA levels
- Live preview: see real text rendered in your chosen colors
- Swap button: instantly flip text and background
Why accessibility matters
- Inclusivity: about 1 in 12 men and 1 in 200 women have some form of color vision deficiency
- Legal compliance: accessibility laws (ADA, EAA, etc.) increasingly require WCAG conformance
- Better UX for all: good contrast helps everyone, especially on mobile screens in bright sunlight
- SEO: search engines consider accessibility signals as part of page quality
Privacy
This tool runs entirely in your browser. No data is sent anywhere.