Color Contrast Checker - Ensure Accessible Color Use for WCAG & ADA Compliance

Contrast Checker

WCAG 2.1 guidelines state that colors should have a text-to-background contrast ratio of 4.5:1 for normal text and 3:1 for large text (and non-text elements such as form fields and other interactive elements) to meet basic AA requirements or 7:1 for normal text and 4.5:1 for large text (and non-text elements) to meet the stricter AAA requirements (always aim for strict).

Ensuring a high contrast ratio for your site’s design can make it easier for visually impaired and color-blind users to read and interact with the contents of your website.

Foreground Color

21.00

Resulting Contrast Ratio

Background Color

Normal Text
How accessible are the colors on your website? WCAG 2.1 guidelines state that colors should have a text-to-background contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet basic AA requirements or 7:1 for normal text and 4.5:1 for large text to meet the stricter AAA requirements (always strive to aim for strict!).

Ensuring a high contrast ratio for your site's design can make it easier for visually impaired and color-blind users to read the contents of your website.

And if you aren't interested in changing the design or aesthetics of your website, you can always install the UserWay accessibility widget on your site so users who require it can change your website's contrast ratio for themselves!

Large Text
How accessible are the colors on your website? WCAG 2.1 guidelines state that colors should have a text-to-background contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet basic AA requirements or 7:1 for normal text and 4.5:1 for large text to meet the stricter AAA requirements (always strive to aim for strict!).

Non Text Elements

Input field

Select Option

Option #1

Option #2

Option #3