Skip to tool

Check whether your text is readable.

Test foreground and background colors against WCAG AA and AAA text contrast thresholds. See the exact pair, preview the result, and compare alternatives.

Check a color pair

Readable by design.

This sentence previews ordinary body text in your chosen colors.

Contrast ratio: 3.68:1
WCAG text contrast thresholds
Text sizeAAAAA
Normal textFailFail
Large textPassFail

What contrast ratio do I need?

Normal text needs at least 4.5:1 for WCAG AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Large means at least 24 CSS pixels at normal weight, or approximately 18.67 CSS pixels in bold.

Why can 4.5:1 still fail?

White on #777777 is approximately 4.478:1. It fails normal-text AA even when a display rounds that number to 4.5. HueWiz makes pass/fail decisions before rounding the displayed number. Black on white is 21:1; identical colors are 1:1.

What this checker does not certify

This checks two opaque sRGB colors using WCAG relative luminance. It does not test an entire website, images behind text, focus behavior, text alternatives, or every accessibility requirement. Composite transparent colors against their actual background first. Use text or icons as well as color to identify states.

Read the HueWiz contrast guide and W3C contrast guidance.

FROM A PHOTOImage palette generator →Extract colors locally, then turn them into an editable website palette. FOR READABLE TEXTContrast checker →Check a foreground and background against AA and AAA text thresholds. FROM COLOR TO CODETailwind color generator →Build a shade ramp and export Tailwind v4 theme variables.