Vérifier le contraste

Contrast Checker measures a text colour against its background and reports the WCAG 2.2 ratio, which levels it passes, and the APCA lightness contrast alongside. It composites a translucent foreground before measuring — the reason most checkers disagree with the browser — and when a pair fails it finds the nearest passing colour by moving lightness in OKLCh, so the result keeps the hue you started with.

100 % local

L’interface de cet outil est en anglais.

Text colour

Background colour

5.13:1

The quick brown fox jumps over the lazy dog. This paragraph is set at the size WCAG calls normal text.

And this is large text.

Normal text, AAPass · 4.5:1

Body copy: under 18.66px, or under 14px bold. WCAG 1.4.3.

Normal text, AAAFail · 7:1

The enhanced level for the same sizes. WCAG 1.4.6.

Large text, AAPass · 3:1

18.66px and up, or 14px and up bold. WCAG 1.4.3.

Interface, AAPass · 3:1

Icons, focus rings, input borders, chart keys. WCAG 1.4.11.

APCA Lc 75.4dark text on light

Body text at 18px and up in a normal weight. APCA is the WCAG 3 draft model and has no pass or fail — the number maps to a size and weight.

Ratio

5.13:1

Text

#6d6d74

Background

#ffffff

Le guide ci-dessous n’est disponible qu’en anglais.

How does Contrast Checker work?

Contrast is a ratio between two relative luminances. Each channel is taken out of its sRGB encoding — the piecewise transfer function from IEC 61966-2-1, not a plain gamma of 2.2 — then weighted 0.2126 red, 0.7152 green, 0.0722 blue, which is roughly how much each contributes to what the eye reads as brightness. The two luminances go into (lighter + 0.05) / (darker + 0.05), and the 0.05 is a flare allowance standing in for the light your screen is reflecting off the room.

Why a translucent colour needs compositing first

A colour at 50% alpha has no contrast ratio of its own. What a reader sees is the blend of it and whatever is behind it, so the blend is what gets measured. Checkers that skip this step report the ratio of the unblended colour, which is always better than the truth — and it is the single most common reason a tool disagrees with the browser’s own inspector.

Where WCAG 2.x is known to be wrong

The 2.x formula was never derived from readability research; it is a simple luminance ratio, and it fails in both directions. It passes some light grey on white that nobody can read, and fails some dark pairs that are perfectly legible. It also treats black-on-white and white-on-black as identical at 21:1, when light text on a dark background is measurably harder to read at the same ratio.

APCA is the model behind the WCAG 3 draft. It is polarity-aware — the sign of the number tells you which way round the pair is — and returns a lightness contrast value, Lc, rather than a ratio. It is reported here alongside the 2.x ratio and never instead of it, because conformance is still measured against 2.x and a tool that quietly swapped the metric would tell people they had passed an audit they had not.

How the suggestion is found

When a pair fails, the nearest passing colour is found by walking lightness in OKLCh and holding hue and chroma. Walking sRGB channels instead drifts the hue as the colour darkens, so the suggestion comes back a different colour from the one in your palette. The search moves away from the background first — darker on a light page, lighter on a dark one — so a dark brand colour stays dark instead of flipping to near-white.

The two colours

foreground  #6d6d74
background  #ffffff

What is reported

ratio        4.55 : 1
normal AA    pass   (needs 4.5)
normal AAA   fail   (needs 7)
large AA     pass   (needs 3)
APCA         Lc 63.4

What options and edge cases does Contrast Checker support?

Thresholds and what they apply to
Parameter	Type	Default	Behaviour & edge cases
4.5:1	AA	1.4.3	Normal text: anything below 18.66px (14pt), or below 24px (18pt) if bold. The level nearly every legal requirement points at.
3:1	AA	1.4.3	Large text: 18.66px and up, or 14px and up when bold. Measured at the rendered size, not the CSS declaration on a parent.
7:1	AAA	1.4.6	Enhanced contrast for normal text. Rarely required outside public-sector procurement, and hard to reach with a brand palette.
3:1	AA	1.4.11	Non-text: icons, focus indicators, input borders, chart series, the boundary of a button. Added in WCAG 2.1 and still the most-missed rule.
Lc 60	APCA	draft	Roughly where 16px bold or 24px normal becomes comfortable. APCA has no pass or fail — the number maps to a size and weight.
Lc 90	APCA	draft	Enough for any size and weight, including thin fonts and long body copy.
alpha	0–1	1	A translucent foreground is composited onto the background before measuring, because that is what the reader sees.
Disabled text	—	exempt	WCAG exempts inactive controls from 1.4.3 entirely. Legal to leave illegible, and still worth fixing.

Frequently asked questions

What contrast ratio do I need to pass WCAG?

4.5:1 for normal text and 3:1 for large text, at level AA. Large means 18.66px and up, or 14px and up when bold. Level AAA raises those to 7:1 and 4.5:1. Separately, WCAG 1.4.11 requires 3:1 for anything non-text that carries meaning — icons, focus rings, input borders — which is the rule most audits find failing.

Why does this show a different ratio from another checker?

Almost always alpha. A foreground below 100% opacity has no ratio of its own: what a reader sees is that colour blended with the background, so the blend is what gets measured. This tool composites first; several popular checkers do not, and report a better ratio than the page actually has. If both colours are opaque and the numbers still differ, one of the two is applying a plain 2.2 gamma instead of the sRGB piecewise transfer function.

Is 4.5:1 enough for a 14px font?

It is what AA requires, and it is thin. 4.5:1 was set as a minimum, not a target, and at 14px in a light weight on a phone in daylight it is genuinely hard. If the text matters, aim past 7:1 or increase the size. APCA is more useful here than the 2.x ratio, because it ties the number to a size and weight rather than treating all text the same.

Should I use APCA or WCAG 2.x?

Both, for different purposes. WCAG 2.x is what conformance is measured against today, so it is what you report. APCA is the better guide to whether something is actually readable, and it is the direction the standard is going. Where they disagree — usually light greys on white, or mid-tones on dark — APCA is the one to trust with your eyes.

Does contrast apply to disabled buttons and placeholder text?

Disabled controls are exempt from WCAG 1.4.3 outright. Placeholder text is not: it is text, it carries information, and it needs 4.5:1 like any other body copy. The common pattern of grey placeholder text at around 2.5:1 fails, and it fails on exactly the people who most need the hint.

Does this work on a colour with transparency?

Yes. Enter an 8-digit hex or an rgba value and the foreground is composited onto the background before the ratio is computed, which is what the browser paints. The composited colour is shown so you can see the value the ratio actually refers to.

ToolsByUs team · How we check our tools