WCAG Contrast Checker

What is Color Contrast?

Color contrast is the difference in perceived brightness between foreground (text) and background colors. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum, black on white). Sufficient contrast ensures text is readable for everyone, including people with visual impairments.

WCAG 2.1 Compliance Levels

• WCAG AA (Minimum): Required for most websites
  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+ / 14pt+ bold): 3:1 contrast ratio
• WCAG AAA (Enhanced): Higher standard for optimal accessibility
  • Normal text: 7:1 contrast ratio
  • Large text (18pt+ / 14pt+ bold): 4.5:1 contrast ratio

How the Ratio is Calculated

The contrast ratio is derived from the relative luminance of each color using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance is calculated by converting sRGB values to linear light, then weighting by human perception (red 21.26%, green 71.52%, blue 7.22%).

Why Contrast Matters

• Vision impairments: Low vision, color blindness, age-related changes
• Environmental factors: Bright sunlight, screen glare, low-quality displays
• Legal requirements: ADA, Section 508, EU accessibility directives
• Better UX: Improves readability and usability for all users

Large Text Definition

WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (18.5px) or larger for bold text. Large text has lower contrast requirements because it is inherently easier to read.