How to Check Color Contrast for Accessibility (WCAG Explained)

Low-contrast text presents a major accessibility issue on the internet, yet fixing it is simple. It impacts users with low vision, color-vision differences, and those reading on bright screens outdoors. The Web Content Accessibility Guidelines (WCAG) quantify contrast through a ratio. Contrast ratio measures relative luminance between two colors, scaling from 1:1 (identical hues) to 21:1 (black on white).

Calculating luminance involves linearizing sRGB values and applying weightings favoring green while minimizing blue impact. WCAG outlines contrast thresholds: Level AA for normal text requires a minimum 4.5:1 ratio, while large text (18pt/24px or bigger, or 14pt/18.66px bold) needs at least 3:1. For Level AAA compliance, normal text should meet a 7:1 ratio, and large text should meet 4.5:1.

Non-text contrast also applies to UI elements such as input borders, icons, and focus indicators, necessitating a minimum 3:1 against adjacent colors. Teams typically aim for AA compliance. Decorative text, logo elements, and disabled components are exempt from these requirements.

A frequent error is using light gray text on white backgrounds, which often yields a contrast ratio around 2:1. Text placed over photos or gradients can also fail, as contrast varies along the line. Moreover, checking only the default state while ignoring hover, focus, and visited link colors is another common oversight. Also, relying on color alone to convey information—like red-green status dots without labels or icons—is problematic.

To rectify failing color pairs, maintain hue while adjusting lightness by minor increments. Reassess contrast after each modification until the target ratio is achieved. For text superimposed on images, insert a solid or semi-transparent overlay behind the text, rather than relying on the photo's inherent contrast.

Define accessible color tokens within your design system, ensuring every component inherits these settings. While passing the contrast ratio is crucial, it is not the sole criterion. Testing with actual users, utilizing color-blindness simulators, and avoiding reliance on color as the sole signal are equally important. Additionally, dark modes require separate contrast assessments, as pure white on pure black can cause glare for some readers, prompting many designs to opt for off-white on very dark gray instead.