Can people read it?
Pick a text colour and a background. You get the contrast ratio, a pass or fail for each accessibility level, and fixes that keep your colours close to the ones you chose.
Preview
Big headline text
This is body text at 16 pixels. If it feels hard to read here, it will be harder on a phone in sunlight.
Small print at 13 pixels, like captions and footnotes. Button–
Fixes
Ad
Questions
5- What contrast ratio do I need?
- For normal text, 4.5:1 passes WCAG AA and 7:1 passes AAA. Large text (24px, or 18.5px bold) needs 3:1 for AA and 4.5:1 for AAA. Icons, input borders and other interface parts need 3:1.
- What does the ratio mean?
- It compares how bright the two colours are, from 1:1 (the same colour) to 21:1 (black on white). The higher it is, the easier the text is to read.
- How do the fixes work?
- They keep the same hue and only make the colour lighter or darker, by the smallest step that passes. So your brand colour stays recognisable.
- Is AA enough?
- AA is the level most laws and guidelines ask for. AAA is stricter and worth aiming for on long reading text.
- Checking a whole palette?
- The palette generator shows the contrast on every colour, and the Tailwind shade generator shows it on every shade.