Colour contrast checker.
Check whether text is readable against its background. Enter two colours to get the WCAG contrast ratio and a pass or fail for normal text, large text and buttons. If a pair fails, the checker suggests the closest colour that passes, so you can keep your brand's look.
- Free, no sign-up
- Runs in your browser. Nothing you enter is sent to us.
Large heading text
Normal body text. The quick brown fox jumps over the lazy dog, then books an appointment online.
Small print, captions and footnotes.
ButtonResult
How to use the colour Contrast Checker
- Enter your text colour and background colour, as hex codes or with the pickers.
- Read the ratio and the pass or fail for each type of content.
- If it fails, use the suggested colour: the nearest shade that passes.
- Use the swap button to check light text on a dark background the other way round.
What the WCAG contrast levels mean
- AA, normal text: at least 4.5:1. The standard most websites and accessibility laws point to.
- AA, large text (24 px, or 18.66 px bold, and above): at least 3:1.
- AAA, normal text: at least 7:1. The stricter level, good for long reading.
- AAA, large text: at least 4.5:1.
- Buttons, form borders and icons (non-text): at least 3:1 against what's next to them.
Why contrast matters
Low contrast is one of the most common accessibility failures on the web. It affects far more people than you might think: anyone with ageing eyes, low vision or colour blindness, and everyone reading a phone in bright sunlight. Light grey text on white and white text on brand yellow or orange are the usual culprits.
You don't have to abandon your brand colours. Usually a slightly darker or lighter shade of the same colour passes, and few people notice the change. That's what the suggestion here finds.
Beyond contrast
Contrast is one part of accessible design. Don't rely on colour alone to carry meaning (add text or icons to red and green states), keep body text at least 16 px, and test with real content. Our website accessibility checker tests a whole page for other common issues, and the colour palette generator helps build a palette around your brand colour.
About the colour Contrast Checker.
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA, the level most guidelines and laws use.
How is the contrast ratio calculated?
From the relative luminance of the two colours, using the WCAG formula: (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 to 21:1 (black on white).
What counts as large text?
Text at least 24 px (18 pt) in normal weight, or at least 18.66 px (14 pt) in bold.
Does it work for text on images?
Check against the lightest and darkest part of the image behind the text. If either fails, add a solid or semi-transparent overlay behind the text.
Is this the new APCA method?
No. It uses the WCAG 2 contrast ratio, which is what current standards and laws refer to.
You might also need these.
Colour Palette Generator & Image Colour Picker
Pull a palette from any image, pick exact colours, or build harmonies from one brand colour.
Use the toolWebsite Accessibility Checker
Automated WCAG checks: alt text, labels, headings, link and button names, zoom, language and more.
Use the toolCSS Gradient & Box-Shadow Generator
Design linear and radial gradients and soft box shadows visually, and copy the CSS.
Use the toolWant this done for you?
Free tools show you what to fix. We fix it, measure it, and keep it working while you run the business.