Color Contrast Checker

What Is Colour Contrast and Why Does It Matter?

Colour contrast is the difference in luminance between foreground text (or UI elements) and their background. The Web Content Accessibility Guidelines (WCAG) 2.2, published by the W3C, define minimum contrast ratios that text must meet so that people with low vision, colour blindness, or age-related sight loss can read your content.

Poor contrast is the single most common WCAG violation found in automated accessibility audits. The 2025 WebAIM Million study found that over 81% of homepages had detectable low-contrast text — making it the number-one accessibility defect on the web. Fixing contrast issues is one of the highest-impact, lowest-effort improvements you can make.

WCAG Contrast Requirements

WCAG defines contrast requirements under Success Criterion 1.4.3 (Contrast — Minimum) at Level AA and Success Criterion 1.4.6 (Contrast — Enhanced) at Level AAA:

Level AA (the legal baseline)

• Normal text (under 18pt / 14pt bold): contrast ratio of at least 4.5:1
• Large text (18pt+ / 14pt+ bold): contrast ratio of at least 3:1
• Non-text UI components (icons, form borders, focus indicators): contrast ratio of at least 3:1 against adjacent colours (SC 1.4.11)

Level AAA (enhanced)

• Normal text: at least 7:1
• Large text: at least 4.5:1

Most accessibility laws — including the ADA (US), Section 508, the European Accessibility Act (EAA), and AODA (Canada) — reference WCAG Level AA as the minimum compliance standard. Meeting AAA is recommended but not legally required in most jurisdictions.

How Contrast Ratio Is Calculated

The WCAG algorithm computes relative luminance for each colour using the sRGB colour space. Each channel (R, G, B) is linearised, then weighted: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio between two luminances L1 and L2 (where L1 is the lighter colour) is: (L1 + 0.05) / (L2 + 0.05). The result is a value between 1:1 (identical colours) and 21:1 (black on white).

This tool performs the exact calculation specified by WCAG, including the gamma-correction linearisation step. It is equivalent to the algorithm used by axe-core, Lighthouse, and other professional accessibility testing tools.

Common Contrast Mistakes

• Light grey text on white — popular in modern design, but often fails AA. A common offender is #999 on #fff (ratio 2.85:1).
• Placeholder text — input placeholders like color: #aaa on a white background typically fail contrast requirements. Placeholders must also meet 4.5:1.
• Coloured buttons with white text — vibrant greens, oranges, and yellows often lack sufficient contrast with white text. Always verify.
• Dark mode — switching to a dark background doesn't automatically fix contrast. Light grey text on dark grey can fail just as easily.

How to Fix Contrast Issues

Use this tool to find a nearby colour that passes. Small adjustments — darkening a foreground colour by 10–15% or lightening a background — can often bring a failing pair into compliance without changing your brand palette.

For a complete picture, run a full Accesseon scan on your website. It checks every text element, button, and form input against WCAG contrast requirements automatically — and flags the exact CSS selectors you need to update.