WCAG Color Contrast Checker

Enter your color combinations to check whether they pass conformance. To check colors straight from your browser, download our free chrome extension.

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.

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

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

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

 

Your All-In-One Web Accessibility Toolkit

A screenshot of the color contrast checker in the chrome extension.

Check Web Pages

Accessible Web Helper provides web accessibility tools in your browser, including scanning website pages for WCAG failures, highlighting elements, and checking the contrast ratio of elements on the page.

Available in the Chrome Web Store
Accessible Web RAMP screenshot

Scan & Fix Full Websites

Sign up for a free trial of Accessible Web RAMP to access our full suite of tools and support, empowering your team to make rapid progress on improving your website accessibility.

Get Started with RAMP

More Free Resources and Tools

Magnifying glass icon

Website Accessibility Checker

Scan websites to discover accessibility issues.

Visit Website Accessibility Checker

Quotation mark icon

Accessibility Statement Generator

Show the world that you’re dedicated to making your website accessible.

Visit Accessibility Statement Generator

Book icon

WCAG Knowledge Base

Ask our experts any accessibility question and browse through answered topics.

Visit WCAG Knowledge Base