← All articles

How to Check Your Website's Color Contrast

Contrast is the difference in brightness between your text and its background. Too little of it and your content becomes hard — or impossible — to read. WCAG accessibility guidelines set the bar at 4.5:1 for normal text and 3:1 for large headings. Miss it and you lose older visitors, mobile users in sunlight, and anyone with less-than-perfect vision — together a large slice of your traffic.

Method 1: The squint test (free, 10 seconds)

Open your page, lean back, and squint. Anything that fades into the background fails. Crude, but it catches the worst offenders.

Method 2: Browser DevTools (free, per element)

In Chrome, right-click any text → Inspect → click the color swatch in the Styles panel. Chrome shows the contrast ratio and whether it passes AA. Accurate, but you have to check one element at a time — and you won't think to check the elements you don't suspect.

Method 3: Automated rendered-page scan (whole page at once)

An automated checker that renders your page in a real browser computes the ratio for every visible text element, including ones whose colors come from JavaScript or conflicting stylesheets — the exact cases where invisible-text bugs hide. This is the only method that finds problems you didn't already suspect.

What to fix first

Anything under 1.8:1 is effectively invisible — fix immediately. Under 3:1 is hard to read for most people. Between 3:1 and 4.5:1 fails the standard but is usually a quick color tweak: darken the text or lighten the background until the ratio clears 4.5:1.

Check every element in one scan.
RenderAudit scans your page in a real browser and shows what's costing you visitors — free, no signup.

Run a free scan →