Improving color contrast on your website will make it more accessible to a wider variety of users. Remember, not every user experiences the Internet the way you do. Color contrast matters on your website because if there isn’t enough contrast between the color of your text and elements like backgrounds, images and videos then users can’t easily consume your content.
Color contrast is an essential element to making sure your website (and all of the content you create) is visually friendly to users. The good news is that improving your website’s color contrast isn’t difficult… and once you’re aware of how important it is, you’re unlikely to forget how important it is.
Easy-to-Use Color Contrast Tool for Websites
While the best contrast you can get is black on white and white on black, you’re likely using other some other background colors, images or videos on your website with adjacent or layered text. The easiest way to double check that there is enough contrast between a background and text is to use the WebAIM: Contrast Checker.
The Contrast Checker is easy-to-use and free! So when in doubt… use it!
It’s slightly more complicated when you are laying text over images or videos (which isn’t very common). But laying text over images is very common and can definitely be difficult for people to read when there isn’t enough contrast.
You can also try out this plugin if you’re a Google Chrome user.
Artificially Create More Color Contrast on Your Website
If you’ve going to lay text over an image, try to find a place within the image with the greatest amount of contrast. You could also try editing your image and actually increasing the contrast within the image – but be careful, this can dramatically effect the style of your image, possibly making it “off-brand” for your small business. One of the best and easiest ways to increase the contrast, is to artificially create more. You can also create additional contrast by adding an opaque layer over the image and then sliding the opacity up and down until you find the right level of contrast.
The image below shows the difference between laying text directly over and image and using an opaque layer to create additional contrast. The left side of the image is the text laying right on top of the image. The right side has an additional layer with a black background set to an opacity of 41%. You can still clearly see what is in the image, but the text has greater contrast compared to the left side.
Location ALSO Matters When it Comes to Color Contrast
It’s also important when you’re overlaying text on images that you test different locations to find the best one. In the image just above, it’s easier to read the text, than it is in the first image on this post. While the image and opaque box are the same, the text in the first image is overlaying the silver laptop, making it impossible to read the text.
Color Contrast is Just One of the Ways to Make Your Website More Accessible
There are lots of ways you can make your website more user friendly for your users. When it comes to website accessibility the first three things you can easily check and improve on are:
- Including Alt Text on images to clearly describe what is in every image.
- Properly using HTML Headings so that users and search engines know what is most important.
- Increasing Color Contrast so all fonts are visible and legible.
Want to Learn More About Improving Color Contrast on Your Website?
I am definitely not a website accessibility expert. In fact, I’m know there are things on my own website that could be improved… and I’m working on those. What I do know is that I want my website to be a user friendly experience for all of my visitors.
It’s important that when we create content, like text and graphics for our websites, that we keep in mind some users may be experiencing, consuming and engaging with our content in a way that is different from how we experience, consume and engage with online content.
When we make efforts to make our own websites more user friendly, we help to improve the online experience for everyone.
For an in-depth article from Adobe about how UX designers need to be thinking about color contrast, read: Adobe’s Color Contrast Considerations.
How to Improve Color Contrast on Your Website
November 9, 2021