Top 3 Importance of Adequate Color Contrast in Your Graphics


Arguably, whether you’re designing logos, social media banners, or infographics, your primary objective is always to make the graphic mesmerizing and memorable. And as you know, adequate color contrast — the difference between the colors used for various elements such as fonts and buttons — plays a big role in achieving that goal.

From a branding perspective, using colors that align with your brand’s personality and helps differentiate you from your competition makes complete sense.

Also, from the video marketing and sales standpoint, using color contrast to capture the audience’s attention and making important elements pop-out is all well and good too.

But, by far the most paramount reason to have adequate color contrast in all your graphic design is accessibility.

What is Accessibility?

Just as buildings (such as hospitals, department stores, and malls) are mandated to have low-slope ramps, power-assisted doors, handicap parking, and so on in order to accommodate the needs of disabled people, your designs should similarly be readily accessible to everyone such that nobody faces any disability-related biases.

Any design today, be it building design, website usability design, or any logo design, is incomplete and fundamentally flawed if it’s not attaining a certain level of accessibility as stipulated by the Americans with Disabilities Act (ADA).

So, the graphics you design for online mediums (such as your very own website) are also subject to ADA compliance. That is, if your website has visual content that can’t be easily consumed by say, color blind people, it can be judged as a violation.

Why is Accessibility that Important?

First off, it is the right thing to do. The ethical aspect of accessibility — to achieve equality for the disabled — is reason enough, but ADA compliance means there are legal implications that must be taken into account.

Failing to attain accessibility for your audience makes you vulnerable to costly lawsuits and claims by high-minded people and advocacy groups.

In fact, discussions about online accessibility are going up and 2018 observed a 181% rise in Federal ADA lawsuits over the year before.

What’s more, one in four (nearly 26%) adults in the United States live with a disability, and approximately 26.9 million adult Americans (almost 10% of all adult Americans) reported in a survey that they either “have trouble” seeing, even when wearing prescription glasses or contact lenses, or that they are blind or unable to see at all.

So, disregarding accessibility in your design means you are knowingly shunning a substantial chunk of your potential audience before they even get to know you.

But Is Color Contrast Really an Accessibility Concern?

It sure is! Color contrast is a crucial concern when designing digital materials because vision-related disabilities such as color blindness and low vision are very common, as just discussed above.

Adequate Color Contrast Importance

Without sufficient contrast with the background, the textual content can be difficult or even impossible for such users with poor vision.

Plus, there’s more to it than meets the eye (pun intended). “Anything that is indicated by color needs to have a secondary way for it to be distinguished,” states the government of the UK.

In other words, never present color to your audience as the sole means of making a decision. This makes sense regardless of the audience having vision difficulties:


  • The amount of light that reaches the back of the eye diminishes as a natural one ages.
  • Screens of the various devices used today vary widely in size, resolution, and contrast.
  • Reading in bright conditions such as under the sunlight is super difficult if the contrast is poor.

So, even people without a visual disability will appreciate a well-thought-out color palette that doesn’t cause needless eye strain. It just serves to improve the usability of your design.

How to Ensure Adequate Color Contrast?

The Web Content Accessibility Guidelines (WCAG) recommend minimum levels for color contrast between text and background, according to a mathematical formula.

It states that “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.” But there are exceptions to this guideline:

  • Large Text


As the bigger text is satisfactory to read when used with a lower color contrast ratio, large text and images can get away with a contrast ratio of at least 3:1.

  • Incidental Text


The text used merely for decorative purposes, or text used on an inactive action element (such as a non-functioning button) is referred to as incidental text.

  • Logotypes

Any text that is part of a logo or brand name has no contrast requirement.



There are many online color contrast checking tools to help you meet these requirements, such as the WebAIM Color Contrast Checker. Just remember to consider the font size of your content to decide if the contrast ratio needs to be 3:1 or 4.5:1.

Wrapping Up

To conclude, ensuring sufficient color contrast in all your graphics, online or offline, is great not just for alluring the audience and improving the effectiveness of your communication, but more importantly, it makes your content accessible to a bigger audience while saving you from potential lawsuits.

So, the next time you’re designing a pretty-looking graphic, take some time to consider its usability as well. Keep the entire audience, including people with disabilities, in mind. It would be much better to execute that way instead of having to go back to fix every issue.

After all, wouldn’t it be better if everyone could benefit from the beauty of your creation, instead of just the ones blessed with good vision?

Contributed By:

Tim Ferguson is the Director of SEO at Right Mix Marketing, an SEO-focused link building services company. His day-to-day role comprises writing & editing content for RMM blog, and helping clients with SEO, link building, guest posts and content marketing. When he’s not working, he loves spending time reading all things psychology.


Please enter your comment!
Please enter your name here