ToolNova

🖌️ Color Contrast Checker — WCAG Ratio

Enter a foreground and background hex color. The checker computes the WCAG relative-luminance ratio and marks AA and AAA thresholds.

Design Free · no sign-up Added 2026-10-06
Input
Result
Thresholds

Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.

How it works

  1. Enter two colors as #RGB or #RRGGBB.
  2. Press Check contrast. Relative luminance follows the WCAG 2 formula.
  3. Compare the ratio with 4.5:1 and 3:1 for AA, and 7:1 and 4.5:1 for AAA.

Examples

  • #1A1A1A on #FFFFFF is a high-contrast pair that passes AAA for normal text.
  • #777777 on #FFFFFF is a common mid-gray that often fails AA for normal text.
  • Short #RGB values such as #FFF are expanded before the ratio is calculated.

Frequently asked questions

What ratio is required for WCAG AA?

Normal text needs at least 4.5:1. Large text and non-text UI components need at least 3:1. AAA raises normal text to 7:1 and large text to 4.5:1.

Does this check alpha transparency?

No. Only opaque hex colors are compared. Flatten transparent colors onto the real background before checking.

Is this an official audit?

It applies the published WCAG contrast formula for a quick check. It is not a substitute for a full accessibility review of a page.

More Design tools →