Skip to main content
Free, no signup

Free Color Contrast Checker

Check a text and background color against the WCAG contrast thresholds. Enter two colors and see the ratio and whether it passes AA and AAA, for normal and large text, straight away.

Color contrast checker

Large text sample

This is normal body text on your chosen background. If it is hard to read here, it is hard to read on your site.

Everything is calculated in your browser. Nothing you type is sent anywhere.

Contrast ratio

17.40:1Passes AA for normal text
Normal text, AA
Body text under 18pt. Needs 4.5:1
Pass
Normal text, AAA
The enhanced level. Needs 7:1
Pass
Large text, AA
18pt, or 14pt bold, and up. Needs 3:1
Pass
Large text, AAA
Enhanced, for large text. Needs 4.5:1
Pass
UI and graphics, AA
Icons, borders, focus rings. Needs 3:1
Pass
Contrast is one check. Test your whole page for accessibility

What a contrast ratio means

Contrast ratio is a single number that describes how far apart two colors are in brightness. It runs from 1:1, which is the same color on itself and completely unreadable, up to 21:1, which is pure black on pure white. The higher the number, the easier the text is to read, especially for people with low vision, aging eyes, or anyone on a dim screen or in bright sunlight.

The number comes from the relative luminance of each color, not from how different the hues look. That is why a mid-gray and a slightly different mid-gray can look distinct to you and still fail: your eye reacts to hue, the ratio only counts brightness. It is worth checking rather than guessing.

The checker above works out the ratio the moment you change either color, and tells you which of the WCAG thresholds the pair clears.

The WCAG contrast thresholds

Two levels, AA and AAA, and a lower bar for large text because bigger shapes stay legible at lower contrast.

ContentLevel AALevel AAAWCAG criterion
Normal text4.5:17:11.4.3 and 1.4.6
Large text3:14.5:11.4.3 and 1.4.6
UI components and graphics3:1No AAA rule1.4.11

Large text is 18pt, which is about 24px, or 14pt bold, which is about 18.66px bold. AA is the level most organizations aim for and the one most accessibility rules reference. AAA is stricter and is not expected across a whole site.

Reading the result

The same ratio is judged against different bars depending on where the color is used.

1. Normal text is the hard case

Most of the words on a page are normal text, and it has the highest bar: 4.5:1 for AA. If a pair passes here, it passes almost everywhere. This is the row to watch first.

2. Large text gets a lower bar

Headings and other large text only need 3:1 for AA, because larger letter shapes stay readable at lower contrast. A color that fails for body text can still be fine for a big headline.

3. Fixing a fail

You do not have to change the design. Darkening the text, lightening the background, or nudging either color until the ratio clears the threshold is usually enough. Adjust one color at a time and watch the number.

Contrast is one part of accessibility.

This tool checks one color pair at a time. The free TagPipes Website Accessibility Checker loads a whole page in a real browser and finds contrast problems in context, along with missing image descriptions, unlabeled forms, and controls a keyboard cannot reach.

Check your entire website

Free, no signup, usually ready in a few minutes.

Frequently asked questions

TagPipes monitors, configures and reports. It does not determine legal compliance and does not provide legal advice. Output is informational and reflects observed state at the time of observation. Rawsoft's expertise is technology, not law; please confirm any regulatory interpretation with your own counsel.

Check the rest of your site's accessibility

Contrast is one check. The free Website Accessibility Checker loads a full page in a real browser and reports the rest, explained for the question you came with.