How to Test Your Website's Color Contrast for Accessibility (WCAG 2.2)

Why Color Contrast Matters

Color contrast is the most commonly failed web accessibility criterion. According to the WebAIM Million report (an annual accessibility audit of the top 1 million websites), over 80% of tested home pages have detectable WCAG contrast failures. This means the text on those pages is difficult or impossible to read for millions of users — including people with color blindness, low vision, or age-related visual decline.

Beyond accessibility, contrast failures also hurt everyone in certain conditions: reading outside on a sunny day, on a dim screen in a dark room, or when a screen is viewed at an angle. Good contrast helps everyone.

What Is Color Contrast Ratio?

Contrast ratio is a mathematical measure of the difference in luminance (lightness) between two colors. It's expressed as a ratio like 4.5:1 or 7:1. The scale runs from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white).

The formula uses the relative luminance of each color (a value from 0 for black to 1 for white). You don't need to calculate this manually — our free Color Picker tool can help you compare colors, and dedicated contrast checkers calculate ratios instantly.

WCAG 2.2 Contrast Requirements

WCAG (Web Content Accessibility Guidelines) version 2.2 is the current standard. It defines two conformance levels for contrast:

Level AA (Minimum — Required for Most Legal Compliance)

• Normal text (under 18pt / under 14pt bold): Minimum contrast ratio of 4.5:1
• Large text (18pt+ / 14pt+ bold): Minimum contrast ratio of 3:1
• UI components (buttons, form fields, icons): Minimum contrast ratio of 3:1 against adjacent colors

Level AAA (Enhanced — Best Practice)

• Normal text: Minimum contrast ratio of 7:1
• Large text: Minimum contrast ratio of 4.5:1

For most websites, Level AA compliance is the target. Level AAA is aspirational and not required by most accessibility laws.

What Counts as "Large Text"?

WCAG defines large text as 18 point or larger for normal weight, or 14 point or larger for bold text. In CSS pixels (at 96 DPI): 18pt = 24px, 14pt bold = approximately 18.67px bold. Decorative text, logos, and text that is purely visual (not meaningful) are exempt from contrast requirements.

The Most Common Contrast Failures

• Gray text on white backgrounds: Light gray (#999999 on white = 2.85:1 — fails AA). Design trends favor subtle gray text that looks modern but fails accessibility.
• Placeholder text in form fields: Light gray placeholder text almost always fails. Many browsers default to a very light gray placeholder color.
• White text on brand colors: White on a medium blue or green may look fine to most eyes but fail WCAG. Always check — don't assume.
• Disabled state styling: Graying out disabled buttons is fine, but if users might try to read the text, check the contrast.
• Text on images: Text overlaid on photos often fails in different regions of the image. Add a semi-transparent background behind text or use a text shadow.
• Colored links without underlines: If links rely on color alone to distinguish them from body text, the link color must have sufficient contrast against both the background AND the surrounding body text color.

How to Test Contrast Ratios

Method 1: Use Our Free Color Picker

Our Color Picker tool lets you select and compare colors, providing hex, RGB, and HSL values. For contrast ratio calculation, use those values in any WCAG contrast checking tool.

Method 2: Browser DevTools

Chrome and Firefox DevTools both show contrast ratios. In Chrome: right-click any text → Inspect → in the Styles panel, click the colored square next to the text color → the "Contrast ratio" is shown with a pass/fail indicator.

Method 3: Automated Accessibility Audits

Run Lighthouse in Chrome DevTools (Shift+Ctrl+N → Lighthouse tab → Accessibility). It automatically catches many contrast failures and lists them with specific elements and ratios.

How to Fix Contrast Failures

• Darken the text color: Move from #999999 to #767676 (exactly 4.5:1 on white).
• Lighten or darken the background: Sometimes adjusting the background color is more consistent with your design.
• Increase font size: Making text larger reduces the required contrast ratio from 4.5:1 to 3:1.
• Add contrast to UI components: Borders on form fields, focus indicators on buttons — these all need 3:1 contrast against adjacent colors.
• Use a color palette generator: Our Color Palette Generator can help you build color schemes — then verify contrast ratios for your specific text/background combinations.

Accessibility Is Also SEO

Google uses accessibility signals in its quality assessment. Pages that are accessible to screen readers and users with disabilities are generally better structured for SEO crawlers too. Fixing contrast issues improves your site's overall quality score — a factor in AdSense approval and organic ranking.

Explore Our Free Design and Developer Tools

Beyond contrast checking, you can explore our full suite of free developer tools including our Color Picker, Color Palette Generator, and Gradient Generator — all browser-based, no sign-up required.