Colour 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 on every proposed change. A failure blocks the change unless an admin overrides it. The WCAG A and AA page records what still falls short.