Living with a graphic designer has taught me a lot about color: Pantone, color theory, and how color can make or break a brand. But color is not just important for graphic or brand designers, it’s important to SEOs. While it may be easy to overlook, the colors clients choose for a site, especially for text content, and how those colors contrast with the background can be the difference between a mobile-friendly pass from Google or a list of errors during a mobile performance audit. Additionally, insufficient contrast makes it harder for visually impaired users to browse the site. So let’s dig a little deeper into why color is so important and how to get it right.
WCAG Compliance
In UpBuild’s SEO Audits, one of many factors we look at is how well the site conforms to WCAG (Web Content Accessibility Guidelines). The WCAG documents “explain how to make web content more accessible to people with disabilities,” which includes adequate color contrast to make text easy to read for visually-impaired users.
I’ve mentioned the importance of Web accessibility before, and while everyone should make accessibility a priority because it’s the right thing to do, usability has also become critically relevant to SEO — accessibility and usability signals are easy for Google to read, and they are increasingly prioritizing sites that are easy for all users to use when ranking sites.
Accessibility factors include making sure every color we choose is not only appealing but visually discernible, especially for those that are visually impaired. If there is not enough contrast, some people will simply be unable to read your site’s text.
Is Your Site Mobile-Friendly?
Not only does color contrast affect WCAG compliance, but it can greatly affect your user’s mobile experience. With mobile-first indexing, websites with a mobile-optimized interface are indexed first and often ranked higher in the SERP. On mobile devices, color contrast can be a critical factor — Google cares a lot about mobile-friendliness, and if it’s difficult for a reader to distinguish an article’s foreground from its background on a mobile device, Google will flag these issues and find other sites to rank.
In our Mobile Performance Audits, UpBuild often comes across sites whose content triggers the error message seen below.
So what exactly is contrast, and how can we improve it?
What is Contrast?
As defined by the Bureau of Internet Accessibility, “Color contrast is the difference in light between font (or anything in the foreground) and its background. In web accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information.”
WCAG suggests that sites should have a contrast ratio of at least 4.5 to 1, except for the following:
- Large Text: Large-scale text and images of large-scale text should have a contrast ratio of at least 3 to 1;
- Incidental: if the text or images of text are part of an inactive user interface component that is pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, they have no contrast requirement;
- Logotypes: text that is part of a logo or brand name has no minimum contrast requirement.
Confused yet? Don’t worry: luckily, there are tools to help you navigate this world of color.
How to Check Color Contrast
When auditing a site for accessibility, there are many tools to choose from. I like to use the WCAG’s Chrome Extension, WAVE Evaluation Tool.
- Once downloaded, simply go to your desired page. For example, https://www.mlb.com/cubs.
- Press on the WAVE icon and take a look at your results. The WAVE tool will show you all accessibility errors on a page. For today, we’re only going to look at contrast errors.
- Click on the ‘View details’ button on the bottom of the page and click on each icon to see exactly where the contrast errors exist. Taking a look at the Cubs’ website, the featured players’ positions do not have enough contrast with the background color.
How to Pick New Colors
Now that we know there isn’t enough contrast on certain elements of the page, how do we fix it? I’m no expert with color, so I highly advocate using the help of the internet. A tool I like to use is Tanguru’s Contrast Finder. What I love about Tanguru is that they give you a variety of new color options to choose from that are closely related to the color already used on the site. Let’s take a look at how.
- First, find the hex code for the color that was shown to have low contrast. The color currently used on the Chicago Cubs’ site is #999.
- Next, find the background color code. In our case it’s #ececec.
- Type the hex codes into the tool.
- Make sure to check the boxes that tell the tool what to look for. In most cases, you’ll want to edit the foreground color; it’s usually easier to change the color of the text then the whole background. You’ll also want the tool to give you colors that are closely related to the initial color.
- Press the ‘Check and find contrast’ button for results.
You’ll see a list of all the color options Tanguru has found to replace the current text color. If my client were the Cubs (hey guys!), I’d offer them a few of these options as replacements for the current foreground color. It’s as easy as that!
If you want to double-check your work, head over to WebAIM, and type in your new foreground color with the current background color. It looks like we pass with flying colors (pun intended).
Web accessibility is increasingly important to a site’s ability to rank. Choosing colors for a site may be seen as a job for designers; however, SEOs need to make sure the right colors are being used so that everyone can access, read, and enjoy the websites that we help share with the world, and it’s never been easier.
