WCAG Color Contrast Checker

How to use our Color Contrast Checker

To use the Accessible Web Color Contrast Checker, please select a foreground color and a background color. You can enter hex color codes or use the color selector tool (aka eye dropper in the color input element). The “WCAG Compliance Information” chart will tell you if the selected colors pass conformance or not.

Select Colors

Contrast Ratio
21.00:1

WCAG Compliance Results

WCAG AA and AAA Results
Element Type AA AAA
Small Text
Large Text
UI Components

Required Contrast Ratios for WCAG Conformance

Level AA – Text

4.5:1 for regular text and 3:1 for large text (18 pt or 14 pt + bold).

WCAG Success Criterion 1.4.3

Level AA – Non-Text

3:1 for UI components & graphics.

WCAG Success Criterion 1.4.1

Level AAA – Text

7:1 for regular text and 4.5:1 for large text (18 pt or 14 pt + bold).

WCAG Success Criterion 1.4.6