Color Contrast Checker – WCAG 2.1 AA/AAA

Colors

Foreground (Text)

Accepts: #fff, #aabbcc, rgb(r,g,b), rgba(r,g,b,a), hsl(h,s%,l%)

Background

Accepts: #fff, #aabbcc, rgb(r,g,b), rgba(r,g,b,a), hsl(h,s%,l%)

—

Contrast Ratio

AA Normal

—

≥ 4.5:1

AA Large

—

≥ 3:1

AAA Normal

—

≥ 7:1

AAA Large

—

≥ 4.5:1

Heading text (large)

Body copy — accessible text ensures everyone can read your content regardless of visual ability. Good contrast ratios matter for WCAG compliance.

Small text (12px) is harder to read — aim for WCAG AA or higher.

Bold large text (18pt)

Button

Level	Text Size	Min Ratio	Notes
AA	Normal text	4.5:1	Body text, UI labels, links
AA	Large text	3:1	≥ 18pt (24px) regular or ≥ 14pt (18.67px) bold
AAA	Normal text	7:1	Enhanced — recommended for critical UI
AAA	Large text	4.5:1	Enhanced large text
AA	Non-text (UI components)	3:1	Icons, focus rings, form borders