Google recently deployed their new “Lighthouse” tool to the general public. It’s a project that analyzes a web page and provides detailed recommendations on a variety of issues like performance, SEO, and accessibility. It gives a score for each of these categories and allows you to tweak your page accordingly.
Given that some recent comparisons have shown that Google favors sites with google page optimization in their search results (not necessarily speed), it’s a good idea to ensure that you do whatever you can to make your page comply with their recommendations.
In the “accessibility” tab, one of the sections deals with color contrast. The idea is that users who might be visually impaired, sometimes have difficulty reading your text because of the low contrast between background colors and the foreground font. We’ve all sometimes landed on horribly designed pages that make it difficult to read. Well, that’s how some impaired people might be seeing your site!
The 3 Standards of Accessibility
The Web Content Accessibility Guidelines (WCAG) 2.0 has three stages of color contrast called A, AA, and AAA. These are ranked in order of impact on web design. “A” is the easiest to implement and will only minimally affect your site. Whereas it might be impossible to conform to AAA standards without severely crippling your web design.
Additionally, there are different standards for small text and large text. Since “A” is so easy to meet, here are the recommended color contrasts for AA and AAA.
AA Large Text - 3.00:1 AA Small Text: 4.50:1 AAA Large Text - 4.50:1 AAA Small Text - 7.00:1
Finding the Color Contrast for Your Website
There are many WordPress themes out of the box that have pretty bad color contrast for certain text elements. For example, look at this <pre> text from the theme called “Write”:
Even without using a specific tool, it’s quite obvious that it might be a little too light – not enough contrast. For a regular person it might not be a problem, but for someone with even a slight vision impairment, it could be difficult to read. Let’s quantify the contrast and see what we can do about it.
Step 1: Finding the Color Code
To get the exact color code for your text, right click on it and click “Inspect Element”. This will bring up the developer tools, and somewhere in the list of styles you should see the hex code for the color as shown here:
Here, the hex code is #777 . We’ll need this in the next step.
Step 2: Getting the Contrast
To get the contrast values, use this super useful site from Deque University. Scroll down, and paste the color code you got from step 1, into the “Foreground Color” Hex field as shown here:
Also choose the background color for your site. It’s probably white, but if it’s something else, enter it as shown. Once that’s done, scroll down and you’ll get a contrast score like this:
Here you can see that the contrast ratio between the foreground and background color is 4.47:1. And that fails everything but the “Large Text” AA standard. To fix this, use the slider for the foreground color to adjust the lightness to a lower value. Keep doing that until the contrast ratio becomes something useful like 7.00:1 as shown here:
A ratio of 7:00:1 is enough to pass all the tests. So now use the new hex value in your page to preview it:
As you can see, the <pre> tag is now a bit darker than before and easier to read for someone with a visual disability. If you’re satisfied with the results, then modify your site’s CSS accordingly!
Repeat this process for various elements on your site to ensure that they have the proper contrast. Doing this will increase your accessibility score on Google’s lighthouse experiments and make your site more welcoming and easier to use for everyone!