COLOR BASICS

Here are some simple tips to get started: 

 

Ensure for strong contrast between colors, which will make your website more accessible. The more people who can read your website, the better. 

 

The contrast between color and text should meet Web Content Accessibility Guidelines (WCAG) Standards. 

 

• Small text: 4.5:1 

• Large text: 3:1 

 

Additionally, avoid using pure black (#000) and pure white (#FFF), which can be straining on the reader's eyes. 

 

 

Make sure your text color stands out against the background color. For easy legibility, stay away from choosing colors that are too similar to one another. You want to make sure that a customer can easily read the text in front of them. For example, if you have a white background, consider using black or grey text to have your text stand out. If you have a tan background, consider using dark blue or dark green text.

 

Additionally, take caution when placing text over a photo. Without the proper contrast, the text can easily get lost in the details of the background, and valuable information can be lost. Instead, choose a solid background to place your text over.

​

Here are some examples of weak versus strong color contrast between the text and background:

​

​

​

​

​

​​

​

​

Strong Color Contrast​

 

 

 

 

 

 

 

 

 

Weak Color Contrast

 

 

Due to the contrast levels, the top image's text is much easier to read than the bottom's. Remember, if you are having a hard time reading text because it’s too similar to the background, other people will too. 

​

You can check how accessible your website colors are by using Audio Eye’s Accessible Colors article, which also has their color checker tool linked. 

​

Allow for color consistency across your website.

 

A key element of inclusive web design is consistency, as it promotes trust within the site user. It also prevents confusion from the user, since everything on your site will be in unison, giving it a professional look.

 

One way to do this is by sticking to a color palette and using this across your website. If your logo has color in it, you can use aspects of your logo and go off of this. If not, no worries! There are plenty of tools that can be used to assist you with choosing an inclusive color palate. 

 

An example is Venngage, who randomizes inclusive color palettes free of charge. You are provided with the Hex Code, and can insert this on many web design platforms to choose the exact color recommended.