Utilzivo

Color Contrast Checker

Check whether your text colors meet WCAG accessibility standards. Enter a foreground (text) and background color to get the exact contrast ratio plus clear PASS/FAIL badges for AA and AAA levels, for both normal and large text.

Contrast ratio: –

Preview:

The quick brown fox jumps over the lazy dog

How to Use the Contrast Checker

  1. Pick a text color with the color picker, or type a hex value such as #1a2b3c.
  2. Pick a background color the same way.
  3. The contrast ratio updates live as you type – black on white scores the maximum 21:1.
  4. Read the four badges: AA is the legal minimum most sites must meet (4.5:1 for normal text, 3:1 for large text); AAA is the stricter enhanced level (7:1 normal, 4.5:1 large).
  5. Check the live preview to see how the combination actually looks.

Practical example

You are designing a call-to-action button with white text on an orange background (#f97316). Enter both colors: the tool reports a ratio around 3:1 and shows FAIL for AA normal text. That tells you the button text is too small or too light – switch to a darker orange or bold large text until the AA badge turns green.

Key features and benefits

  • Exact WCAG math: uses the official relative-luminance formula, not an estimate.
  • Four badges: AA and AAA results for both normal and large text at a glance.
  • Live preview: see your exact color pair rendered as real text.
  • Picker + hex input: choose visually or paste brand colors precisely.
  • Private by design: everything runs in your browser; nothing is sent anywhere.

Limitations

The checker evaluates flat color pairs only – it cannot account for background images, gradients, or text shadows, which all affect real-world readability. “Large text” follows the WCAG definition (at least 18pt, or 14pt bold). Meeting AA is a strong baseline, but user testing with people who have low vision is still the gold standard.

Frequently asked questions

  • What is the difference between AA and AAA? AA is the minimum most accessibility laws and guidelines require; AAA is the stricter enhanced level. Aim for AA everywhere and AAA for critical text.
  • What counts as large text? WCAG defines it as at least 18pt (24px), or 14pt (about 19px) when bold. Large text is allowed a lower 3:1 ratio at AA level.
  • My brand colors fail. What now? Darken the text color or lighten the background in small steps until the ratio passes – often a slight shade shift is enough, and the preview shows it live.