Test WCAG 2.1 AA and AAA compliance for text and backgrounds
Read more: WCAG Color Contrast Checker -- AA and AAA Guide
Color contrast is the difference in perceived brightness between two colors. In web design and accessibility, it specifically refers to the luminance ratio between foreground text and its background. High contrast makes text easier to read for everyone, including people with low vision or color deficiencies.
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that must be met to ensure content is readable. These ratios are calculated using the relative luminance of each color, not just the visual difference between hues.
WCAG 2.1 defines two levels of conformance for text contrast -- AA (minimum) and AAA (enhanced):
| Level | Text Type | Minimum Ratio |
|---|---|---|
| AA | Normal text | 4.5:1 |
| AA | Large text (18pt+ or 14pt bold+) | 3:1 |
| AAA | Normal text | 7:1 |
| AAA | Large text (18pt+ or 14pt bold+) | 4.5:1 |
Large text is defined as 18 points (24px) or larger, or 14 points (approximately 18.66px) bold or larger. UI components and graphical objects require a minimum 3:1 ratio.
A contrast ratio of at least 4.5:1 is required for WCAG AA compliance with normal-sized text. For enhanced accessibility (AAA), aim for 7:1. Large text (24px or 18.66px bold) can meet AA with 3:1. As a best practice, higher ratios are always better for readability.
The WCAG algorithm converts sRGB color values to linear light, then calculates relative luminance using the formula L = 0.2126*R + 0.7152*G + 0.0722*B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker luminance. The maximum possible ratio is 21:1 (black on white).
Yes. WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for UI components (buttons, form fields, icons) and meaningful graphical objects. This ensures interactive elements are perceivable by users with low vision.
Large text is at least 18 points (24 CSS pixels) for regular weight, or at least 14 points (approximately 18.66 CSS pixels) for bold weight. Large text is allowed a lower contrast threshold because larger characters are inherently easier to read.