Color and Color Contrast

Color Contrast Between Text and Background Color

  • Provide sufficient color contrast between foreground and background, text and background color.  

  • The contrast ratio between text and background, using regular body text, should be at least 4.5:1.

  • There should be a contrast ratio of at least 4.5.1 between link text and background color. This applies to regular body text (or 3:1 for large text) .  

  • There must be a 3.1 contrast ratio between link text and surrounding text. 

  • Use this link contrast checker to test color contrasts for links https://webaim.org/resources/linkcontrastchecker/

Color Blindness

  • When designing for color blindness, make sure that colors are not your only method of conveying important information.

  • Use this filter to test web pages for color blindness https://www.toptal.com/designers/colorfilter/

  • If the purpose of posting the content is to communicate something about the colors in that image or web page, then it is important to provide some other way of understanding the information.

Challenges

Solutions

Reds and greens are often indistinguishable

This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the content or graphic or provide an additional means of obtaining the same information. For example, provide an explanation in the text itself.

Color and Alert/Error Messaging

  • Don’t rely on color to convey critical information such as alerts and error messages. See more info about this under the Alert/Error Messaging section.