Color Contrast Checker
Check WCAG 2.1 color contrast ratios for accessibility. Pick foreground and background colors to verify AA/AAA compliance for normal and large text.
Color Contrast Checker
Check WCAG 2.1 color contrast ratios for accessibility compliance
The quick brown fox jumps over the lazy dog
Regular body text at 16px. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) to meet Level AA compliance.
Small text at 14px. This size is harder to read with low contrast. WCAG Level AAA requires 7:1 for normal text and 4.5:1 for large text.
Reversed: background color on foreground
This preview shows what it looks like when the colors are swapped. The contrast ratio stays the same.
Common Color Pairs
About WCAG Contrast Guidelines
WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments.
| Level | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text is defined as 18pt (24px) or 14pt bold (18.66px bold).
All calculations follow the WCAG 2.1 relative luminance formula using sRGB linearization.
What is a Color Contrast Checker?
A color contrast checker measures the contrast ratio between two colors to determine if they meet WCAG 2.1 (Web Content Accessibility Guidelines) requirements. Sufficient contrast ensures that text is readable by people with visual impairments, including color blindness and low vision. It is a legal requirement in many countries under accessibility laws like the ADA, EN 301 549, and Section 508.
WCAG 2.1 Contrast Requirements
- Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold).
- Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.
The contrast ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).
Key Features
- Real-time Calculation: See the contrast ratio update instantly as you pick colors.
- AA/AAA Badges: Clear pass/fail indicators for both compliance levels and text sizes.
- Live Preview: See your text rendered with the selected colors at different sizes.
- Fix Suggestions: When contrast fails, the tool suggests the closest compliant colors.
- Color Pairs: Pre-built accessible color combinations you can apply with one click.
How to use the Color Contrast Checker
- Pick a foreground (text) color using the color picker or type a hex value.
- Pick a background color the same way.
- Read the contrast ratio and check the AA/AAA pass/fail badges.
- If the ratio fails, use the suggested fixes or try a common accessible pair.
How is Contrast Ratio Calculated?
The formula uses relative luminance as defined by WCAG 2.1. Each sRGB color channel is linearized, then weighted (R: 0.2126, G: 0.7152, B: 0.0722) to compute luminance. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
WCAG contrast requirements at a glance
| Level | Normal text | Large text (18pt+ / 14pt bold) | UI components |
|---|---|---|---|
| AA (legal standard in most jurisdictions) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | not defined |
For the rest of the accessibility toolkit, the colors directory lists contrast checkers, color blindness simulators and accessible palette builders, with their licenses.
Frequently Asked Questions
What contrast ratio passes WCAG AA?
For AA compliance, normal text needs a contrast ratio of at least 4.5:1 against its background; large text (18pt and up, or 14pt bold) needs 3:1, and so do UI components and graphics. AA is the level referenced by most accessibility legislation, including the European Accessibility Act and ADA-related rulings.
What is the difference between WCAG AA and AAA?
AAA is the enhanced tier: 7:1 for normal text and 4.5:1 for large text, versus 4.5:1 and 3:1 for AA. AAA is recommended for body text of reading-heavy interfaces and for audiences with low vision, but it is not legally required in most contexts and some brand palettes cannot reach it everywhere; AA is the practical target.
How do I check the contrast of two colors?
Enter the text color and the background color (hex, RGB or HSL): the tool computes the WCAG 2.1 luminance ratio and shows pass or fail for AA and AAA at both text sizes, with a live preview. Everything runs in the browser, so you can test unreleased brand palettes privately.
Does black text on white have the highest possible contrast?
Yes: pure black on pure white is 21:1, the maximum of the WCAG scale. Many design systems deliberately soften it (for example dark gray #111 on off-white) to reduce glare while staying far above the 7:1 AAA threshold, which is why you rarely see literal #000 on #FFF in modern interfaces.
Related
Free forever, no ads, no tracking. Support the project