Accessibility•Live Color Studio•100% Client-Side

Contrast Checker

Check color contrast ratio against WCAG 2.1 accessibility guidelines (AA & AAA compliance).

Live Text Preview MockupRatio: 17.85:1

Large Heading Text Sample

This is standard body copy to evaluate readability and contrast. Good contrast ensures readability for users with low vision, aging eyes, or when reading under bright sunlight.

Contrast Ratio
17.85 : 1
Excellent contrast (AAA)
Normal Body Text
Level AA (4.5:1) Pass
Level AAA (7.0:1) Pass
Large Text (≥18pt)
Level AA (3.0:1) Pass
Level AAA (4.5:1) Pass
UI & Icons
Level AA (3.0:1) Pass
Buttons, form inputs & icon graphics

Color Science & Standards

Conversions follow standard sRGB color space and W3C / WCAG 2.1 accessibility guidelines.

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) [Ranges from 1:1 to 21:1]

How to Use Contrast Checker

01

Pick your Text (Foreground) color.

02

Pick your Background color.

03

View the exact Contrast Ratio (e.g. 7.42:1).

04

Check the compliance badges for Normal Text, Large Text, and Graphical UI components.

Frequently Asked Questions

What is the minimum contrast ratio required by WCAG AA?

WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (at least 18pt or 14pt bold) and active UI components.

What does WCAG AAA require?

Level AAA is the highest accessibility benchmark, requiring 7:1 for normal body text and 4.5:1 for large text.

Explore Companion Color Tools

Free client-side color pickers, converters, CSS gradient generators, and WCAG contrast tools.

View all 10 color tools