Insufficient color contrast is the #1 accessibility failure on the web. Check any text-background color pair against WCAG 2.2 standards — with instant AA and AAA pass/fail results — without leaving the page.
According to the WebAIM Million study, low color contrast is found on 83% of homepages, making it the most prevalent accessibility issue on the web. Insufficient contrast makes text difficult or impossible to read for users with low vision, color vision deficiency, or those simply using a screen in bright sunlight. Fixing contrast issues is one of the highest-impact accessibility improvements you can make.
WCAG 2.2 defines specific contrast ratio thresholds. For Level AA compliance (the standard most organizations target): normal text needs a minimum contrast ratio of 4.5:1, and large text (18px bold or 24px regular) needs 3:1. For Level AAA compliance (enhanced): normal text needs 7:1, and large text needs 4.5:1. UI components and graphical objects need at least 3:1 against adjacent colors.
The contrast ratio is calculated from the relative luminance of the foreground and background colors. A ratio of 1:1 means the colors are identical (no contrast), while 21:1 is the maximum (pure black on pure white). Understanding that contrast is a ratio, not a visual impression, is important — colors that look different to you may have low ratios that fail WCAG.
Designers often rely on their own visual judgment to assess contrast, but this approach is unreliable. Your monitor calibration, ambient lighting, and personal vision all affect perception. A color pair that looks fine on your studio display might be unreadable on a budget laptop screen in a bright office. The only reliable approach is measuring the actual contrast ratio.
Color vision deficiency affects approximately 8% of men and 0.5% of women. Common types include red-green color blindness (protanopia and deuteranopia), which can make red text on dark backgrounds nearly invisible. Automated contrast checking catches these issues regardless of your own color perception.
WCAG 2.2 Level AA also requires 3:1 contrast for user interface components and meaningful graphics. This applies to form field borders, icon buttons, focus indicators, chart elements, and interactive controls. A subtle gray border on a white input field might look elegant but fail accessibility requirements if the contrast ratio is below 3:1.
The most efficient approach is checking contrast during the design phase, not after development. But for existing sites, a browser-based contrast checker lets you validate live pages quickly. Check your primary text colors against their backgrounds first (body text, headings, links), then move to interactive elements (buttons, form fields, navigation), and finally check decorative elements that convey information (icons, badges, status indicators).
When a color pair fails, you typically only need to adjust one color by a few shades to pass. Making text slightly darker or backgrounds slightly lighter often achieves compliance without noticeably changing the design. Many contrast tools suggest the nearest passing color, making fixes easy.
Get instant page analysis on every site you visit. One-click install, no signup required.
Install Atoms for Chrome