WCAG Contrast Checker
FreeTest color contrast ratios against WCAG 2.1 AA and AAA requirements. Instant pass/fail for text and UI components. Free, browser-based.
What's next
Settings guide
WCAG 2.1 contrast requirements:
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | Not specified |
What counts as "large text":
- ·18px (24px CSS) or larger at normal weight
- ·14px (18.67px CSS) or larger at bold weight (700+)
- ·Decorative text and text in logos is exempt
Common failure patterns:
| Color pair | Ratio | Status |
|---|---|---|
| #767676 on #FFFFFF | 4.54:1 | AA Pass (barely) |
| #999999 on #FFFFFF | 2.85:1 | Fail |
| #0000FF on #FFFFFF | 8.59:1 | AAA Pass |
| #00AA00 on #FFFFFF | 3.78:1 | Fail (common mistake) |
| #767676 on #767676 | 1:1 | Fail (obviously) |
Format comparison
WCAG 2.1 vs WCAG 3.0 (APCA): WCAG 3.0 introduces APCA (Advanced Perceptual Contrast Algorithm), which is more nuanced than the current ratio formula. APCA accounts for font size, weight, and the direction of contrast (light on dark vs dark on light). As of 2025, WCAG 2.1 remains the legal standard — WCAG 3.0 is not yet finalized.
Contrast ratio vs perceived contrast: The WCAG formula is based on relative luminance, not perceptual brightness. Some color combinations (blue text on white) pass mathematically but feel low-contrast to some users. When in doubt, test with real users and aim higher than the minimum ratio.
Component contrast (3:1): WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 ratio for the visual boundary of UI components (button outlines, text field borders, checkboxes) against adjacent colors. This is often overlooked — buttons with a subtle border on white can fail even if the button text passes.
How it works
Set foreground
Enter the text or element color — the color you're reading or seeing.
Set background
Enter the background color behind the text or element.
Read the result
See the contrast ratio (e.g., 4.56:1), and pass/fail status for AA and AAA at both normal and large text sizes.
About this format
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text and interactive elements to ensure they are readable by users with low vision or color vision deficiencies. The standard is law-adjacent in many jurisdictions — failing WCAG contrast requirements can expose organizations to accessibility lawsuits and government procurement rejections.
WCAG 2.1 specifies three levels. Level A is the minimum. Level AA is the target for most commercial websites and is required by government accessibility standards in the US (Section 508), UK (PSBAR), EU (EN 301 549), and Australia (WCAG 2.1 AA). Level AAA is the gold standard — desirable but not always achievable for all text due to design constraints.
The contrast ratio is calculated from the relative luminance of the two colors — a physics-based measure of how much light each color reflects. The ratio expresses how far apart the two luminances are, from 1:1 (no contrast) to 21:1 (black on white, the maximum possible contrast).