Colour Contrast Checker

Q: What contrast ratio do I actually need?

For ordinary body text, 4.5:1 is the WCAG AA requirement and the number most audits check against. Large text — 18pt and above, or 14pt and above when bold — only needs 3:1, because bigger letterforms stay legible at lower contrast. AAA, the stricter level, asks for 7:1 for body text and 4.5:1 for large. Most teams target AA and treat AAA as an aspiration for critical reading content. Interface components and graphical objects have their own 3:1 requirement under WCAG 2.1.

Q: Why does a colour that looks bright score so badly?

Because contrast is measured from relative luminance, not from how bright a colour appears. The formula weights green far more heavily than red or blue — green contributes about 72% of perceived luminance, blue barely 7%. So a saturated yellow measures as extremely light and a saturated blue as surprisingly dark, regardless of how vivid they both look. That is why white text on a mid-blue button frequently fails while black text on the same button passes comfortably.

Q: Does contrast apply to a logo or an icon?

Logos are exempt from the text contrast requirements — WCAG explicitly carves out logotypes, since a brand mark is not something a user needs to read as text. Icons are different: if an icon conveys meaning that is not available another way, it falls under the 3:1 non-text contrast requirement. Purely decorative imagery has no contrast requirement at all. The practical rule is that anything a user must perceive to operate or understand the interface needs to meet a threshold.

Q: What about text over a photograph or a gradient?

The ratio has to hold against the lightest and darkest points the text actually sits on, which is why text over imagery is so often inaccessible in practice. A caption that passes against the sky in the top corner can fail badly against a dark building lower down. The usual fixes are a solid or semi-opaque overlay behind the text, a text shadow heavy enough to guarantee separation, or simply moving the text off the image. Checking one sampled colour is not sufficient evidence for a photograph.

Q: Can I check a semi-transparent colour?

Yes, but you need to say what is behind it. A colour with an alpha channel has no contrast of its own — the effective colour is the result of compositing it over whatever sits underneath, so the same rgba value can pass over white and fail over a dark background. This tool composites your foreground against the background you provide, and tells you it has done so, rather than silently ignoring the alpha and reporting a figure that does not correspond to anything on screen.

Q: Is passing the ratio the same as being accessible?

No, and it is worth being clear about that. Contrast is one measurable criterion among many. Text can hit 7:1 and still be unreadable because it is too small, set in a thin weight, tracked too tightly, or placed over a busy background. Equally, colour must never be the only means of conveying information, regardless of how much contrast it has. Treat the ratio as a floor that catches an entire category of problems automatically, not as a certificate that a design works for everyone.

Check any foreground and background pair against the WCAG AA and AAA thresholds, with a verdict for body text, large text and interface components.

Text colour

Background colour

Preview

Large text at this contrast

Body text at this contrast — the size most of a page is set in, and the one that has to clear 4.5:1.

WCAG thresholds

Contrast is measured with the WCAG relative luminance formula, entirely in your browser. Nothing you enter is uploaded.

What It Does

Give it a text colour and a background colour and it returns the contrast ratio between them, together with a plain verdict on what that ratio is good enough for. The thresholds are not a single number: body text needs 4.5:1, large text only 3:1, and interface components such as input borders and focus rings have their own 3:1 requirement. A pair that fails for a paragraph may be perfectly acceptable for a heading, so the tool reports each case separately rather than issuing one pass or fail. Where a pair does fail, it works out how far off you are and suggests the nearest adjustment that would clear the bar, so you get a fix rather than just a complaint. Transparency is handled properly by compositing the foreground over the background first.

When to Use It

An accessibility audit flagged a component and you need the exact ratio and which threshold it missed before you can argue about it or fix it.
You are picking a link colour that has to work against your page background and stay distinguishable from surrounding body text.
A brand palette was chosen without accessibility in mind and you need to know which combinations are usable for text and which are decoration only.
You are setting a focus ring or input border colour and need the 3:1 non-text threshold rather than the text one.
A designer proposed placing white text on a mid-tone button and you want the measurement rather than a debate about how it looks.

Worked Examples

#767676 on #ffffff

The canonical borderline grey. It lands at 4.54:1 — just over the AA line for body text, and nowhere near AAA. Lighten it by a single step and it fails, which is why this exact grey appears in so many accessibility guides.

#ffffff on #3b82f6

White text on a popular mid-blue, a combination used constantly on buttons. It reaches only 3.68:1, so it passes for large text but fails for body text — while black text on the same blue would reach 5.71:1.

#ffffff on #ffd700

White on gold, the classic failure. Gold has very high measured luminance, so this comes in near 1.4:1 and fails everything, including the non-text threshold. Black on the same gold passes comfortably.

Features

Exact WCAG contrast ratio for any two colours

Separate verdicts for body text

large text and UI components

AA and AAA levels reported independently

Transparency composited against the real background

Live preview of the pair at both text sizes

Suggested nearest passing colour when a pair fails

Swap foreground and background in one click

Accepts hex

rgb()

hsl() and CSS colour names

Colour pickers alongside the text inputs

Runs entirely in your browser

How to Use

1. Enter your text colour and background colour, by typing them or using the pickers. 2. The ratio appears immediately with a verdict for each WCAG threshold. 3. Check the preview to see the pair at both body and large text sizes. 4. If a threshold fails, read the suggestion for the nearest colour that would pass. 5. Use Swap to test the reverse pairing.

Common Mistakes

Testing only one pair from a palette. Contrast is a property of a combination, not a colour, so a palette needs every text-and-background pairing checked rather than a spot check on the primary.
Assuming white text belongs on any coloured button. For mid-tone blues, greens and reds, black text frequently scores far higher, and the instinct to reach for white is often wrong.
Reading 3:1 as a general pass. That threshold applies to large text and to non-text components only. Body text needs 4.5:1, and most of the text on a page is body text.
Ignoring the alpha channel. A semi-transparent colour has no contrast until it is composited, and the same value can pass over a white card and fail over a dark one.
Treating a passing ratio as proof of accessibility. Contrast catches one class of problem; it says nothing about text size, weight, spacing or whether colour is carrying meaning on its own.

Frequently Asked Questions

What contrast ratio do I actually need?

Why does a colour that looks bright score so badly?

Does contrast apply to a logo or an icon?

What about text over a photograph or a gradient?

Can I check a semi-transparent colour?

Is passing the ratio the same as being accessible?

Related Tools

Case Converter Character & Word Counter