WCAG Contrast Checker

What is a contrast ratio?

A contrast ratio measures how different two colors are in brightness, on a scale from 1:1 (no difference — the same color) to 21:1 (black on white). The higher the number, the easier text is to read, especially for people with low vision, color vision deficiency, or anyone reading a screen in bright sunlight.

Contrast is about brightness, not hue. Red and green can look completely different and still have almost the same brightness, which is exactly why a pair can look distinct to you and still fail.

WCAG contrast requirements

Level AA is the conformance level commonly used as a practical target for accessible web content. The exact legal or procurement requirements depend on the applicable standard, jurisdiction, and organization. AAA is stricter and is not generally required across an entire site.

What counts as large text?

WCAG 3 is in development and may introduce a newer approach to evaluating visual contrast, including APCA. It is still a draft and does not replace WCAG 2.2. For current WCAG 2.2 conformance, the contrast-ratio requirements described above remain applicable.

Contrast ratio examples

The lightest gray that passes on white

#767676 is the lightest neutral gray that passes AA for normal text on a white background, at 4.54:1. One step lighter, #777777 comes in at 4.47:1 and fails. The two are indistinguishable to most eyes, which is why checking the number matters more than judging by sight. If you want gray text on white, #767676 is the ceiling.

Why 4.49:1 fails — and why this checker never rounds up

WCAG requires a ratio of at least 4.5:1. There is no rounding. White text on #0078D7 — the familiar Windows accent blue — has an exact ratio of 4.4989:1. Rounded to two places in the usual way, that displays as "4.50:1", and a checker that compares the rounded figure will tell you it passes. It doesn't.

This checker always shows the ratio rounded down, so the number on screen can never be higher than the real one: #0078D7 shows as 4.49:1, next to a Fail. When a pair lands just short of a threshold, the result also shows the exact ratio to four places so you can see how close it came.

How the contrast ratio is calculated

Each color is first converted to its relative luminance — its perceived brightness on a scale from 0 (black) to 1 (white). The red, green and blue channels are converted from their gamma-encoded values to linear light, then weighted by how sensitive the eye is to each: green counts for most, blue for least.

The ratio compares the lighter luminance with the darker one:

The 0.05 added to each accounts for ambient light reflecting off the screen, and is also what caps the maximum at 21:1.

A technical footnote: WCAG 2 prints 0.03928 as the cut-off in the linear-light conversion, where the sRGB standard it's based on uses 0.04045. This checker uses the sRGB value, but for any color written as a hex code the difference has no effect — no 8-bit channel value falls between the two numbers, so every result is identical either way.

What needs to meet contrast requirements

• Text and images of text — 4.5:1, or 3:1 if large.
• UI components — the visible boundaries of buttons, form fields, checkboxes and toggles, and focus indicators, against the colors next to them: 3:1.
• Meaningful graphics — icons, and the lines and segments of charts that you need to understand the content: 3:1.

Some things are exempt: logos and brand names, disabled controls, purely decorative images, and text that's incidental, such as words in a background photo that aren't meant to be read.

How to fix a pair that fails

• Darken the text or lighten the background (or the reverse on a dark theme). Adjusting lightness while keeping the hue usually fixes it without changing the look much. If you're working with HSL values, the HEX to HSL and HSL to HEX converters can help you switch between formats.
• Make the text large or bold enough to count as large text, if the design allows — it only needs 3:1.
• Don't rely on color alone. Add an underline to links, or an icon to error messages, so meaning survives even where contrast is borderline.

What about WCAG 3 and APCA?

WCAG 3 is in development and may replace the contrast ratio with a newer method called APCA, which accounts for font size and weight more precisely and treats light-on-dark and dark-on-light differently. It is still a draft and not yet a standard or a legal requirement. WCAG 2.2 contrast ratios remain the measure that laws and audits use today.

Frequently asked questions