FileConverterPro

Color Contrast

Check color contrast ratios for WCAG accessibility compliance online for free. Test foreground and background colors for AA and AAA standards.

Runs entirely in your browser — files never uploaded

Heading Text Sample

The quick brown fox jumps over the lazy dog. This paragraph demonstrates how body text looks at regular size with your chosen foreground and background colors.

Small caption text for reference.

Contrast Ratio

14.63:1

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

Pass

How to use Color Contrast

  1. 1. Pick colors. Enter a foreground (text) and background color using the hex input or color picker.
  2. 2. Check ratio. The contrast ratio and WCAG AA/AAA compliance results update instantly.
  3. 3. Fix issues. If a check fails, use the suggested closest passing color to meet the standard.

FAQ

What contrast ratio do I need?

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

What counts as large text?

Text that is at least 18pt (24px) or 14pt (18.66px) bold is considered large text under WCAG.

How is the contrast ratio calculated?

Using the WCAG 2.x formula: relative luminance of the lighter color plus 0.05, divided by the relative luminance of the darker color plus 0.05.

Related tools

Advertisement