Color Contrast Checker
Calculate color contrast ratios and check WCAG AA & AAA accessibility compliance instantly. Pick foreground and background colors to see pass/fail results for normal text, large text, and UI components.
Contrast Ratio
21.00:1
The quick brown fox jumps over the lazy dog.
Large text sample (18px+)
Small body text — 12px example for reading.
Level AA
Level AAA
How to Use the Color Contrast Checker
Choose your foreground (text) color and background color using the color pickers or by typing hex codes directly. The contrast ratio and WCAG pass/fail badges update instantly. Use the swap button to reverse the colors, or pick from common presets.
WCAG Contrast Requirements
| Element | AA Minimum | AAA Enhanced |
|---|---|---|
| Normal text (under 18px regular / 14px bold) | 4.5:1 | 7:1 |
| Large text (18px+ regular or 14px+ bold) | 3:1 | 4.5:1 |
| UI components (icons, inputs, borders) | 3:1 | Not defined |
Why Contrast Matters for SEO
Core Web Vitals
Poor contrast hurts user engagement metrics (bounce rate, time on site) which are indirect ranking signals.
Accessibility Compliance
WCAG AA is legally required in many jurisdictions. Non-compliance can result in legal risk and damaged reputation.
Broader Audience
1 in 12 men and 1 in 200 women have some form of color blindness. Good contrast ensures your content reaches everyone.
Mobile Readability
Outdoor mobile use in sunlight requires higher contrast than minimum WCAG thresholds for comfortable reading.
Frequently Asked Questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure content is readable by people with low vision or color blindness. WCAG 2.1 Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18px+ regular or 14px+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
The contrast ratio uses relative luminance values. Each color channel (R, G, B) is linearized, then combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), resulting in a value from 1:1 (no contrast) to 21:1 (black on white).
What contrast ratio do I need to pass WCAG AA?
For WCAG 2.1 Level AA: normal text needs at least 4.5:1, large text (18px+ or 14px+ bold) needs 3:1, and UI components (icons, borders, form inputs) need 3:1. Most websites aim for AA compliance as a minimum standard.
What is the difference between WCAG AA and AAA?
AA is the standard compliance level required by most accessibility laws (ADA, EN 301 549, etc.). AAA is enhanced compliance — normal text needs 7:1 and large text needs 4.5:1. AAA is often impractical for entire sites but is recommended for critical text like legal notices or medical information.
Does this tool support transparency or opacity?
The tool works with solid hex colors only. For transparent/semi-transparent colors, first compute the effective color by blending with your background, then enter the resulting solid hex value.
Related Tools
Need More Developer Tools?
Explore our full suite of free developer and SEO tools — color converters, JSON formatters, schema generators, and more.
Browse All Tools