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 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.
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 4: Copy the Code to the Checker
Copy the code, and go back to our tool. Paste it here in the foreground color.
Go back to Photoshop and 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.
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.
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.
Then you should further check your design. Here we have blue text over a blue background.
Copy the color and paste it into the checker together with the background color.
It has failed to meet any of the requirements since the contrast ratio is pretty low.
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.
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.
