Skip to the check
Client room Go to the pages
A fan of plain colour swatch chips spread open on dark paper, from deep navy through blue to mint and pale grey, under raking light.

question read and pressed

can it be read, and can it be pressed?

Two WCAG 2.2 success criteria come down to arithmetic, so here is the arithmetic. Put in two colours and a text size, or a control’s size. Everything is worked out in your browser and nothing is sent anywhere.

part one criteria 1.4.3, 1.4.6, 1.4.11

Colour contrast

A hex colour such as #7D87FF, or the short form such as #FFF.

Weight

Or measure this site’s own pairs:

Contrast ratio

16.11 to 1

This is your text, at your size, on your background.

At 18 px regular this counts as normal text.

  • AA needs 4.5 to 1 pass
  • AAA needs 7 to 1 pass
  • Edges and icons 1.4.11 needs 3 to 1 pass

part two criteria 2.5.8 and 2.5.5

Tap target size

This check treats CSS px, dp and pt as equal units, which is the convention we use when applying the web figures to apps. A 48 dp button is judged as 48.

Drawn at real size: the dashed squares are 24 and 44 CSS pixels.

  • 2.5.8 Minimum, AA 24 by 24, or spaced fail
  • 2.5.5 Enhanced, AAA 44 by 44 fail
  • Phone platform advice 44 pt on one, 48 dp on the other below

At 40 by 20 the height is under 24, and 20 plus a 6 px gap is 26, so the target passes 2.5.8 only through its spacing.

working the sums, shown

How the numbers are worked out

Each colour channel is turned from its sRGB value into linear light, the three channels are weighted into one relative luminance, and the ratio compares the lighter colour with the darker one. Text counts as large from 24 CSS pixels in a regular weight, or from about 18.7 pixels in bold.

A ratio describes one flat pair of colours. Text over a photograph sits on a different colour at every pixel, so it has to be measured where the picture is lightest and where it is darkest; that is how the text over the pictures on this site was checked. And one passing pair is one success criterion met for that pair, at that size.

channel  c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
L        0.2126 R + 0.7152 G + 0.0722 B
text     #E7E9F7  L = 0.8198
ground   #0B0C17  L = 0.0040
ratio    (0.8198 + 0.05) / (0.0040 + 0.05) = 16.11

↑ ↓ moveEnter goEsc close