Skip to main content
Trim Marks

Contrast Checker

Five WCAG checks with a live preview of the actual text.

Two colours

Result

Large text, 24 pixels

Body text at sixteen pixels. The quick brown fox jumps over the lazy dog.

Small print at fourteen pixels.

6.38:1

  • AA — body text4.5:1 · under 18ptPass
  • AA — large text3:1 · 18pt+ or 14pt boldPass
  • AAA — body text7:1Fail
  • AAA — large text4.5:1Pass
  • Non-text contrast3:1 · borders, icons, focus ringsPass

Ratios are computed from WCAG 2.2 relative luminance, the same formula auditing tools use. A pass here is a floor rather than a target — text that clears 4.5:1 can still be hard work at small sizes on a poor screen.

Check two colours against WCAG 2.2 and see the result on real text rather than as a bare number. Five checks cover body copy, large text, and the 3:1 minimum that borders, icons and focus rings have to clear — the one most people forget until an audit finds it.

01

Why use this tool?

Five checks, not one

AA and AAA for both body and large text, plus the non-text minimum for borders, icons and focus indicators.

Live preview

The ratio matters less than whether you can read it. Three text sizes render in your colours as you adjust them.

Pass and fail in words

Never signalled by colour alone, which would be a strange failing in a contrast tool.

Instant

No button. Adjust a colour and every check updates.

02

How this contrast checker works

The ratio comes from WCAG 2.2's relative luminance formula: each channel is linearised, weighted for how sensitive the eye is to it — green far more than blue — and combined. The two luminances then go into (lighter + 0.05) / (darker + 0.05). That offset is what stops pure black against pure white running to infinity and caps the scale at 21:1.

The thresholds are not arbitrary. 4.5:1 was chosen to accommodate roughly 20/40 vision, the level typical of someone around eighty, and large text gets a lower 3:1 bar because size compensates for contrast. AAA's 7:1 targets 20/80 vision. These are population thresholds rather than personal preferences, which is why designing to them matters more than whether a particular pair looks fine to you.

The row people miss is non-text contrast. WCAG 1.4.11 requires 3:1 for anything that identifies a control or conveys information without words — input borders, icon buttons, focus rings, chart lines. It is the most common audit failure by some distance, because designers check their body copy and stop there.

03

How to use it

  1. Step 1: Set foreground and background

    Type hex codes or use the pickers. Swap them with one button.

  2. Step 2: Read the preview first

    If it looks hard to read at 14px, it is, whatever the ratio says.

  3. Step 3: Check the non-text row

    Borders, icons and focus rings need 3:1 and are the usual audit failure.

04

Example usage

Choosing body copy
Test your intended grey against the page background before it goes into the stylesheet, rather than discovering the problem in an audit.
Auditing a brand palette
Run each brand colour against white and black to find which are safe for text and which should stay as large fills.
Checking a focus ring
Focus indicators need 3:1 against both the component and the page. Test both pairings here.
05

Where the ratio stops being the right question

The WCAG contrast ratio is a good rule and a crude model. It reduces two colours to a single number derived from relative luminance, which means it takes no account of font weight, of the size beyond one coarse threshold, or of the fact that light text on a dark background behaves differently from the reverse. Two pairs can score identically and read nothing alike.

The clearest example is thin type. A hairline weight at 4.5:1 is genuinely harder to read than a semibold at the same ratio, because contrast is carried by the amount of ink as well as its darkness. The formula cannot see stroke width, so it passes both. This is why the live preview sits next to the number on this page: the ratio is the compliance answer, and your eye is the design answer.

APCA, developed for a future version of WCAG, addresses exactly these gaps by modelling polarity and font weight. It is not the current standard and conformance is still measured the old way, so treat it as a sharper design instrument rather than a replacement. Meet 4.5:1 because that is what you will be audited against, then look at the preview and go darker if the text still looks thin.

06

Frequently asked questions

What contrast ratio do I need?

4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold) to meet AA. AAA asks for 7:1 and 4.5:1. Non-text elements such as borders, icons and focus indicators need 3:1 under WCAG 1.4.11.

Does passing mean my design is accessible?

No. Contrast is one criterion of many, and a pass is a floor rather than a target. Two colours can both pass against the background and still be indistinguishable from each other — check that separately with the colour vision simulator.

Why does my brand colour fail?

Most brand palettes were chosen on a screen in a bright room without contrast in mind. The usual fix is a darker variant reserved for text, keeping the original for large areas of fill where the 3:1 threshold applies.

What counts as large text?

18pt, or 14pt bold — roughly 24px and 18.66px bold in CSS. At that size the threshold drops from 4.5:1 to 3:1, because size compensates for contrast. Headings usually qualify; body copy essentially never does, whatever its line length or importance.

Do disabled buttons and placeholder text need to pass?

Disabled controls are explicitly exempt from the contrast requirement, though users still need to perceive them, so exempt is not the same as invisible. Placeholder text is not exempt — it is real text and has to meet 4.5:1, which catches a great many designs, because low-contrast placeholders are close to a default habit.

Is APCA replacing the contrast ratio?

It is the intended direction for a future version of WCAG, and it models things the current formula cannot — polarity and font weight in particular. It is not the standard today, and conformance is still assessed on the 4.5:1 ratio, so build to that and use APCA thinking to inform judgement rather than to justify a failing pair.

07

Related tools

Browse every tool in Colour Tools.