SiteLint documentation and guidelines

Text color convey information

Description

This rule ensures that color is not used as the sole means of conveying information. Relying only on color to differentiate or highlight information can exclude users who are color-blind or have visual impairments, as they may not be able to perceive the distinctions. This rule checks for proper use of text, symbols, or additional visual cues alongside color to ensure all users can access the information.

Disabilities impacted

  • Color Blindness: Users with color blindness may not distinguish between certain colors, making it difficult to understand information conveyed solely through color differences.
  • Visual Impairments: Users with low vision or other visual impairments may not be able to perceive color distinctions clearly.
  • Cognitive Disabilities: Users with cognitive disabilities may find it challenging to interpret information if it relies solely on color, especially if the color coding is complex or inconsistent.

Why it matters

Using color as the only method to convey information can create barriers for users who cannot perceive those colors. By providing additional cues, such as text labels, patterns, or symbols, you ensure that all users, regardless of their ability to perceive color, can understand and interact with your content. This practice enhances accessibility and usability, making your web content more inclusive.

Coding problems and solutions

Common coding problems

  • Color-only indicators: using color alone to indicate status, errors, or other information without additional text or symbols.
  • Inconsistent color usage: inconsistent or unclear use of color that fails to provide adequate context or meaning without additional information.
  • Lack of alternative indicators: failure to include alternative indicators, such as text labels or symbols, to convey information.

How to fix it

Include text labels

Ensure that information conveyed through color is also available through text labels.

Incorrect example
<p>Status: <span style="color: green;">●</span></p>
<p>Status: <span style="color: red;">●</span></p>
Correct example
<p>Status: <span style="color: green;">Active</span></p>
<p>Status: <span style="color: red;">Inactive</span></p>

Use symbols or patterns

In addition to color, use symbols or patterns to convey information.

Incorrect example
<p>Password strength: <span style="color: green;">Strong</span></p>
<p>Password strength: <span style="color: red;">Weak</span></p>
Correct example
<p>Password strength: <span style="color: green;">Strong (✔)</span></p>
<p>Password strength: <span style="color: red;">Weak (✘)</span></p>

Provide contextual information

Ensure that any color-coded information is accompanied by contextual information that explains the meaning.

Incorrect example
<div>
    <span style="color: green;">●</span> 
    <span style="color: red;">●</span>
</div>
Correct example
<div>
    <span style="color: green;">✔ In Stock</span>
    <span style="color: red;">✘ Out of Stock</span>
</div>

Known limitations

  • Graphical content: in graphical content like charts or graphs, ensure that color coding is supplemented with patterns, labels, or symbols.
  • Dynamic content: for dynamically generated content, ensure that color coding remains consistent and is supplemented with alternative indicators.
  • User customization: allow users to customize the appearance of color-coded information, such as by adjusting colors or adding symbols.

Resources