Color Contrast Checker
Place two colors below to calculate the contrast ratio between them.Quick Tip
You can paste most main CSS colors, e.g. hex, rgb(), and hsl(), in either fields.
Successfully saved pair
for large text, for small text.
WCAG Contrast Ratio Standards
There are two compliance levels to know:
AA ( Pass) and AAA ( Optimal). If neither is met, it's a Fail.
| Type | AA | AAA |
|---|---|---|
| Regular / small text | 4.5:1 | 7:1 |
| Large text (18pt, or 14pt bold) | 3:1 | 4.5:1 |
| Non-text / UI components | 3:1 | — |
Imbue the world with excellence.
In a world lacking imagination and innovation, be the leading force of change. Build something that will last, a brand that stands above all competitors.
Lead with a vision for good, intertwined with empathy, to create a memorable experience that your customers will forever carry with them.
Imbue the world with excellence.
In a world lacking imagination and innovation, be the leading force of change. Build something that will last, a brand that stands above all competitors.
Lead with a vision for good, intertwined with empathy, to create a memorable experience that your customers will forever carry with them.