free tools runs in this tab no account, no upload
Contrast checker
What is the contrast ratio between these two colours?
Type two colours and read the ratio against all four WCAG thresholds: body text, large text, AAA and non-text. It runs in this tab and nothing is sent anywhere.
- AA, body text needs 4.5:1 passes
- AA, large text needs 3:1 passes
- AAA, body text needs 7:1 fails
- AA, non-text and focus needs 3:1 passes
how to use it
- Type or paste the text colour. Hex and rgb() are both read.
- Type the colour behind it - the ground the text is actually set on.
- Read the ratio, then all four thresholds beside it rather than only the first.
- Take the failing row to the stylesheet; nothing here is stored or sent.
what this page cannot do
A swatch is not a page. The extension measures the ratio against what is actually painted behind the text - a gradient, an image, a translucent overlay - which is the case a pair of colour fields cannot reach.
Tokens in the panel What design tokens is this page actually painting with?
no host permissions · the reading is free