Color Contrast Checker

Developer Utilities

Measure WCAG contrast ratios and see whether text passes AA and AAA for normal and large text.

How to use

Check a pair of colors

Pick a foreground and background color. The tool shows the contrast ratio and pass or fail badges for each WCAG level.

Choose the text color.
Choose the background color.
Aim for at least 4.5:1 for normal text.

WCAG thresholds

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.

Frequently asked questions

What counts as large text?

WCAG defines large text as at least 18pt (24px) or 14pt (18.66px) when bold.

Is a higher ratio better?

Yes. A ratio of 21:1 is the maximum, achieved by black text on a white background.

Related tools

Color Palette Generator Generate tints, shades, analogous, complementary and triadic palettes from any color. Color Converter Convert colors between HEX, RGB and HSL with a live preview swatch. CSS Gradient Generator Design linear or radial CSS gradients with a live preview and copy-ready CSS. UUID / GUID Generator Generate random version 4 UUIDs and copy them one by one or in bulk. Hash Generator Compute MD5, SHA-1, SHA-256 and SHA-512 digests of any text. Timestamp Converter Convert between Unix timestamps, ISO 8601 and human readable local dates.