Color plays a huge role in our society when it comes to branding. Color allows us to instantly recognize different brands of the world and evokes different feelings about that brand. Using color on your website is a useful and necessary tool to not only support your unique brand identity but color is also important when it comes to helping users with disabilities engage with your website.
When building a brand, choosing brand colors is one of many important steps to establishing your brand identity and guidelines, but many branding agencies fail to consider the importance of checking colors against current Web Content Accessibility Guidelines (WCAG) ADA guidelines.
Wait, back up. What is website accessibility?
Modern websites need to be accessible to everyone – including those with visual disabilities. Web Content Accessibility Guidelines (WCAG) 2.1 are the most current set of guidelines for web designers and developers to conform to. Covering a wide range of recommendations – from color contrast to font size – these guidelines help establish “rules” for making your website accessible to a wide range of people with disabilities.
Though there are many important considerations to take in relation to your website’s conformance, this article specifically focuses on color contrast and how it affects disabilities like color blindness and low vision. The key is to make sure that the colors on your website contain a certain level of contrast so that they can be understood by as many site visitors as possible.
Understanding website color contrast
Have you ever been reading text, or looking at an image, and you can barely make out what it says because the text is too light, or the two colors are too bright against each other? Color contrast can relate to a color’s hue, saturation, or tint, but the easiest way to understand color contrast is to just ensure any background and foreground color have enough of a visual difference between them. Some color contrast issues are obvious, but others can be difficult to see with the naked eye. Luckily there are several great web-based tools that can help us confirm which colors have enough contrast and which don’t.
Not Enough Contrast
Good Color Contrast
Contrast Tools
These online tools can help ensure your website colors have the correct contrast:
Colorable is a very visual way to view your colors. You can only test two colors at once, but the tool allows you to change the hue, saturation and lightness of the colors.
Git Hub’s contrast checker allows you to edit an entire color palette (up to 6 colors) and displays the results in an easy-to-read table. It’s important to note that not all of your colors will conform with each other, but instead you should have different options for light text on a dark background and dark text on a light background.
Web Aim’s contrast checker is another easy-to-use tool to check your contrast ratio, but you can only test two colors at once and there are less opportunities to find variations of your color. Note that you can only edit the color to be lighter or darker.
How to use color contrast tools
All of these tools are very easy to use and come with specific instructions. Simply enter your hex values for any foreground and background combination and the tool will calculate the ratio between those two colors. You can adjust the color values within the tools by increasing lightness, darkness, hue and saturation.
If you have any grey text or backgrounds, make sure to test those as well. Since many elements on websites can be used in various places, you’ll need to check every combination. Note that these small changes may impact your original colors. It may take a little back-and-forth to get the perfect color value that conforms and stays true to your brand.
When using these tools, you may notice that some colors will pass as “large text only”. This means that as long as the font size is 14pt (or 18.66px) and bold, or 18pt (24px) it will still conform according to the WCAG guidelines.
These tools are very accurate when it comes to testing one color against another, but what about a photograph that contains many colors that move around as the screen size changes? Our solution is to add a 1px black outline to your text or place the text over box with a color it complies with.
Color Contrast Recommendations
As a general recommendation, darker, more saturated colors – such as blues and greens – will be safe on white or lighter backgrounds. Yellows and oranges will need to be darkened considerably to be used on a white background, which can sometimes cause them to look brown or muddy.
If your brand colors don’t pass according to the contrast tools above, there are a couple options to include that color within your site. The first option is to darken (or lighten) that color as much as possible without changing it too much. If this option is out of the question, then you could always use that color for larger text only (if it passes). The last option would be to use that color as accent graphics, such as lines, icons or photographs, or anything that doesn’t require text that needs to be read through a screen reader.
Content and images on your website may change frequently and with sites that have multiple editors, the site can quickly go from passing ADA conformant scans to not. As you grow and change your site, continue to use the color tools and leverage your site’s CSS to ensure that styling remains as originally intended. To discuss your brand and website color contrast, the expert design team from ZAG is always here to help so get in touch.