How to Check Your Website's Color Contrast for WCAG Compliance

Color contrast is one of the most common accessibility failures on the web. According to the WebAIM Million report, low contrast text is found on over 80% of home pages. The good news: it is also one of the easiest issues to detect and fix.

This guide explains what WCAG contrast requirements actually mean, and shows you how to check your site's compliance in seconds using a free Chrome extension.

What Is WCAG Color Contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for people with visual impairments. The ratio is measured on a scale from 1:1 (no contrast -- same color) to 21:1 (maximum contrast -- black on white).

WCAG defines two conformance levels for contrast:

AA is the standard most teams target. It provides good readability for the vast majority of users. AAA is a stretch goal that is worth pursuing for body text and critical UI elements.

Common Contrast Mistakes

The most common violations include light gray text on white backgrounds, colored text on colored backgrounds (especially in buttons and badges), and placeholder text in form inputs that is nearly invisible.

How to Check Contrast with Color Contrast Checker

1. Install the extension Go to the Chrome Web Store and install Color Contrast Checker by BananaWare. It is free and requires no account.
2. Navigate to your website Open the page you want to audit. It works on localhost, staging, and production URLs.
3. Activate the checker Click the Color Contrast Checker icon in your toolbar. The extension will overlay a panel on the page showing a color picker for foreground and background colors.
4. Pick your colors Use the eyedropper tool to select the text color (foreground) and its background color. The extension instantly calculates the contrast ratio and shows whether it passes WCAG AA, AAA, or neither -- for both normal and large text sizes.
5. Fix and re-check If a color pair fails, the extension suggests the closest color that would pass the target level. Adjust your CSS, refresh, and check again. Repeat until all critical text elements meet at least AA.

What to Check First

You do not need to audit every pixel on your site at once. Focus on the elements that matter most:

Body text. This is where users spend the most time reading. Ensure all paragraph text meets at least AA (4.5:1 ratio). Aim for AAA (7:1) if possible.

Navigation and links. Users need to clearly see and identify clickable elements. Check both default and hover states.

Buttons and calls to action. If your primary CTA button has low contrast, users may miss it entirely. Check the button text against the button background color.

Form labels and input text. Inaccessible forms mean lost conversions. Check label text, placeholder text, and the text users type into fields.

Error messages. These are often displayed in red, which can have poor contrast against both white and dark backgrounds. Always verify.

Making Accessibility a Habit

The best approach is to check contrast during development, not after launch. Keep Color Contrast Checker installed and make it part of your code review process. Every time you adjust colors in CSS, take two seconds to verify the ratio. Over time, you will develop an intuitive sense for which color combinations work and which do not.

Accessibility is not a feature -- it is a responsibility. And contrast is the easiest place to start.