How to Check Contrast Between Two Colors
By Tools Star Hub Editorial Team · Published
Contrast here is the WCAG 2 ratio of two solid colors. Black on white is 21:1. The page then marks AA and AAA separately for normal text and for large text.
Normal text uses 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 for AA and 4.5:1 for AAA. A passing mark means that pair meets that one threshold.
How to check a pair
- Enter two solid colors. Pick a foreground and a background, or type hex values.
- Read the ratio and the four results. The four results are normal AA, normal AAA, large AA, and large AAA.
- Swap the colors when you need the inverse pair. The ratio is the same either way. You assign which color is the text.
- Leave photographs out of the pair. A photograph behind the text, or a translucent layer, is outside the calculation.
Example
Black on white
#000000 on #ffffff is 21:1 and passes AA for normal text.
Two close greys
#777777 on #999999 fails AA for normal text.
FAQ
- What does 21:1 mean?
- It is the contrast of black on white, the strongest pair of solid sRGB colors on this scale.
- Why can two greys fail?
- #777777 and #999999 are close. Their ratio is below 4.5:1, so normal text AA fails.
- Does a photo background count?
- No. Enter the two solid colors. A picture behind the letters is not part of the ratio.
- Does a pass finish the check?
- It means that color pair meets that contrast threshold. Other requirements can still apply.
To compare two solid colors, use the Color Contrast Checker.