Color contrast checker tool

Check color contrast for accessible web design

Color contrast determines how easily people can distinguish text from its background. Enter any two HEX colors above to calculate their contrast ratio and see whether the combination meets WCAG 2.1 AA and AAA guidance for normal and large text.

What is a good contrast ratio?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA raises those targets to 7:1 and 4.5:1. Large text means at least 24px, or 18.66px when bold.

How to use the color contrast checker

1. Enter the HEX value of your text color.
2. Enter the HEX value of the background color.
3. Review the live preview, contrast ratio and WCAG results.
4. Adjust either color until the combination passes the level your project needs.

Why accessible color contrast matters

Readable contrast helps people with low vision, color-vision deficiencies and users viewing a screen in difficult lighting. It also creates a clearer visual hierarchy for everyone. Check important combinations such as body copy, buttons, links, form labels and text placed over images.