Color Contrast Checker
Check WCAG 2.2 contrast ratios for text and background colors. Instant AA/AAA pass/fail feedback.
Colors
Preview
The quick brown fox
Normal text sample (16px)
Small text sample (12px)
Results
15.71:1
Contrast Ratio
WCAG AA — Normal text
Minimum 4.5:1
WCAG AA — Large text
Minimum 3:1 (18px+ or 14px+ bold)
WCAG AAA — Normal text
Enhanced 7:1
WCAG AAA — Large text
Enhanced 4.5:1
How to Use the Color Contrast Checker
- Enter your foreground (text) color as a hex code (e.g.,
#1a1a1a) or use the color picker. - Enter your background color the same way.
- The contrast ratio and WCAG AA/AAA pass/fail status appear instantly for both normal and large text sizes.
- If the pair fails, use the suggested alternative colors to find a compliant combination that stays close to your brand palette.
WCAG Contrast Requirements Explained
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with low vision or color deficiencies. The ratio compares the relative luminance of the foreground and background colors on a scale of 1:1 (no contrast) to 21:1 (black on white).
| Standard | Normal Text | Large Text | UI Components |
|---|---|---|---|
| WCAG AA (Level 2) | 4.5:1 minimum | 3:1 minimum | 3:1 minimum |
| WCAG AAA (Level 3) | 7:1 minimum | 4.5:1 minimum | Not defined |
Large text is defined as 18pt (24px) regular weight or 14pt (approximately 18.67px) bold weight or larger.
Frequently Asked Questions
What is WCAG and why does it matter?
WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C that defines how to make web content accessible to people with disabilities, including those with visual, auditory, cognitive, and motor impairments. WCAG AA compliance is legally required in many jurisdictions including the EU, UK, Canada, and for US federal websites under Section 508.
What is the difference between AA and AAA?
AA is the practical standard used in most accessibility audits and legal requirements. AAA is a higher bar that not all content can realistically meet — WCAG itself notes that meeting AAA for all content is not possible. Target AA for all text; reach for AAA where feasible, especially for body copy and important UI labels.
Does contrast ratio apply to images and icons?
Yes. Informational icons and graphics that convey meaning must meet a 3:1 contrast ratio against their background under WCAG 1.4.11 (Non-text Contrast). Purely decorative images with no informational value are exempt. Use alt="" on decorative images to signal this to screen readers.
My brand colors fail AA — what should I do?
You don't have to abandon your brand colors entirely. Use the failing color for decorative elements (borders, backgrounds, icons) and switch to a darker or lighter variant for text. Most brands have compliant versions of their palette — or you can darken/lighten the color until it passes while keeping the hue consistent.