Texas Tech University

Color & Sensory Cues

Quick Start: What You Need to Know

Visual accessibility ensures content is perceptible to all users, regardless of color blindness, low vision, or screen reader usage. This involves three main areas: not relying on color alone, avoiding sensory-only instructions, and maintaining sufficient color contrast.

Immediate Actions:

  • Ensure text has a contrast ratio of at least 4.5:1 against its background
  • Don't rely on color alone to convey status (e.g., add "Error" text, not just red text)
  • Keep underlines on links within paragraphs to distinguish them without color
  • Avoid instructions like "Click the green button" or "See the menu on the right"
  • Use patterns or direct labels in charts, not just a color legend
  • Check contrast on buttons, navigation bars, and footer links

Why This Matters

Visual impairments are common. Approximately 1 in 12 men have color blindness. Furthermore, users with low vision (due to aging or conditions like glaucoma) struggle to read text that doesn't "pop" against the background.

  • Color Blindness: A user may not see the difference between a green "Go" button and a red "Stop" button if text labels aren't clear.
  • Low Contrast: Gray text on a white background might look invisible to an older user or someone looking at a phone screen in bright sunlight.
  • Blindness: Instructions based on shape ("click the square") or location ("look to the right") are useless to someone using a screen reader.

What to Look For: Detailed Checklist

Visual Cues & Contrast

Text must contrast sufficiently with the background color to be readable.

WCAG AA Standards:

  • Normal Text: 4.5:1 ratio
  • Large Text (18pt+ or 14pt bold): 3:1 ratio
  • UI Components (Input borders, icons): 3:1 ratio

Check: Use the WebAIM Contrast Checker or the WAVE tool to verify your hex codes.

Color should never be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Check: Turn your screen to "Grayscale" (black and white). Can you still identify which form fields have errors? Can you still read the pie chart? If not, you are relying on color alone.

Links embedded in a block of text should be distinguishable by more than just color. The standard, accessible convention is to underline links.

Why? If you remove the underline and make the link blue, a user with low vision or grayscale mode may not see the difference between the blue link text and the black body text.

Avoid instructions that rely on sensory characteristics such as shape, size, visual location, orientation, or sound.

Avoid phrases like:

  • "Click the round button" (What if the CSS fails and it's square?)
  • "Use the menu on the right" (On mobile, it might be at the bottom)
  • "Listen for the beep" (Deaf users won't hear it)

When using data visualizations, use patterns (stripes, dots) in addition to color to distinguish segments. Alternatively, use direct text labels pointing to the data segments so users don't have to rely on a color-coded legend.

Code Examples & Best Practices

Color Contrast

Bad Example: Low Contrast (Fails AA)

This light gray text is very popular in modern design, but it is hard to read.
Ratio: 2.84:1 (FAIL)

Good Example: High Contrast (Passes AA)

By darkening the gray slightly, we meet the requirements and improve readability.
Ratio: 7.0:1 (PASS)

Form Error States

Bad Example: Color only

Here, the only indication of an error is the red text color.

<label>Email Address:</label>
<input type="text" name="email" value="invalid-email">
<span style="color: red;">Invalid email format</span>
A screen reader user hears the text, but a colorblind user might just see dark gray text and not realize it's an urgent warning.

Good Example: Color + Icon/Text

We add an icon (with alt text if it's an image, or hidden if decorative) and strong text.

<label>Email Address:</label>
<input type="text" name="email" value="invalid-email" aria-invalid="true">
<span class="error-msg">
  <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 
  <strong>Error:</strong> Invalid email format
</span>
The word "Error:" makes the status clear to everyone, regardless of color perception. The icon provides a secondary visual cue.

Sensory Instructions

Bad Example: Location based

<p>To contact support, click the link in the <strong>green box on the right</strong>.</p>
If the page is viewed on a phone, the "box on the right" might stack to the bottom. If the user is colorblind, they may not know which box is "green."

Good Example: Content based

<p>To contact support, click the <strong>"Get Help"</strong> button in the sidebar.</p>
This instruction relies on the text label ("Get Help") which is programmatic and readable by all users, regardless of layout changes or color perception.

WCAG 2.1 Success Criteria Summary

The following WCAG 2.1 Level A and AA criteria apply to visual design:

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 for large text (3:1) and incidental text.

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.3.3 Sensory Characteristics Level A

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

Real-World Impact: Why This Matters

The Sunny Day
Low contrast on mobile

A student is walking across campus on a bright, sunny day. They try to check the "Campus Events" page on their phone. The design uses light gray text on a white background because it looks "clean" and "modern" on a designer's high-end monitor.

However, due to the glare from the sun, the low-contrast text completely washes out. The student cannot read the time or location of the event. If the designer had used dark gray or black text (4.5:1 contrast), the content would have remained legible even in difficult lighting conditions.

The "Available" Seat
Buying tickets with Protanopia

A user with Protanopia (red-blindness) tries to buy concert tickets. The seating chart uses Green for available seats and Red for sold-out seats. To him, all the dots look brown.

He clicks multiple seats, getting "Seat Unavailable" errors, before giving up in frustration. If the designer had used an "X" icon for sold-out seats and an Open Circle for available seats, he could have distinguished them instantly without relying on color.

The "Right" Sidebar
Navigating without sight

A blind student is taking a quiz. The instructions say, "Reference the definitions in the box to the right."

However, the screen reader reads the page linearly (top to bottom). The "box to the right" is actually coded at the very bottom of the HTML. By the time the student reaches the definitions, she has already struggled through the questions without the necessary context.

If the instructions had said "Reference the 'Definitions' section," she could have used her screen reader's "List Headings" feature to jump straight to it.

Additional Resources

WCAG Guidelines and Understanding Documents

Testing Tools

Resources

Student Disability Services

Support and Accommodations

Human Resources (ADA)

Workplace accommodations and compliance

Contact Us

Reach out to our accessibility team

Report a Barrier

Encountered an issue? Let us know!

Digital Accessibility

© 2025  Texas Tech University Nov 25, 2025 11:36 AM