How to use it
- 1
Enter text and background colors in HEX.
- 2
Run the contrast calculation.
- 3
Review AA and AAA results for normal and large text.
What the tool can do
- Three- and six-digit HEX values with or without #.
- Relative luminance and contrast-ratio calculation.
- AA checks for normal and large text and an AAA check for normal text.
Common use cases
- Checking button text against its background.
- Selecting an accessible color pair for an interface.
- Quickly checking a design token before implementation.
How it works inside
A 1:1 ratio means equal luminance; the maximum contrast is 21:1.
Passing a numeric threshold does not replace checking states, text size, and the complete user experience.
Questions and answers
What ratio is required for normal text?
Level AA generally requires at least 4.5:1, while AAA requires 7:1.
Can it check transparent colors?
No. Enter the final opaque HEX colors for text and background.