Color contrast checker (WCAG)
Check text and background colours against WCAG AA and AAA, and get the nearest colour that passes.
Large text is at least 24px, or 18.66px bold. A see-through text colour is blended with the background first.
Large text, 24px
Normal text, 16px. The quick brown fox jumps over the lazy dog, and the colours stay easy to read.
ButtonInput field
4.47:1Only for large text and icons
Normal text
- AA4.5:1Fail
- AAA7:1Fail
Large text
- AA3:1Pass
- AAA4.5:1Fail
Icons and input borders
- AA3:1Pass
Nearest colours that pass
Only the lightness changes; the hue stays the same.
- 1Pick a text and a background colour.
- 2See the contrast ratio and what passes.
- 3Use the suggested colour if it fails.
- Where are my colours and images worked on?
- In your browser, on your device. Colours you type and images you open stay with you.
- Does it work offline?
- Yes. Once this page has loaded, it keeps working without an internet connection.
- Which colour formats can I use?
- HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, the 148 CSS colour names, or just three numbers like 30 144 255.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.