Skip to Main ContentOpen Alternative Formats of This Page
Dallas College
Skip to Main Content Open Alternative Formats of This Page

Accessible Contrast, Colors and Backgrounds

​​​​C​ontrast

Contrast is the difference between two colors. To make your content accessible, you should have high contrast between all text and its background color. If your text is dark, your background should be light, and vice versa. Black text on a white background is recommended for paragraphs of text.

Colors can be used in moderation if there is enough contrast between the text and background, but you should avoid colored text on a colored background. When text and background color are too similar, it can be difficult for your audience to process the information.

Examples of High and Low Contrast:

This sentence is easy to read.

This sentence is also easy to read.

This sentence is not as easy to read.

This sentence is difficult for most and impossible for some to read.

Insufficient contrast especially can be an issue for people with color blindness because they can't distinguish between certain colors (such as red and green). Low contrast sensitivity also becomes more common for all people as they age, so using high contrast will help make your materials more effective for a wide range of users.

Watch an example of colors with good contrast.

Color in Text and Graphics

When the importance of information is communicated using color alone, then that importance is not conveyed to people who are blind or color blind students and cannot see the color of the text. A common example of this issue is using the color red to indicate important information.

Red-green color blindness is the most common form of color blindness. Red text also has a low contrast level between the text and most backgrounds. If red text is used on a white background, be sure to use a dark red to ensure proper color contrast.

If you use color to convey meaning, there must also be another way that meaning is conveyed so that people who are color blind can still access the information. For example, the text is not only colored but also bold. You could also use different shapes, fonts or text labels. This benefits not only users who are visually ​​impaired, but also those who can only print in black and white.

Penn State has more information on Color Coding Examples.

Important: Font styles such as color, bold (b), underlining (u) and italics (i) are often meaningless to screen readers. Instead of using formatting alone to emphasize a key piece of information, also add text that accomplishes your goal (for example, the word "Important" at the start of this paragraph). Color can still be used, but now a person who is blind or color blind will be able to understand the importance assigned to the text.

Backgrounds

It can be tempting to use a bright and/or distinctively patterned background to add visual excitement. However, these backgrounds can make pages difficult to read and can be painful to look at over long periods of time. In general, it's best to either avoid patterned backgrounds entirely or use very subtle patterns. This includes backgrounds on images, icons, b​uttons, etc.


Video: The Importance of Color

  

Accessibility Checklist: C

"Web pages shall be designed so that all information is also available without color, for example from context or markup."

What does this mean to you?​

The guideline refers to content that you create and offer. Students who are blind, color blind, or those who can only print your documents in black and white would be affected by not following this guideline.

Formatting your text makes your documents more visually appealing, grab the students' attention, and help point out important information.

But you should also be cognizant of the importance of using font color correctly.

Following this guideline will ensure all users can utilize your content and prevent possible miscommunications in the course concerning things like deadlines, requirements, and important details.

Whenever you decide to change your content's font color for important information, simply ensure that the font color is NOT the only means of identification.

Here we have a few examples showing appropriate use of font coloring by using multiple ways of identification.

In this first example, the font color helps quickly identify the different values of "Completed & Incomplete" but here color is not the sole means of identification.

By using the words "Complete" & "Incomplete", the text holds value but still shows its importance using color.

If we had used checkmarks or Xs instead of descriptive words, some students may have difficulty differentiating what would be complete or incomplete.

In this next example, the instructor used multiple ways to identify the information: they underlined the text, used red font color and utilized a symbol/icon.

Using all of these different methods of identification will make these items stand out (which is the intended purpose or doing all of these things) but will also allow all types of users to navigate this table.

This instructor has made their content engaging as well as universally designed.

Video: Colors With Good Contrast

View this video with audio descriptions


Web Accessibility Perspectives: Colors With Good Contrast.

[Signs with directions are shown. A woman is walking happily down the street.]

There's something about great design that allows it to go practically unnoticed.

But it doesn't take much to make things confusing and frustrating.

Choosing colors with poor contrast makes navigating, reading and interacting a real pain.

[The signs change to have poor contrast. The woman now looks confused. She looks at a navigation app on her phone.]

Good design means sufficient contrast between foreground and background colors.

That's not just text and images but links icons and buttons.

[The app has a button with low contrast that changes to become clear.]

If it's importa​nt enough to be seen then it needs to be clear and this is essential for people with low contrast sensitivity, which becomes more common as we age.

[An older man on a sofa is looking at a tablet. He goes to read a message on his mobile phone.]

With good colors, websites and applications can be easier to use in more situations, like in different lighting conditions.

[Sun glares on the phone but the text is still readable.]

Web accessibility - essential for some, useful for all.

[The woman from earlier arrives at her destination using the mobile app.]

Visit w3.org/wai/perspectives for more information on colors with good contrast.

W3C Web Accessibility Initiative. Copyright 2016.

Additional Resources