Huelib/Tools/Contrast Checker

Tool

Contrast Checker

Test any two colors against WCAG accessibility standards. See the ratio, check compliance levels, and preview the pairing in real context.

Preview

The quick brown fox

Good contrast makes text readable for everyone. This preview shows how your color combination performs at different sizes and weights.

Button labelFilled button

Understanding color contrast

What the ratio means

Contrast ratio measures the difference in perceived brightness between two colors. The scale runs from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — black on white). Higher ratios produce more readable text, particularly at smaller sizes and on screens with variable quality.

AA vs AAA

WCAG defines two conformance levels. AA is the standard most teams target — it requires a 4.5:1 ratio for body text and 3:1 for large text (18px+ or 14px bold). AAA is a stricter benchmark at 7:1 and 4.5:1 respectively, useful for long-form reading, critical interfaces, and content that needs to work in poor viewing conditions.

Large text thresholds

Large text earns a lower required ratio because bigger letterforms are inherently easier to read. "Large" means 18px regular weight or 14px bold (WCAG defines this as 18pt / 14pt bold). If your text sits at these sizes or above, the more lenient thresholds apply — which gives you more room to work with subtler color combinations.

Contrast in practice

Meeting the ratio is the baseline. In real design work, contrast interacts with font weight, letter-spacing, line height, background texture, and screen context. A pairing that passes 4.5:1 in a calculator may still feel hard to read at 12px light weight on a glossy mobile screen. Use the numbers as a starting point, then test in context.

Using contrast with Huelib palettes

Every palette on Huelib includes hex values you can test directly in this tool. When working with a palette, try pairing the darkest and lightest tones as text and background — then work inward to find the combinations that hit your target ratio while preserving the palette's character.

Browse palettes