This browser is too old for this site. Some pages may not work. Update your phone, or try a different device.

Accessibility

Colour contrast lab

The contrast lab

There are two ways to measure colour contrast today. WCAG 2.2 uses a brightness ratio from the 2000s. It is simple to test, but it over-rates dark text on strong mid-tone colours, such as black text on an orange button. APCA (the Accessible Perceptual Contrast Algorithm, a candidate for WCAG 3) models how people actually see text, taking in its size, its weight and whether it is light on dark or dark on light.

Below, the colour pairs this site uses most are measured live in your browser against both. Switch your device to dark mode and the numbers update. This is a sample, not every pair. A test checks almost every colour pair in our design system, and it has to pass before any change can go in. The WCAG A and AA page records what still falls short.

Live contrast measurements for Assembly's components under WCAG 2.2 and APCA
Component Sample WCAG 2.2ratio · AA verdict APCALc · verdict
The live measurements need JavaScript, because they measure the colours your browser shows. Without it, the short version: an automated checker tests 34 of this site's 43 pages in light, in dark and at 320 pixels wide, and finds no contrast failure. It runs by itself whenever a change touches this site, but it cannot stop a change going live. It skips one thing by name: this table. The table holds each sample to the level for the size and weight we actually use, while the checker holds everything to the body-text level.

Measured from the styles in your browser now. WCAG 2.2 AA needs 4.5:1 for normal text and 3:1 for large text (24px or more, or bold 18.7px or more). APCA verdicts use the draft bronze levels: Lc 75 for body text, Lc 60 for large or bold text, and Lc 45 for very large headings. This table measures text only. Focus rings and field borders are held to WCAG 2.2's separate 3:1 rule by a test over our colour tokens.