WCAG compliance isn't optional — 83% of websites fail contrast requirements. Check any color pair against WCAG 2.2 AA and AAA standards instantly, with clear pass/fail indicators and nearest-passing color suggestions.
The Web Content Accessibility Guidelines (WCAG) 2.2 define specific contrast ratio requirements to ensure text and UI elements are readable by people with visual impairments. Color contrast is measured as a ratio between the relative luminance of two colors, with 1:1 being no contrast (identical colors) and 21:1 being maximum contrast (black on white).
Level AA (standard compliance): Normal text (under 18px regular or 14px bold) requires a minimum contrast ratio of 4.5:1. Large text (18px+ regular or 14px+ bold) requires 3:1. User interface components and graphical objects that convey information require 3:1 against adjacent colors. These are the thresholds most organizations and legal requirements target.
Level AAA (enhanced compliance): Normal text requires 7:1, and large text requires 4.5:1. While AAA is not typically required as a blanket standard, it's recommended for body text and critical information. Higher contrast benefits all users, not just those with vision impairments — it improves readability in bright sunlight, on low-quality displays, and for tired eyes.
Approximately 2.2 billion people worldwide have some form of vision impairment, according to the WHO. This includes low vision conditions that don't qualify as legal blindness but significantly impact reading ability. Color vision deficiency (commonly called color blindness) affects about 8% of men and 0.5% of women, altering how they perceive color differences.
Beyond permanent vision conditions, situational impairments affect everyone. Reading a phone screen in bright sunlight, viewing a presentation on a washed-out projector, or reading with fatigued eyes at night all reduce effective contrast. Designing for WCAG compliance improves the experience for these common situations too.
To check contrast, you need two values: the foreground color (typically text) and the background color. The contrast ratio is calculated from their relative luminance values. While you can compute this manually, tools make it instant — enter or pick two colors and get the ratio with pass/fail indicators for each WCAG level.
For web pages, checking contrast means examining every text-background combination. This includes: body text on page backgrounds, headings on section backgrounds, link text on surrounding backgrounds, button text on button backgrounds, placeholder text in form fields, error messages, and text overlaid on images or gradients.
When a color pair fails, the fix is usually small. Darkening the text color by 10-20% in lightness or lightening the background often achieves compliance without noticeably changing the design. Many contrast tools suggest the nearest passing color — the minimum adjustment needed to meet the target ratio while staying as close to the original color as possible.
For text on images or gradients, consider adding a semi-transparent overlay behind the text, using a text shadow, or constraining text to areas of the image with consistent contrast. These techniques ensure compliance even on variable backgrounds.
Get instant page analysis on every site you visit. One-click install, no signup required.
Install Atoms for Chrome