Contrast Ratio Calculator
Please provide two Hex, RGB, HSL or named color values to see the contrast ratio result.
Results
Contrast Ratio
Small Text
Large Text
Graphics
How does it work?
Enter a foreground and background color in one of the following formats:
- HEX format: #AAAB1C
- RGB format: rgb(100, 1, 233)
- HSL format: hsl(240, 100%, 50%)
The Contrast Ratio Calculator will calculate the contrast, ranging from 1 (no contrast) to 21 (black on white).
How much contrast do I need?
This tool follows the Web Content Accessibility Guidelines (WCAG),
which are a series of recommendations for making the web more
accessible.
Regarding colors, the standard defines two levels of contrast ratio:
AA (minimum contrast) and AAA (enhanced contrast).
AA level
- 4.5:1: for normal text.
- 3:1: for large text.
WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
AAA level
- 7:1: for normal text.
- 4.5:1: for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.