WCAG Color Contrast Checker

Check color contrast against WCAG 2.1 AA and AAA standards. Verify accessibility for text and UI.

Foreground (text)

Background

Large heading — 24px

Large text — 18pt bold

Normal body text at 16px. The quick brown fox jumps over the lazy dog.

Small text — 14px.

Contrast ratio

17.74:1

Normal text

WCAG AA (4.5:1)PASS

WCAG AAA (7:1)PASS

Large text (18pt+ or 14pt+ bold)

WCAG AA (3:1)PASS

WCAG AAA (4.5:1)PASS

UI components & graphics

WCAG AA (3:1)PASS

Frequently Asked Questions

What contrast ratio do I need?

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ regular, 14pt+ bold). AAA requires 7:1 normal and 4.5:1 large. UI components need 3:1.

How is the ratio calculated?

Using the WCAG 2.1 relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker color's relative luminance.

Related Tools

Color Converter

Convert colors between HEX, RGB, and HSL formats instantly.

CSS Gradient Generator

Create beautiful linear and radial CSS gradients with a live preview and copy-ready code.

Color Picker from Image

Click anywhere in an uploaded image to get the exact pixel color as HEX, RGB, and HSL.