Color Contrast Checker

What the contrast checker does

Color contrast is the single most common accessibility failure on the web, and it is also the easiest to fix. This tool calculates the contrast ratio between any two colors using the formula defined in the Web Content Accessibility Guidelines (WCAG), then tells you whether the pair passes the AA and AAA levels for normal text, large text and user interface components. You see the result immediately in a live preview, so you know how the pair actually reads, and if it fails the tool proposes a corrected text color that keeps your hue but shifts lightness just far enough to pass.

How to use it

• Set the text color and the background color, either with the pickers or by typing HEX codes.
• Read the ratio. Anything from 4.5:1 up passes AA for normal text, 7:1 passes AAA, and 3:1 is the minimum for large text, icons and form borders.
• Look at the preview. Large text is 24px bold in this preview, which is roughly where WCAG considers text large.
• If a badge shows fail, click the suggested color to copy it, or use the swap button to test the pair reversed for dark mode.

Understanding the ratios

The ratio compares the relative luminance of the two colors, where 1:1 means identical and 21:1 is pure black on pure white. WCAG level AA, the target most laws and procurement rules reference, requires 4.5:1 for body text and 3:1 for large text, which is 18pt regular or 14pt bold, around 24px and 19px on screen. Level AAA raises those to 7:1 and 4.5:1. Non text elements such as icons, input borders and focus rings need 3:1 against their surroundings. Note that pure gray text on white often fails: the popular #999999 only reaches 2.85:1, while #767676 is the lightest neutral gray that passes AA on white.

Why it matters

Roughly one in twelve men has some form of color vision deficiency, many people browse on dim phone screens in bright sunlight, and everyone reads faster when text stands out clearly. Good contrast is not only an accessibility requirement, it improves conversion because calls to action are seen and forms are completed. Accessibility rules also increasingly carry legal weight for public bodies and larger companies. Checking pairs early, while you are still choosing a palette, avoids expensive redesigns later. If you are building a palette from scratch, generate it with the color palette generator and test the text and background steps here. Every website Digzy Technology builds is checked against AA before launch, because a site that people cannot read cannot do its job.