Check colour contrast for accessibility
Readable text needs enough contrast between the text colour and its background. This checker works out the WCAG contrast ratio between the two colours you enter and tells you, at a glance, whether it meets the AA and AAA levels for normal and large text. The preview shows the real thing so you can judge it with your own eyes too. It all runs on your device, so nothing is sent anywhere.
How to check contrast
- Set your colours. Type a HEX, RGB or HSL value for the text and background, or click a swatch to pick one.
- Read the ratio. The contrast ratio and the AA/AAA results update instantly.
- Adjust until it passes. Use the swap button to flip text and background, and tweak a colour until it meets the level you need.
What the WCAG levels mean
The Web Content Accessibility Guidelines set minimum contrast ratios so text stays readable for people with low vision. Large text means about 24px, or 19px if bold. The thresholds are:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Frequently asked questions
What is a contrast ratio?
It's a number from 1:1 (no contrast, same colour) to 21:1 (black on white) that describes how different two colours are in brightness. The higher the ratio, the easier the text is to read.
What counts as large text?
WCAG treats text as large at roughly 24px (18pt) and up, or 19px (14pt) and up when bold. Large text has lower contrast requirements because bigger letters are easier to read.
Should I aim for AA or AAA?
AA is the level most websites and laws target, and is a solid baseline. AAA is stricter and worth aiming for where readability really matters. Meeting AA for normal text (4.5:1) covers most cases.
Is my data sent anywhere?
No. The contrast is calculated entirely in your browser with plain JavaScript. Nothing you enter is uploaded or stored on a server.
Is it really free?
Yes — it's free with no signup, no watermark, and no limits.