WCAG Color Contrast Checker

Enter your color combinations to check whether they pass conformance. For a full web accessibility scan, try Accessible Web RAMP.

How it Works

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.

Disclaimer and Additional Info

This contrast checker attempts to calculate contrast ratios as accurately as possible. There may be situations where a color combination meets the calculated ratio; but the element being checked still fails overall. This may be due to other visually related factors (ex. hover/focus states and effects, etc).

Refer to the following links for more details and specifics on contrast success criterion requirements:

Select Colors

Contrast Ratio

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.11

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

Need Additional Help?

Scan and monitor your full site with RAMP, or explore our resources to do it yourself.

Resources & Tools