Colour contrast checker
Checks whether text and background colours have enough contrast – according to the Web Content Accessibility Guidelines (WCAG).
What you enter is processed in this browser only and is not transmitted.
Loading tool …
How it works
- Enter or pick the text and background colours.
- Click “Check contrast”.
- Look at the result and preview; changes are reflected immediately afterwards.
Notes and limitations
- AA requires at least 4.5:1 for normal text and 3:1 for large text (from 24 px, or 18.66 px bold). AAA requires 7:1 and 4.5:1 respectively.
- Controls and graphics need at least 3:1 against their surroundings.
- The ratio is rounded down so that 4.49 is not wrongly shown as 4.5.
- Transparent colours are evaluated without transparency.