Color contrast checker (WCAG)
Measure the contrast ratio between a text color and a background color and check whether it meets the WCAG accessibility levels (AA and AAA) for normal and large text. Type the colors in hex or rgb, or pick them with the color picker, and you will see the result and a live preview instantly. Everything happens in your browser.
How to check color contrast
- Enter the text color (foreground) in hex or rgb, or pick it with the color picker.
- Do the same with the background color.
- Read the contrast ratio and whether it meets WCAG AA/AAA for normal and large text.
- Use “Swap” to flip the text and the background.
- Adjust the colors until the combination you need turns green.
Frequently asked questions
What is the contrast ratio?
It is a measure of the difference in luminance between two colors, from 1:1 (identical) to 21:1 (black on white). The higher it is, the more readable the text. It is calculated using the WCAG relative luminance formula.
What contrast does WCAG require?
For normal text: 4.5:1 (AA) and 7:1 (AAA). For large text (from about 18 pt, or 14 pt bold): 3:1 (AA) and 4.5:1 (AAA). Interface components and graphics need at least 3:1.
What is the difference between AA and AAA?
AA is the level recommended and required by most accessibility regulations; AAA is stricter and is not always achievable for all content. Aim for at least AA.
What counts as large text?
Roughly 18 pt (24 px) or more, or 14 pt (about 18.66 px) or more if it is bold. Large text is allowed a slightly lower contrast ratio.
What color formats does it accept?
Hex with 3 or 6 digits (#abc or #aabbcc) and rgb(r, g, b). The color picker fills in the value for you automatically.
Are my colors sent to any server?
No. All the calculation happens in your browser with JavaScript; nothing leaves your device and it works offline.