Color Contrast Checker User Guide

What is WCAG Compliance?

When it comes to accessibility it is important to consider the Web Content Accessibility Guidelines (WCAG) 2.0 issued by W3C. The WCAG provides a set of standards to determine if two colors have an appropriate contrast ratio in order to be readable on a web. This is achieved by measuring luminance, also known as brightness, between the color of your text and the background color. The WCAG has several levels of conformance: (A - Lowest, AA - Mid Range, AAA - Highest). If you meet the requirements of a higher range of conformance then you automatically meet the lower levels. For Example, if you meet AAA then by default you also meet AA and A. The contrast ratios that need to be met also consider the size of the font. Below are the contrast ratios needed to be compliant.

• Level AA (large text/18-point font): 3:1
• Level AA: 4.5:1
• Level AAA (large text/18-point font): 4.5:1
• Level AAA: 7:1

How to use the Contrast Checker

To use the contrast checker tool all you need to do is enter a color in the input boxes labeled "Foreground Color" and "Background Color". As you change color selections you will see updates in real-time of the following sections:

• Contrast - A contrast ratio value from 1 to 21 to demonstrate how different colors are from each other
• Color Contrast Preview - A preview of the colors you have selected as the foreground and background colors
• WCAG Compliance Results - A visual to show whether your color choices have passed or failed certain levels of compliance
• Contrast Summary - A summary along with a star rating from 0 - 4 on how well your colors adhere to WCAG compliance