How it looks
Large text, 24 px
Normal text at 16 pixels, the size almost everything is read at.
Small text, 14 px
What does each level require?
Three WCAG 2.2 criteria depend on colour contrast. Here are their thresholds and what they apply to, which is the part most often confused.
| Criterion | Level | Threshold | Applies to |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 · 3:1 for large text | All interface text |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 · 4.5:1 for large text | When the brief asks for AAA |
| 1.4.11 Non-text Contrast | AA | 3:1 | Controls, icons and any part of a graphic needed to understand it |
Checking it once is not enough
This page tells you whether two colours pass today. The trouble comes later: someone lightens a grey because it looks more elegant, a card turns up with a different background, a redesign lands… and what was fine stops being fine without anyone noticing.
On this site that check does not depend on anyone remembering. Every time we publish a new version, a program repeats this same calculation for every text colour against every background, in light mode and in dark, including the hard cases: text over a translucent panel, where the colour you see is a blend of two. If a single combination drops below 4.5:1, publishing stops and the change never reaches the site.
That is the difference between a review and a guarantee. A review tells you how things looked the day someone checked; a guarantee means the mistake simply cannot be published.
Frequently asked questions
What does “4.5:1” actually mean?
It is the ratio between the relative luminance of the two colours, plus a small offset that avoids dividing by zero. It runs from 1:1 — two identical colours — to 21:1, pure black on pure white. The 4.5 comes from compensating for the contrast sensitivity loss of someone with 20/40 vision, which is what the standard takes as its reference.
What counts as large text?
From 24 pixels (18 points), or from 18.66 pixels (14 points) if bold. Below that it is normal text and the threshold rises to 4.5:1. Watch the detail, though: a hairline typeface at 24 px passes the standard and is still hard to read. The standard is the floor, not the goal.
Why does the result change when I add transparency?
Because what gets compared is what you see. Grey text at 60% over white does not contrast like the grey you wrote, but like the mix that results. The tool composites the front colour over the back one before measuring, which is exactly the step that gets skipped when this is done by eye.
Does it apply to icons and borders?
Yes, through criterion 1.4.11: interface components and the parts of a graphic needed to understand it require 3:1 against whatever sits next to them. The border of a form field, the outline of a ghost button or the stroke of an informative icon all count. Purely decorative things do not.
What about the keyboard focus colour?
That too, and it is among the most commonly failed. The focus indicator needs enough contrast against the background and, since WCAG 2.2, has its own criterion for size and visibility (2.4.11). A blue outline on a blue background satisfies the design and locks out anyone navigating by keyboard.
Does the contrast ratio tell the whole story?
No, and it is worth knowing: the WCAG 2.x formula is a simple model that falls short especially on very dark backgrounds, where two pairs with the same ratio read differently. The WCAG 3 draft proposes another calculation, APCA, which models perception better. In the meantime, what is contractually required is this — so this is what gets measured here.
Are the colours sent anywhere?
No. The calculation is arithmetic and happens in your browser. The only thing that leaves this page is whatever you choose to share: the address carries both colours in its fragment, so you can hand someone the link and they will see exactly the same case.
How do you choose the colour you suggest?
We keep your hue and saturation and move only the lightness, in whichever direction is needed, to the first value that reaches the threshold. The useful answer for someone with a brand is not “use black”, it is “your same blue, a little darker”: it is still your colour.
Contrast is the easy criterion
It is the one a formula can measure. The hard ones are keyboard focus, tab order and whether a form can be filled in without a mouse. That gets audited and fixed.
We reply within one business dayBogotá · UTC−5