1. Resources
  2. Tools
  3. Contrast lab

Tool ยท Color

Contrast lab

Two colors in, the WCAG 2 contrast ratio out, with a verdict for each success criterion that uses it.

Open the lab on its own page, full width, which suits a phone.

How to use it

  1. Pick the text color and the background with the color inputs, or type either one as hex (#1f2a1f, #1f2a1f80) or oklch() (oklch(27% 0.03 145), with an optional / 50% alpha). The examples menu loads pairs from the Terra Outfitters stores.
  2. Read the ratio and the five verdicts: WCAG 2.2's 1.4.3 at AA for normal text (4.5:1) and large text (3:1), 1.4.6 at AAA (7:1 and 4.5:1), and 1.4.11 for the parts of controls and graphics (3:1). The verdicts use the exact ratio, never a rounded one, because 4.499:1 does not meet 4.5:1; where two decimals would hide that, the lab shows three.
  3. Check the samples: normal text, large text at 18.66px bold and at 24px, and a control's border and icon, all in the pair you chose.
  4. For a translucent color, read the note under the ratio. A translucent text color is laid over the background before it is measured, and a translucent background over white, because a translucent color has no ratio of its own.

Test pairs, not colors: a ratio belongs to a text color on a particular background. When a project's palette is settled, put the same check in a test so that every change to a token is measured, as this site does for its own theme. The math is about forty lines, in contrast.js.

Learn more