By Jennie Delisi, Accessibility Analyst

Color – something we use every day at work. Many of us don’t even think about it! It is part of:

• Heading styles.
• Link font color.
• Bullets in lists.
• Error messaging.
• Table row headers, column headers, data cells.

And this list just relates to text!

This month we review the concept of color as a sensory characteristic of text. We cover who needs you to use color intentionally, what to consider when planning to use text with color, and how to test.

Why Use Color Intentionally

You may know someone that cannot tell the difference between red and green. Or someone that accesses text but not any of the visuals onscreen. People may find color difficult to perceive for a variety of reasons. Consider people who:

• Have difficulty perceiving certain color combinations.
• Have low vision. 
• Have a cognitive disability that makes it difficult to notice more subtle sensory differences.
• Are blind.   

Use Color with Intention

Use color – it helps many people engage with your content! And, add these concepts to your checklist (more details will follow):

• Use good contrast between foreground and background.
• Use more than just color to communicate information. Another way to say this: do not use color alone to communicate.

Bonus if you are able to:

• Let users choose the foreground (text) and background colors.

Plan to use Color

Each of us plays a role in planning to use color with text.

Individual Contributor

Selecting colors for specific tasks? Think about how you (and other people) will test them. Plan to use colors that meet the contrast requirements. Plan for use of text with color in:

• Emails.
• Documents.
• Web pages, applications, forms (including surveys).
• Software.
• Mobile applications.
• Social media.
• Infographics…

There are few jobs today that someone may have where color is not a consideration.

In terms of text color, think about the color of:

• Heading styles.
• Paragraph text.
• Link font color.
• Bullets in lists.
• Error messaging.
• Table row headers, column headers, data cells.

Often I hear people say “I use the default colors, so those are accessible. Right?” Maybe. 

The company or organization may not have tested the default colors for the specific way you are using them. It's best to test it yourself.  

Consider:

• Did they test the default color contrast against the background you selected?
• Did they test the default color the way you are using it – have you changed anything compared to how they tested it?
• Did they test the version you are using, which may have changed some of the colors?

Using something you haven’t used before or since the latest update? Consider that the default color of the text may not have enough contrast.

When planning to use color to communicate something like status of a project, or an alert, use text and color. Do not use color alone. Review your plan to determine if readers need to be able to perceive color of the text to understand the information. Examples include: 

• If a category of content uses green text for one category, blue for another, and does not have text to identify the name of the category. 
• If red responses to sample questions indicate incorrect and do not have text that also identifies them as incorrect.
• If the color of text (paragraph, heading, table cell) indicates its status as complete, partially complete, or not yet started.

Revise your plan to ensure that color is not the only way the content communications information.

Project Planning Team

How IT projects will use color and text is an important consideration for 

• Designers.
• Business analysts.
• Quality assurance professionals.
• Developers.
• Project managers. 

The information for individual contributors (above) will start you thinking about how this impacts your projects.

You may also want to add specific information in your plans that references the Web Content Accessibility Guidelines (WCAG). For state of Minnesota employees, this is currently version 2.0, A and AA. Consider building in greater accessibility by adding AAA and 2.1 success criteria. The How to Meet WCAG (Quick Reference) with color as a selected tag identifies the following success criteria to include:

• 1.3.3 Sensory Characteristics – Level A. “Note 1: For requirements related to color, refer to Guideline 1.4.”
• 1.4.1 Use of Color – Level A. “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
• 1.4.3 Contrast (Minimum) – Level AA. “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except…”
• 1.4.6 Contrast (Enhanced) – Level AAA. “The visual presentation of text and images of text has a contrast ratio of at least 7:1, except…”
• 1.4.8 Visual Presentation – Level AAA. “For the visual presentation of blocks of text, a mechanism is available to achieve the following…”
• 1.4.11 Non-text Contrast – Level AA (Added in 2.1). “The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)…”

Note: the success criteria listed above does not include color related to other uses, such as visible focus. This is important as well, but the scope of this article is on the use of color and text.

Examples of Tools for Planning to Use Color

Color Contrast Planning Tools

There are many tools available to help you select colors to use. Here are some examples:

• WebAIM Color Contrast Checker.
• Level Access Color Contrast Checker.

Each has a style for adjusting potential colors and displaying colors for your consideration. 

Tools for Checking for Color Used Alone

Test 1: check for color words.

A simple testing tool is your Find option within a browser, document, or content editor. Search for words related to the colors available on the page, e.g., the text “errors are shown in red.” Common examples are red, green, orange, yellow. 

You may have access to other tools that use automated tests to search for the use of color words.

Test 2: check for text presented in different colors.

Examine the page and identify text that uses different colors. You may be able to determine this by scanning with your eyes. For some, this may be easier by examining the color codes. When encountering different colored text, review to determine if color change is required for understanding the content.

Prepare a List of Text to Test

When testing text, review anything that is not black and white, or text with background colors you have previously tested and found to pass. Make a list of these elements. For testing text they could be:

• Heading styles.
• Paragraph text.
• Link font color.
• Bullets in lists.
• Error messaging.
• Table row headers, column headers, data cells.

Note: some text on the page may be part of images. This article will not cover specifics for testing this type of text.

Places to consider reviewing (often forgotten):

• Footnotes.
• Footer text in a document or on a website.
• Error messaging that appears after failing to complete or incorrectly completing a form element.
• Visited link colors if they change from how they originally appear.
• Sections of a document, webpage, or application that have a different background color.
• Text in panels or sections of an application or web application that the user can expose. 
• Text that does not appear on the page until a user completes a task or makes certain selections.
• Text that becomes available in a pop-up, notification, or similar elements.

Options for Testing

There are a variety of tools available for testing color contrast. Select ones that work with your abilities, type of technology, and display preferences.

Common to all is the need to determine:

• Color code of the text (find the color code in the code, use an eye dropper selection option within your tool, or run an automated checker).
• Color code of the background.
• The color contrast ratio. For this, most people use a tool to calculate it.

Sometimes there are special considerations:

• When the background or text color uses a gradient, or the background is an image.
• If a particular letter in a word disappears because of the way the font has color applied.

For testing to determine if content uses color alone, review the section above: Tools for Checking for Color Used Alone.  

For testing color contrast, in addition to the testing tools in the section above (Color Contrast Planning Tools) some other examples are:

• Colour Contrast Analyser (CCA). 
• WAVE Web Accessibility Evaluation Tool.
• ANDI.

Testing Protocol Examples

The Understanding Documents for each success criteria in WCAG have a section called Sufficient Techniques. Each Sufficient Techniques page has a Tests section. There is a procedure, followed by expected results. Here are some Test sections that may be helpful to review:

• Ensuring that information conveyed by color differences is also available in text.
• Including a text cue for colored form control labels.  
• Ensuring that additional visual cues are available when text color differences are used to convey information.
• Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. Note: this is the test process used behind the scenes for many automated testing tools.

Looking for more test protocols? Start with the specific success criteria. Find its Understanding Document. Then, review the sufficient techniques for one that is close to your situation.

Still not sure how to test? 

• If you work for the state of Minnesota reach out to your digital accessibility coordinators. 
• Everyone should also sign up for trainings! Our newsletter includes training opportunities each month, some of which are free!

Resources – Learn More

For people who want more resources about use of color here are some suggestions:

• Map Accessibility section of the Office of Accessibility website, particularly the Design page.
• Working with Colors module in the Office of Accessibility’s Accessible Word Document Training. 
• How to improve non-text contrast: color schemes and interface components.