Tools
Contrast checker
Colour contrast checker (WCAG)
Measure text-to-background contrast and check it against WCAG AA and AAA.
Large text (24px+)
Normal text at 16px. A sample paragraph to see how the chosen colour reads on the background.
Small text at 14px for fine print and captions.
- AA normal: 4.5:1 minimum for text smaller than 18pt (or 14pt bold)
- AA large: 3:1 minimum for text 18pt+ (or 14pt+ bold)
- AAA normal: 7:1 minimum for enhanced accessibility
- AAA large: 4.5:1 minimum for large text with enhanced accessibility
About this tool
Check whether text is easy to read on its background according to the WCAG 2.1 accessibility guidelines. It works out the contrast ratio between the two colours and tells you whether it passes AA and AAA for normal and large text. Use it to review buttons, links, text on brand colours or notices before a website or campaign goes live.
Type the hex codes into “Background” and “Foreground”, or click each swatch to pick them. You will see the ratio, a preview in three text sizes and the compliance table. “Swap” exchanges the two colours. “Fix to AA” and “Fix to AAA” adjust the lightness of the foreground colour, keeping its hue, until it reaches 4.5:1 or 7:1.
Everything is calculated in your browser; nothing is sent. It only accepts opaque six-digit hex colours and ignores transparency, gradients and background images. The ratio follows the WCAG 2.1 relative luminance formula, not the APCA method proposed for WCAG 3. Treat it as a helper; a full audit looks at much more than colour.
Frequently asked questions
What contrast does WCAG require?
Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 and 4.5:1 respectively.
What counts as large text?
For WCAG, text of 18pt (about 24px) or more, or 14pt (about 18.5px) or more in bold.
How can I improve contrast without changing my brand colour?
Darken or lighten only the text’s lightness, which is what “Fix to AA” does. Alternatively, keep the brand colour for backgrounds or large elements and use a deeper shade for text.
Why does white text on orange usually fail?
Bright oranges and yellows have a high luminance, close to white, so the ratio falls below 4.5:1. Dark text on the same orange usually scores far better.