Color contrast checker

Choose a text color and a background color to find out whether your design is readable and accessible. You get the contrast ratio, whether it meets the WCAG AA and AAA levels and, if it falls short, the closest text color that does.

Text and background

Accepts HEX, rgb(), hsl(), oklch() or CSS names. Semi-transparent text is blended with the background.

Large sample text

This is normal-sized text. Web accessibility means that anyone, including people with low vision or color blindness, can read and use your page.

Button

Contrast ratio

Normal text (4.5:1) AA
Normal text (7:1) AAA
Large text (3:1) AA
Large text (4.5:1) AAA
Icons and UI components (3:1) AA

What is the contrast ratio?

The contrast ratio compares the relative luminance of two colors and ranges from 1:1 (the same color) to 21:1 (black on white). It is defined by the W3C WCAG 2 accessibility guidelines and is the reference used by accessibility laws (such as the ADA, Section 508 or the European standard EN 301 549) and tools like Lighthouse.

AA and AAA levels

AA is the level usually required: 4.5:1 for normal text and 3:1 for large text (24 px and up, or 18.66 px bold). AAA is the enhanced level: 7:1 and 4.5:1 respectively. Icons, form field borders and other user interface components need at least 3:1 against the colors around them.

Logos and purely decorative text or disabled elements are exempt.

How to improve contrast

It is almost always enough to darken the text (or lighten it on dark backgrounds) without changing its hue: that is why we suggest the same color with a different lightness, calculated in the OKLCH color space so the change is as small as possible. Avoid light grey text on white and text over images without a dark overlay.