Color Contrast Checker: How to Find and Fix Low Contrast

Low-contrast text appeared on 83.9% of home pages in the 2026 WebAIM Million analysis, up from 79.1% the year before, making it the single most common accessibility failure on the web for the seventh year running. Most of those colour choices were not deliberate. Designers picked a shade that looked fine on their calibrated monitor and never checked the ratio. Use our WCAG contrast checker to test any colour pair against WCAG requirements in seconds.

Video: Color Contrast Checker: How to Find and Fix Low Contrast

Check Your Colour Contrast Now

Paste two hex values, your text colour and your background colour, into the checker. You will get a contrast ratio, a pass or fail result at both AA and AAA levels, and a clear indication of whether that result changes for large text. If you have a live page and are not sure which hex values to use, open your browser’s inspector tool (right-click, then Inspect, then the colour picker) to pull the exact values from the rendered page.

What This Checker Tests: WCAG Contrast Ratios Explained

The checker measures the luminance difference between two colours and expresses it as a ratio. WCAG 2.1 sets three thresholds you need to know:

• AA (Success Criterion 1.4.3): 4.5:1 for normal text, 3:1 for large text
• AAA (Success Criterion 1.4.6): 7:1 for normal text, 4.5:1 for large text
• Non-text contrast (Success Criterion 1.4.11): 3:1 for UI components and graphical objects such as form borders, icons, and chart lines

AA is the threshold courts and regulators treat as the compliance baseline. AAA is worth targeting for body copy if your audience includes older readers or people with low vision, but most legal frameworks do not require it.

“Large text” has a precise definition that catches many designers off guard: 18pt (24px) at normal weight, or 14pt (approximately 18.67px) at bold weight. Everything below those thresholds counts as normal text and requires the 4.5:1 ratio, regardless of how large it appears in your design tool.

A concrete example: #767676 on white (#FFFFFF) produces a ratio of exactly 4.54:1, which just passes AA for normal text. Drop one step to #777777 and the ratio falls to 4.48:1, a fail. The margin is that thin.

Because contrast is the most common failure across 1 million home pages, it is also the most common issue surfaced when you scan your site for accessibility issues. Most sites have more than one failing colour pair.

For a full breakdown of the WCAG standard behind these thresholds, see WCAG 2.2 Explained in Plain English.

How to Read Your Results

The checker returns a ratio like 3.2:1 or 6.8:1. Here is what each range means in practice:

Below 3:1: Fails at every level for every text size. Change the colour before shipping.

Between 3:1 and 4.5:1: Passes AA only if your text qualifies as large (24px normal weight or 18.67px bold). Smaller text at this ratio fails AA.

4.5:1 or above: Passes AA for all text sizes. Also passes AAA for large text.

7:1 or above: Passes AAA for all text sizes.

Borderline results, ratios between 4.3:1 and 4.5:1, are worth fixing even when they technically pass. Rendering differences across screens and operating systems can push a borderline pass into a real-world fail.

For UI components such as button borders, input outlines, and icons, the threshold is 3:1 under SC 1.4.11, regardless of size.

What a Contrast Checker Cannot Catch

The checker tests a hex colour pair against WCAG thresholds. That covers most text-on-background combinations, but not every scenario where contrast fails in practice:

• Text on images or photographs: White text over a variable background image changes contrast depending on which part of the image sits behind each word. No hex pair captures that.
• Text on gradients: The contrast ratio shifts across the gradient. Check the worst point manually, usually where text and background are closest in luminance.
• Low-contrast icons or infographics embedded as images: SC 1.4.11 applies, but the checker cannot read pixel values inside a raster image.
• Transparency and opacity: Semi-transparent colours produce different actual contrast depending on what is underneath them. Check the computed colour, not the CSS value.

For these scenarios, use your browser’s colour picker to sample the actual rendered colour at the worst-case point, then run those values through the checker.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG? 4.5:1 for normal text and 3:1 for large text (24px regular weight or 18.67px bold) to meet AA. Those are the thresholds most legal standards reference. See Website Accessibility Standards: WCAG, ADA, EAA, Section 508, and AODA Explained for the legal context.

Does contrast apply to logos and decorative elements? No. WCAG explicitly exempts logotypes and decorative content from contrast requirements. A logo in brand colours does not need to meet 4.5:1. Text next to that logo does.

My brand colours fail. What do I do? You do not have to abandon your palette. Test tints and shades: a lighter or darker version of your brand colour will often reach the required ratio while staying clearly within the same brand family. Most colour systems have room to shift 10 to 15 percent in lightness without breaking brand recognition.

Does this apply to placeholder text in form fields? Yes. Placeholder text is still text. If it falls below 4.5:1 against the field background, it fails SC 1.4.3. This catches many designers off guard: placeholder text is typically styled grey on white and sits well below the threshold.