Using Color Thoughtfully

What does it mean to use color carefully?

Color is a great way to make a webpage or document more engaging and to draw attention to important information, but color alone should never be the only way information is distributed. The web development team has worked hard to ensure the university website complies with WCAG 2.1 AA color standards, however, these requirements also apply to Word documents, Adobe PDFs, and other third-party vendor platforms.

To make content accessible, all users must be able to perceive, operate, and understand its elements. Relying on color alone creates barriers because: 

• Screen readers don’t announce colors to their users.
• Users with color blindness may not be able to distinguish between certain colors.
• Anyone — especially those with low vision or reduced contrast sensitivity — may struggle to read text if there isn’t enough contrast between the text and its background.

If understanding a page or document requires seeing specific colors or discerning low-contrast text, it’s not fully accessible.

How do we share information without depending on color?

When you use color to highlight information, always provide another cue — like text, labels, or symbols — so everyone can understand your content.

Example 1: Race results

If you wanted to show which participants finished a 5K using only color, you might write:

• Amanda
• Sean
• Chris

But this would be inaccessible. Adding a note makes it clear for everyone:

Three runners entered the race but only one (listed in red) finished the race:  

• Amanda
• Sean (finished the race)
• Chris

Example 2: Project status

If you color-code projects as green/on time, yellow/at risk, or red/late, add a label too:

• Project A (on time)
• Project B (at risk)
• Project C (late)

This simple step ensures your information works for all users.

Emphasis

Although bold styles are not typically indicated by screen readers, they are considered acceptable when not relying on colors.  A bold style can create emphasis for those who may have color blindness and do not need to solely rely on a screen reader.  Additionally, a strikethrough is another visual indicator that could be used to support words such as cancelled jobs or deleted files. Some screen readers settings can be changed to indicate code for items like bold and strikethrough.

Examples

Examples of using a bold style for emphasis

• Do not enter the building after 5pm without your keycard.
• To access the portal you must have a login from IT.

Examples of using a strikethrough to indicate something has been cancelled/removed/deleted, etc.

• Project status: Cancelled
• The sensitive files have been deleted.

What is color contrast?

Think about black text on a navy background, or a yellow icon on a white map. Without even seeing it, you can probably guess it would be difficult — or impossible — to read.

To be legible, text must have enough contrast with its background:

• For small text (below 18 pt), the contrast ratio must be at least 4.5:1.
• For large text (18 pt or bold 14 pt and above), the minimum is 3:1.
• For comparison, black text on a white background has a ratio of 21:1.

Also, regardless of color, text should never be smaller than 12 pt.

While UMass Dartmouth website templates help ensure good color choices for on-screen text, you’re responsible for maintaining good contrast in images, PDFs, posters, and other uploaded content.

Best practice: Use clear text and background combinations, and run an accessibility check on any document or image before you post it.

More info