Check Your Color Contrast

January 12, 2023

Audio	Visual
Hi everyone!	The main image is of the UserWay homepage. There is a smaller video in the lower right corner showing the female narrator. The smaller video plays in the corner for the video’s duration showing the narrator.
In this tutorial, I’m going to show you how to check if the color contrast of your site is compliant with web content accessibility guidelines.	Image does not change.
You can check the color contrast with an online tool that you will find in userway.org.	Image does not change.
So visit the site and click on the hamburger menu.	A cursor appears on the UserWay homepage screen and clicks on the hamburger menu at the top of the screen.
Then click on “Contrast Checker” to access the tool.	A new menu appears on the left, and the cursor clicks on the words Contrast Checker.
Ensuring a high contrast ratio for your site’s design can make it easier for visually impaired and color blinded 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 for 4.5 to 1 for large text. We recommend you to always aim for strict.	A new webpage appears with the words “Contrast Checker” written on top.
So scroll down and let’s see the tool.	Webpage scrolls down to show the Contrast Checker tool.
This is how the Contrast Checker works.	Webpage showing the Contrast Checker tool.
You add a foreground color	The cursor hovers over a box labeled “Foreground color.”
and a background color,	The cursor hovers over a box labeled “Background color.”
and it will calculate a contrast ratio.	The cursor moves further down the screen and stops near the end of the page.
And down here, you will know if you have passed the double-A and triple-A requirements for normal and large text.	The cursor hovers over two text boxes that will report whether color contrast has passed the check.
I have a design in Photoshop I’m going to open it.	A Photoshop window opens with a demo website on it. It shows a picture of a hiker against a blue background.
I’m going to use the eyedropper tool to grab a color.	The cursor hovers over the eyedropper tool.
So first I’m going to zoom in to this text	The cursor hovers over Lorem Ipsum text and zooms in.
and grab the color.	The cursor moves to the eyedropper tool and clicks on it. The eyedropper tool appears and moves to pick up the color blue on the letter “r.”
Copy the code, so let’s go back to our tool.	The UserWay page opens again with the left-hand menu open.
And paste it here in foreground color.	The cursor clicks to close the left menu. It then moves to click on “Foreground color.” The Foreground color picker appears, and the hex code from Photoshop is pasted in the code bar.
Let’s go back to Photoshop.	The Photoshop page is opened again.
And I know the background is pure white, so I’m gonna copy the code.	The eyedropper tool clicks on the white background. Half of a menu appears on the right and closes quickly.
And bring it here to background color.	The cursor moves to click on “Background color.” The Background color picker appears, and the hex code from Photoshop is pasted in the code bar.
And this is the result.	The page changes and both results boxes include smaller red boxes that say “FAIL.”
Contrast ratio is very low and we have failed to meet the requirements for double-a and triple-a for both normal and large size.	Image does not change.
Let’s check other parts of the design.	Photoshop reopens.
Zoom out	The cursor hovers over the Photoshop page and zooms out.
and let’s grab this dark blue.	The cursor moves to the eyedropper tool.
Same thing, let’s grab the color.	The cursor clicks on the eyedropper tool. The eyedropper tool appears and moves to click on a blue letter “H.”
Copy the hex code	Half of a menu appears on the right and the word “Copy” is highlighted.
and let’s bring it to our tool.	The UserWay color contrast checker in opened.
This looks better.	The cursor clicks to close the left menu. It then moves to click on “Foreground color.” The Foreground color picker appears.
[No Audio]	The hex code from Photoshop is pasted in the code bar.
The background is still white but is using a darker blue. It has passed the double-A requirements and the triple-A requirements. It has passed for large text, but it hasn’t for normal text. If you add a darker blue it will pass, but anyways. This is looking good.	The contrast checker shows that normal text has passed AA requirements and failed AAA requirements. It also shows that the large text has passed both AA and AAA requirements. The ontrast ratio is listed as 5.46.
Let’s check another part of the design.	The page goes back to the example site design in photoshop.
Let’s go back to Photoshop and move to the right.	The screen scrolls to the right.
And here we have blue text over a blue background.	The cursor hovers over blue writing on a blue background.
Just gonna zoom in.	The image zooms in to show text that reads “Dstance 7,8 mi.”
Same thing.	The cursor moves to the tools menu and clicks on the eyedropper tool. The curo brings the eyedropper over to the zoomed-in text and clicks on it.
Copy the color.	The cursor moves over to the right where the color codes are and the color menu appears. She scrolls down to the “Copy” option and selects it.
Paste it here.	She returns to the UserWay Contrast Checker page. The cursor moves to the Foreground color field and pastes the copied hex code in the field.
And let’s copy this background color.	She goes back to the Photoshop page and select the background color with the eye dropper tool.
And copy the hex code.	She then goes to the color menu and selects “Copy” to get the hex code.
And it has failed.	She returns to the UserWay Contrast Checker page and pastes the background color hex code in the background color field.
So this section doesn’t meet any of the requirements.	The contrast ratio is identified as 2.04 and fails Normal and Large text AA and AAA requirements.
The contrast ratio is pretty low.	The image does not change.
If you click on “Share Results” you can email these results to yourself, to your designer, and your developer to make any changes.	The cursor clicks on “Share Results” and a new window appears asking for email addresses. It indicates that you can add up to 10 emails.
And also, if you cannot change your design, don’t worry because you can always download and install 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 UserWay widget.	The image does not change.
To learn how to customize your widget’s look and feel, enable white label, agency mode, and other upgrades, check out the links in the description below.	The UserWay Contrast Checker page fades and the smaller video of the woman speaking becomes the main screen.
Also don’t forget to subscribe!	Video fades to black.

Check Your Color Contrast

Ready to Make Your Wix Website Accessible?

You might be interested in