How to Use This Tool
Contrast is the accessibility requirement that fails most often and costs least to fix. It is also the one designers most frequently get wrong by intuition, because a colour pair can look elegant on a calibrated monitor in a dim studio and be genuinely unreadable on a phone in daylight, or to any of the roughly one in twelve men with a colour vision deficiency.
Entering colours
Type a hex value into either field or use the swatch to open your system colour picker. Both 6-digit and 3-digit shorthand are accepted, with or without the leading hash. Eight-digit hex with an alpha channel is accepted too, but be aware that the ratio is calculated on the resulting composite — transparency is only meaningful once you know what is behind it, so the tool composites the foreground over the background before measuring.
Reading the four results
WCAG defines separate thresholds because larger text is easier to read at lower contrast. The four panels report all of them at once:
- AA normal text, 4.5:1 — the one that matters. This applies to body copy, labels, links and anything below 18.66px bold or 24px regular. Most legal accessibility requirements around the world reference this level.
- AA large text, 3:1 — applies to text at 24px regular or 18.66px bold and above. Do not use this as an excuse to make body copy technically "large"; the exemption exists for headings.
- AAA normal text, 7:1 — a stricter target. Worth hitting for long-form reading, documentation and anything a user will look at for extended periods.
- Non-text, 3:1 — applies to interface components: input borders, icons, focus rings, chart elements. This is the most commonly missed requirement in modern design systems, because fashionable interfaces love a very light grey border.
Fixing a failure quickly
The nearest passing foreground button walks the foreground colour's lightness up or down in small steps, holding its hue and saturation, until it clears 4.5:1. That preserves the character of the colour rather than replacing it with a generic dark grey, which is what usually happens when a failure is fixed by hand under deadline. If your brand colour cannot pass on white, the honest answers are to darken the brand colour for text use specifically, or to put the brand colour on a background rather than in the text.
What contrast ratio does not tell you
The WCAG 2.x formula is a good approximation, not a perfect model of human vision. It systematically overrates light-on-dark combinations and underrates some mid-tone pairs, which is why a newer perceptual algorithm called APCA is under development for WCAG 3. Until that is normative, 4.5:1 remains the number you are measured against. Treat a marginal pass at 4.6:1 as a warning rather than a win, and check your design on an actual phone outdoors.