Colour Contrast Checker
Measure the contrast between two colours and see whether it meets WCAG AA and AAA for body text, large text and interface elements.
- Contrast ratio
- 4.54:1
Preview
Body text at the usual size
Large text
Contrast ratio
- Body textPass AA
- Large text(18pt, or 14pt bold)Pass AAA
- Interface elementsPass AA
Files are processed in your browser and are never uploaded to a server.
How to use
Free to use with no sign-up, no install and no usage limit.
Enter a text colour and a background colour. The ratio and the verdicts update together, and the preview shows the pair at both text sizes.
WCAG sets different bars for different things. Body text needs 4.5:1 for AA and 7:1 for AAA. Large text — 18pt, or 14pt bold — needs 3:1 and 4.5:1. Borders, icons and other interface parts need 3:1.
The ratio is rounded down rather than to the nearest value. A pair at 4.499 displayed as 4.50 would look like it passes when it does not, and that is the one case where the rounding direction changes the answer.
When a pair falls short, a suggestion is offered. It shifts the text colour along its own lightness until the target is met instead of jumping to black or white, so the design keeps its hue.
Colours can be written as hex, including the three-digit short form, or as rgb().
Nothing you type is sent to a server. Everything is calculated inside your browser.