Color Contrast Checker

Check WCAG AA/AAA contrast for heading & body text against any background

Large Heading Text

This is how normal body text looks against the background.

Heading Text Color

Body Text Color

Background Color

Pick Colors From an Image

Upload a screenshot or design image, then tap the ✎ next to any color field above (or a target below) and click anywhere on the image to grab that exact color.

📁 Upload Image

Heading Body Background

No image uploaded yet.

Heading Contrast

1.00:1

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

Body Contrast

1.00:1

Normal text

AA Large FAIL

AAA Large FAIL

AA Normal FAIL

AAA Normal FAIL

AA = minimum accessible standard (Normal text needs 4.5:1, Large text needs 3:1). AAA = enhanced standard (Normal text needs 7:1, Large text needs 4.5:1). "Large text" = 18pt+ (24px+) or bold 14pt+ (18.66px+).

Copied CSS to clipboard!