Check foreground/background contrast ratios against WCAG 2.1 AA and AAA accessibility standards.
How this combination looks under common colour vision deficiencies.
AA (minimum): Normal text ≥ 4.5:1 · Large text (18pt+ or 14pt+ bold) ≥ 3:1 · UI components ≥ 3:1
AAA (enhanced): Normal text ≥ 7:1 · Large text ≥ 4.5:1
Large text is defined as 18pt (24px) regular or 14pt (18.67px) bold and above.
The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standard for web accessibility, published by the W3C. WCAG defines three levels of conformance: A (minimum), AA (standard), and AAA (enhanced). Most governments and organizations require WCAG 2.1 Level AA compliance, which includes specific contrast ratio requirements for text and user interface components.
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. These ratios are calculated using the relative luminance formula — a weighted combination of the red, green, and blue components of each color, adjusted for the non-linear way the human eye perceives brightness.
Low contrast text affects far more people than those with diagnosed visual impairments. Reading in bright sunlight, on a low-quality monitor, with age-related vision changes, or while fatigued all reduce effective contrast sensitivity. An estimated 8% of men have some form of color vision deficiency. Good contrast makes your content more readable for everyone, improves comprehension, and reduces eye strain.
Beyond legal compliance, accessible color choices improve your site's perceived quality. High-contrast text reads as more professional and authoritative. Low contrast reads as dated or careless. Testing your color palette during the design phase — rather than after — prevents expensive rework and ensures your content is accessible to the broadest possible audience.