🦊utilfox.dev

Contrast Checker

WCAG contrast ratio checker. Check if your text and background colors meet accessibility standards (AA and AAA) for normal and large text.

Contrast Ratio
14.63:1
Pass
AA Normal Text
(4.5:1)
Pass
AA Large Text
(3:1)
Pass
AAA Normal Text
(7:1)
Pass
AAA Large Text
(4.5:1)

Heading Text (24px Bold)

This is normal body text (16px). Check if this is readable against the background.

This is small text (14px). Smaller text requires higher contrast for readability.

This is large text (18px Bold) which has a lower contrast requirement.

This is a sample link

How to Use Contrast Checker

  1. Enter or pick a foreground (text) color.
  2. Enter or pick a background color.
  3. See the contrast ratio calculated instantly.
  4. Check pass/fail status for WCAG AA and AAA standards.
  5. View results for both normal text (4.5:1 AA, 7:1 AAA) and large text (3:1 AA, 4.5:1 AAA).

Frequently Asked Questions

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define standards for making web content accessible. Contrast ratios ensure text is readable for people with visual impairments.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

Large text is 18pt (24px) and above, or 14pt (18.66px) bold and above.