Color Contrast Checker

Calculate the contrast ratio of text and background colors for accessibility

Example Headline (24px)

The font-size of this text is 18.5px. Click anywhere to edit this text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Included below are example icons using the selected colors.

Frequently Asked Questions

What is a good contrast ratio for accessibility?

AA: For text and images of text WCAG recommends at least a contrast ratio of 4.5:1. While they recommend a 3:1 contrast ratio for large text. The 4.5:1 ratio helps users with 20/40 vision was chosen which is common for users age 80.

AAA: For the highest level of usability WCAG recommends a 7:1 contrast ratio for text that is designed for users with 20/80 vision. While large text can have at least a 4.5:1 contrast ratio.

What is a WCAG contrast checker?

A WCAG color contrast checker compares a foreground color and background color to give you a contrast ratio. This is extremely useful in addressing WCAG accessibility requirements for your designs and website. For example grey text on a light grey background can be hard to read for some users.