UserWay Logo UserWay Logo Mobile

Download video transcription (PDF 232kb)

In this tutorial, we are going to show you how to check if the color contrast of your site is compliant with web content accessibility guidelines.

Step 1: Access the Contrast Checker

You can check the color contrast with an online tool that you will find on userway.org. So visit the site and click on the hamburger menu. Then click on the “Contrast Checker” button to access the tool.

Step 1: Access the Contrast Checker

Step 2: Information About Requirements

Ensuring a high contrast ratio for your site’s design can make it easier for the visually impaired and color blind to read the content of your site. You must know that to meet the double-A requirements, the color should have a text to background contrast ratio of 4.5 to 1 for normal text, and 3 to 1 for large text. And to meet the strict triple-A requirements, the contrast ratio for normal text is 7 to 1, and 4.5 to 1 for large text. We recommend you to always aim for strict.

Step 2: Information About Requirements

Scroll down and access the tool. You add a foreground color and a background color, and it will calculate a contrast ratio. Scroll down, and you will know if you have passed the double-A and triple-A requirements for normal and large text.

Step 3: Grab a Design Color

You can use a design in Photoshop. Use the eyedropper tool to grab a color. Zoom in to the text and grab the color.

Step 3: Grab a Design Color

Step 4: Copy the Code to the Checker

Copy the code, and go back to our tool. Paste it here in the foreground color.

Step 4: Copy the Code to the Checker

Go back to Photoshop and copy the code of the background color.

Copy the code of the background color

Bring it back to background color check on the UserWay tool and see the result. If the contrast ratio is very low you have failed to meet the requirements for double-a and triple-a for both normal and large sizes.

Color check on UserWay

Step 5: Check all Parts of Your Design

You can check other parts of the design. Zoom out and grab any color displayed on the design.

Check the contrast on other parts of designer

Copy the hex code and let’s bring it to the UserWay tool. In our example design, the rest looks better since the background is still white but it is using darker blue. It has passed for large text, but it hasn’t for normal text. If you add a darker blue it will pass.

Check contrast

Then you should further check your design. Here we have blue text over a blue background.

Check all parts of your design

Copy the color and paste it into the checker together with the background color.

Past the color code to the checker

It has failed to meet any of the requirements since the contrast ratio is pretty low.

The results

Step 6: Share Results

If you click on “Share Results” you can email these results to yourself, to your designer, and your developer to make any changes.

Step 6: Share Results Option

If you cannot change your design, you can always download and install the UserWay widget on your site. So your visitors that need to change the contrast ratio of your site, they can do it for themselves using the UserWay widget.