- Contrast ratio is the relationship between the foreground color and the background color in terms of luminance. When the colors are very similar, we have a low contrast ratio. When the colors are very different, we get a high contrast ratio.
What is a sufficient color contrast ratio?
To achieve AA (Minimum) level you'll need:
- Text and images of text have a contrast ratio of at least 4.5:1.
- Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.
To achieve AAA (Enhanced) level:
- Text and images of text have a contrast ratio of at least 7:1.
- Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) bold - has a contrast ratio of at least 4.5:1.
-
You can see the color contrast ratios right in the developer tools. Alternatively, you can also use other tools such as Accessible Color Picker Chrome plugin. This tool will evaluate your color contrast ratios and suggest good alternatives if you are currently failing the accessibility standards.
-
Another useful website is: Color Review