A lot of contrast checks stop at one number. If body text reaches 4.5:1 against its background, the screen passes and everyone moves on.
While writing this, I read WCAG 2.0, 2.1 and 2.2 side by side. Three things stood out. For contrast, the 2008 rules measured text and nothing else. Version 2.1 added a 3:1 rule for the parts of a screen you click. And 2.2 asks whether the focus stays in view and whether targets are big enough to hit.
If your contrast check stops at text, it is a 2008 check. Add 3:1 for borders, icons and chart marks, keep focus out from under sticky bars, and make targets at least 24 by 24 px.
What WCAG 2.0 checked, and what it missed
WCAG 2.0 became a W3C standard in December 2008. For colour it had two rules. 1.4.1 Use of Color (Level A) says colour can’t be the only way you show something. 1.4.3 Contrast (Minimum) (Level AA) asks for 4.5:1 for body text and 3:1 for large text, which means 24 px, or about 18.7 px in bold.
Look at what neither rule measures: the edge of a text field, the box of a checkbox, an icon-only button, a focus ring, a line on a chart.
Say a sign-up form draws its fields with a light grey border, #E5E7EB, on a white page. That border measures 1.24:1. Under 2.0 the form still passes, as long as the labels and the typed text are dark enough. In a bright room, or for someone with low vision, the fields are not there.
How is 2.2 better than 2.0?
The change came in two steps. WCAG 2.1, in June 2018, added 1.4.11 Non-text Contrast at Level AA. WCAG 2.2, published on 5 October 2023, added nine success criteria and removed one, 4.1.1 Parsing, which modern browsers had made unnecessary (W3C’s summary). Apart from 4.1.1, each version keeps the rules of the one before, so a 2.2 check is a 2.0 check plus the new ones.
These are the new rules a visual designer touches most:
Rule | Added in | Level | What it asks |
|---|---|---|---|
1.4.11 Non-text Contrast | 2.1 | AA | Edges, icons and graphics people need to see reach 3:1 against what sits next to them |
2.4.11 Focus Not Obscured (Minimum) | 2.2 | AA | Your own sticky headers, footers and panels never hide the focused element completely |
2.4.13 Focus Appearance | 2.2 | AAA | The focus indicator is at least as big as a 2 px outline and changes its pixels by 3:1 |
2.5.8 Target Size (Minimum) | 2.2 | AA | Click and tap targets are at least 24 by 24 px, or spaced so they don’t crowd each other |
The 2008 rules made sure people could read a screen; the new ones make sure they can use it, from a keyboard or on a phone in bright sun.
How the new rules work
Edges, icons and chart marks: 3:1
1.4.11 asks for 3:1 between the part of a control you need to see and whatever sits next to it. Back to the sign-up form: a mid grey such as #8B9098 measures 3.21:1 on white and passes.
A border is only required when nothing else shows where the field is; a filled background can do that job instead, as long as the fill itself reaches 3:1 against the page. And disabled controls are exempt, so a greyed-out button can stay grey. It still helps to say why it’s disabled.
Focus you can always find
2.0 already asked for a visible focus (2.4.7 Focus Visible). 2.2 asks that it isn’t hidden, and gives it a size.
2.4.11 is about layout, not colour. If a sticky header completely covers the field your keyboard just moved to, the page fails. The technique W3C suggests is a line of CSS, scroll-padding. It keeps space free at the top of the window, so a focused field scrolls into view below the header.
2.4.13 sets a size and a contrast for the focus indicator itself. It’s Level AAA, so few teams are required to meet it, but it gives the ring a number you can design to. A solid 2 px outline drawn 2 px outside the control meets the size rule. Then check that the ring changes those pixels by at least 3:1 from the unfocused state. If your product has a dark mode, check every kind of button in both.
Targets of at least 24 px
2.5.8 gives click and tap targets a floor of 24 by 24 CSS px. A smaller icon button can still pass if it has room around it. Draw a 24 px circle on its centre; that circle must not touch another target or another small target’s circle. Links inside a sentence are exempt.
Colour alone still isn’t enough
1.4.1 is the oldest colour rule, and the easiest to break: a row turned red, or a chart where only colour tells the lines apart. Contrast can’t rescue a chart, for a mathematical reason. WCAG compares lightness, as a ratio from 1:1 to 21:1. Three colours 3:1 apart need lightness steps of 1, 3 and 9; a fourth would need 27, past the maximum. With the background as one of them, contrast alone can tell two series apart at most.
The second key has to be something other than colour: a word on every status, a pattern or a direct label on a chart line, an underline on the selected tab.
What it changed for me
In the design system I built for KFintech, I set up colour this way. Instead of spot-checking screens with a plugin, I had the contrast of each colour pair computed, for text, icons and borders alike, in light and in dark mode. The numbers caught problems my eye had missed. It costs time: a palette change meant recomputing the figures across 104 documentation frames and 7 foundation sheets. (How I named those colour tokens is a story of its own, in How I learned to name design tokens.)
A five-minute check for your next screen
Text: 4.5:1, or 3:1 for text from 24 px (about 18.7 px bold).
Edges, icons, chart marks and state changes people need to see: 3:1 against their neighbours.
Press Tab through the page. The focus ring shows every time and never disappears under a sticky bar.
Aim for a 2 px ring, 2 px outside the control, with a 3:1 change. Check it in dark mode too.
Targets at least 24 by 24 px, or spaced so their 24 px circles don’t touch.
Anything shown by colour also gets a word or a pattern.
Bright fills such as green or amber rarely pass with white text. Green #22C55E with white text measures 2.28:1; with near-black text (#111827) it measures 7.79:1. Change the text colour, not the fill.
Related case study: I’ve also used this in the KFintech design system case study.