Fix These Common Color Contrast Mistakes for Better Accessibility
Did you know that approximately 1 in 12 men, and 1 in 200 women worldwide have some form of color vision deficiency? On top of that there are about 246 million people worldwide that have low vision, meaning they have some type of vision impairment, but they are not completely blind.
As a result, if your website or digital content relies on color to convey meaning, a significant portion of your audience might be missing out. Ensuring sufficient color contrast is not just good practice, it's essential for accessibility. In this post, we're going to focus on text color contrast and how to make it more accessible.
Let’s start with a QUIZ!
Test your knowledge on color contrast by looking at the image below. Which examples pass and which fail a color contrast audit? Jot down your answers, NO CHEATING. We’ll reveal the answers at the end of this post.
In this article
What is Color Contrast (and how it impacts your content)
What Are the WCAG Contrast Guidelines?
Exceptions to the Contrast Guidelines
Tools for Testing Color Contrast
Common Color Contrast Mistakes
Links
Text Overlays
Hover Effects
Thumbnails
What is Color Contrast?
Color contrast is the difference between the luminance, the brightness, between the foreground and background colors. It's a measure of how easily text or graphical elements can be seen against their background. Sufficient color contrast in your digital content has many benefits for your business:
Wider Audience Reach: Good color contrast improves the accessibility in your digital content, allowing people with various vision impairments to find and interact with you online.
SEO: Search engines are increasingly prioritizing accessible websites. Improving your content’s contrast ratios can indirectly help boost your rankings.
Legal Compliance: Many countries have laws surrounding accessibility standards, like the ADA in the United States and the EAA over in Europe. Taking steps to create more accessible content can help you avoid these types of legal complications.
What is WCAG?
The Web Content Accessibility Guidelines, also known as WCAG, are the internationally recognized standards for web accessibility. These guidelines provide a set of recommendations that help to make all digital content more accessible for people with disabilities.
In the WCAG guidelines, there are different levels of compliance, level A, level AA, and level AAA. For color contrast specifically there are only two levels of compliance. With text color contrast, you have to achieve a minimum of level AA, and then if you are able and have higher contrast content you could possibly achieve level AAA.
These guidelines apply not only to text. They also apply to icons, buttons, charts, and other elements. Any element that conveys meaning needs to meet the appropriate compliance level.
For level AA color contrast, the guidelines are as follows:
Normal Text - Text up to 16 pt, the color contrast minimum is 4.5:1
Large Text - Text 18pt or larger, the contrast minimum is 3:1
Bold Text – Text 14pt or larger and bold, the contrast minimum is 3:1
WCAG SC 1.4.3 Contrast (Minimum)
For level AAA color contrast, the guidelines are as follows:
Normal Text – Text 16pt or smaller, the contrast minimum is 7:1
Large Text – Text 18pt or larger, the contrast minimum is 4.5:1
There is no level AAA guideline for bold text.
WCAG SC 1.4.6 Contrast (Enhanced)
You're going to see a much more obvious color contrast in a 7:1 ratio but ensuring all your text meets a minimum of level AA compliance is crucial.
Exceptions to Color Contrast Guidelines
There are a few exceptions to color contrast guidelines when it comes to text.
Logotypes
There are no color contrast requirements for text in logos or favicons.
Some Images with Text
Some images with text, SOME being the keyword, do not need to meet color contrast guidelines.
An image that includes text, like the one below, that is used to express a feeling, represent a place, service, design, etc. do NOT need to have sufficient color contrast. For example, the image below of the polaroid photos, maybe that is on a photographer’s website to showcase a service or style they offer. The actual words on the book cover don’t matter.
Images with text, where the text conveys important information or meaning MUST follow color contrast guidelines. An example of this would be an infographic or promo ad that talks about a sale or event. It is important for people to see and be able to read the text so they know about the sale or when and where an event is.
3 Tools for Testing Your Color Contrast
There are a number of tools available to test color contrast. They all give you similar information, calculate your contrast ratio for you, and are easy to use.
Here are three of my favorites:
Color Contrast Analyzer
This FREE app is available for both Windows and Mac and can be used to test color contrast in anything, your website, digital documents, and infographics. You can download it from the TPGI website. Once you've installed it, simply open the app and use the eyedropper tool to select the foreground and background colors you want to test. The app will then tell you whether the contrast ratio is sufficient for WCAG AA or AAA compliance.
Color Contrast Checker
This is a Chrome extension. Once installed, click the icon to open the tool and test anything on the web. It works similarly to the Color Contrast Analyzer app, but it's a bit more convenient since it's integrated into your browser. I really like using the color swatch to adjust contrast ratios quickly. You can download it from the Chrome Web Store.
Webaim Contrast Checker
This website provides a tool to test contrast. It's particularly helpful if you're establishing a color palette. Simply enter the hex codes for your foreground and background colors, and the tool will tell you whether the contrast ratio is sufficient for WCAG AA or AAA compliance. It also provides a helpful slider that allows you to adjust the colors until you find a combination that meets the requirements. Check out this tool.
Common Color Contrast Mistakes
When it comes to ensuring sufficient color contrast, here are some of the most common mistakes I see.
Links
Links are everywhere: on websites, in blog posts, email campaigns, product descriptions, etc. By default, most browsers set links to be in a blue font and underlined, on the standard white background that every website starts with. As we build our websites and other digital content, these are one element we immediately adjust to our brand colors.
Since links represent an action we want our audience to take, it is important to make them stand out from other text and elements. Unknowingly, many business owners make these links harder for people to interact with.
Ensuring sufficient color contrast for a link to its background is an easy way to make your content more accessible.
All too often, I see businesses that fail to do this. Check out the screenshot below of links with poor contrast.
For someone with perfect vision, they may not have any issues reading the entire text in the image. But for people with low vision, those light-colored links may be impossible to see.
A good rule of thumb is that if you have any doubt about whether your links have sufficient contrast, they probably don't, so test them.
When you are setting up your brand styles, be sure to use color contrast tools to test your link colors so you can provide an inclusive experience for all your potential customers. Your body text must have a contrast ratio of 4.5:1 and any large text, like your headings, needs a 3:1 contrast ratio to its background.
BONUS TIPS
It is best practice to have links underlined. I know not everyone likes this visually, but it helps to identify links, especially for those who are color blind.
Links have a secondary contrast ratio to meet, the link color to the surrounding text. This is a 3:1 ratio. So if your link falls into a sentence, test the link to the background color AND the text on either side of it.
Watch a tutorial on link color contrast!
Text Overlays
A popular design technique for websites is to overlay text on an image or video. This is a great way to grab your visitors’ attention.
When text is laid over an image, there are two key things to check.
1 In order to pass an accessibility audit, you need to test the lightest point of your text color to the lightest color of the background image or video where the text overlays it.
2 Keep in mind what might be displayed if the image doesn't load. There are a number of reasons people may choose to not have images load on their computers – they can be a distraction for people with cognitive challenges and some people, especially developers, prefer to not load images so their processors work faster. We also need to remember technology doesn’t always work the way we expect it to. Regardless of the reason, you need to know that your text will still be visible to your customers even if your image or video doesn’t load.
To safeguard your text overlays, you MUST know the base color behind your image or video. As mentioned before, the default color is white. If you have not adjusted this in your CSS or site styles and you use white text as an overlay and the image doesn’t load your text will disappear, as shown in the image below.
This is a very easy fix; most people just aren’t aware of this issue. Keep these things in mind when using text overlays in your digital content:
Make sure the text is easy to read against the background image. Big and Bold is Best!
Consider using a semi-transparent overlay behind the text to make it stand out more.
Test your color combinations with a color contrast checker to make sure the lightest point of the text contrasts with the lightest overlay points on the image or video.
Think about what will happen if the image doesn't load. Will the text still be readable against the background color? If not, set your background to a more contrasting color.
Watch a tutorial about the sneaky ways text overlays fail accessibility audits!
Hover Effects
When a user hovers over an element, such as a button, and the color changes, this is called a hover effect. This design technique is also used a lot in product thumbnails and with text overlaying an image. In those instances, a hover may reveal more details of a product or additional content.
Hover effects are a great way to catch scrollers’ attention. But they can also cause a lot of frustration.
Like links, you want your “Buy Now,” “Sign Up Here,” and “Download” buttons to pop. Now that you have a better understanding of color contrast, you know how to make sure the button text contrasts sufficiently with the button color. But did you consider how it looks when a user hovers over it?
This is where websites often fail an accessibility audit.
It is important to test BOTH STATES of a hover effect. Just because a color combination looks good in its initial state doesn't mean it will look good or pass a contrast audit when the colors change.
It isn’t uncommon to find text that fades to a very light color or even completely disappears on a hover. This can be very disarming to a user and cause them to not click on a button.
Watch a tutorial about proper color contrast for hover effects!
BONUS TIP
Buttons are one of those elements that has a secondary contrast ratio to meet. After confirming your text has proper contrast to the button color, test the button color to ITS background. That ratio should meet a minimum of 3:1.
Thumbnails
Just because your text can be EXTRA LARGE and BOLD in a thumbnail, doesn’t mean you don’t need to consider color contrast. The whole point of thumbnails is to entice someone to click on your video, podcast, or promo. So, ensuring there is enough color contrast is key.
Here are 3 easy tips to make more accessible thumbnails:
Use big bold text.
Remember the text overlay guidelines discussed above (since lots of thumbnails use them)
Pop open your color contrast tool and test each color combination.
It’s that simple!
Color Contrast Best Practices
One of the easiest ways to build a more inclusive brand is to start by testing the color contrast of your online content. There are TONS of easy-to-use FREE tools, and it only takes a few minutes.
Here are a few best practices to keep in mind as you go through this process.
Pick your color palette and use a color contrast checker tool to test each color combination.
Test normal, large, and bold text in all color combinations.
Test your link color(s) to its background AND the surrounding text.
Set up your website style guide to include your passing color combinations, links, buttons, hover effects, etc.
Design several thumbnail templates that pass color contrast guidelines.
Establish templates in Word or Google Docs with your level AA or level AAA color palette.
Wrapping It Up
That covers it! You should now have a good understanding of how color contrast can impact your online visibility and the easy steps you can take to improve your content.
Let’s revisit that quiz.
Here are the answers to the quiz. Did you change your mind on any since going through this tutorial? Did any surprise you?
Get started with digital accessibility.
Check off six common online accessibility barriers as you create your content each month.
