Assumptions
- Contrast is computed for the sRGB colour space. Colours specified in a wider gamut such as Display P3 may differ.
- The input color is composited over the selected opaque background before measuring contrast.
- WCAG exempts logos, decorative text and disabled components. This tool does not judge those exemptions.
- The nearest name is chosen by arithmetic distance in RGB, which does not match perceived colour difference.
- Everything is computed in your browser and nothing is transmitted.
How it is calculated
- Relative luminance normalises each channel to 0–1, undoes gamma, and weights them 0.2126 / 0.7152 / 0.0722.
- Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05), from 1:1 up to 21:1.
- Thresholds are 4.5:1 and 7:1 for body text (AA and AAA), 3:1 and 4.5:1 for large text, and 3:1 for borders and icons.
- The lightness scale converts to HSL and moves only the L value, keeping hue and saturation fixed.
Examples
| Text | Background | Ratio | Verdict |
|---|---|---|---|
| #000000 | #ffffff | 21.00 : 1 | Passes everything — the maximum |
| #767676 | #ffffff | 4.54 : 1 | Body AA passes, AAA fails |
| #777777 | #ffffff | 4.48 : 1 | Body AA fails — one step of grey decides it |
| #1e90ff | #ffffff | 3.24 : 1 | Only large text and non-text elements pass |
Common mistakes
- Passing is not the same as readable. 4.5:1 is a floor; thin typefaces and small screens need more.
- Never rely on colour alone. Meeting the contrast threshold does not help if the only cue distinguishing two states is hue. Add a shape or a label.
- Check dark mode separately. A pairing that passes on a light background can fail on a dark one.
- The input color is composited over the selected opaque background before measuring contrast.
FAQ
Why measure contrast at all?
Text with too little brightness difference from its background is hard to read, especially for people with low vision or colour vision deficiency, and for anyone using a screen in bright daylight. WCAG 2.2 asks for at least 4.5:1 for body text and 3:1 for large text, with the stricter AAA level asking for 7:1 and 4.5:1. Public sector sites in many countries are legally required to meet the AA level.
How is the ratio calculated?
The relative luminance of each colour is computed, then divided as (lighter + 0.05) ÷ (darker + 0.05). Relative luminance normalises each channel to 0–1, undoes the gamma encoding, and adds them with weights of 0.2126, 0.7152 and 0.0722. Green carries the largest weight because the eye perceives it as the brightest. Black against white gives the maximum of 21:1; a colour against itself gives the minimum of 1:1.
What counts as large text?
WCAG defines it as 18pt or larger, or 14pt or larger when bold. In CSS pixels that is roughly 24px, or 18.66px bold. Larger glyphs have thicker strokes and stay legible at lower contrast, which is why the threshold drops from 4.5:1 to 3:1.
What is the difference between HEX, RGB and HSL?
They are three ways of writing the same colour, so conversion between them is exact. HEX is compact and convenient in code. RGB shows the primary light values directly. HSL splits the colour into hue, saturation and lightness, which makes adjustments like "the same colour but darker" straightforward. The lightness scale on this page is produced by changing only the L in HSL.
Does it handle transparency?
The input color is composited over the selected opaque background before measuring contrast.
How is the nearest name chosen?
By measuring the distance in RGB values to each of the 148 named CSS colours and picking the closest, flagging an exact match when there is one. That distance is arithmetic rather than perceptual, so treat the name as a rough family label rather than an identification.