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.

WCAG Color Contrast Checker

Developer Tools· 30 tools

Free WCAG color contrast ratio checker. Enter foreground and background colors to instantly see the contrast ratio and pass/fail grade for WCAG 2.1 AA and AAA at normal and large text sizes.

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

References

WCAG 2.1 — Contrast (Minimum) 1.4.3 — W3C Web Accessibility Initiative
WCAG 2.1 — Contrast (Enhanced) 1.4.6 — W3C Web Accessibility Initiative

Related Tools

Color Converter
Convert colors between HEX, RGB, and HSL formats with a live preview swatch. Essential for web designers and developers — copy any format with one click.
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.

Frequently Asked Questions

References and sources

Related Tools