Huelib/Tools/Contrast Checker

Accessibility

Color Contrast Checker

Test any two colors against WCAG accessibility standards. See the ratio, check compliance levels, and preview the pairing in context. For palette-wide testing, use the Accessibility Audit.

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.

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 with the Palette Visualizer.

Beyond pairwise contrast

This tool checks one pair at a time. For a full palette, the Palette Accessibility Audit evaluates every possible color combination and identifies the strongest readable pairings. The Color Blindness Simulator adds another dimension — checking whether colors remain distinguishable under different forms of color vision deficiency.

Working with Huelib palettes

Every palette on Huelib includes hex values you can test directly. When working with a palette, try pairing the darkest and lightest tones — then work inward to find the combinations that hit your target ratio while preserving the palette's character. Palettes from the high contrast collection are a good starting point.