Digital Accessibility: Color Usage

Overview

Color contrast is an essential aspect of digital accessibility. Ensuring proper color contrast helps people with visual impairments, including low vision and color blindness, to read and engage with content effectively. By following best practices for color contrast, you can make your digital materials more inclusive and accessible.

Video Training

Video Link: Digital Accessibility: Color Usage

Video Resources

Step-By-Step Guide

Understanding When to Consider Color Contrast

Color contrast is an important factor in digital accessibility across multiple platforms, including:

  • Websites (WordPress, Mines pages): Ensures text and visuals are readable for users with visual impairments.
  • Canvas (Course Modules, Assignments, Pages): Helps students with disabilities access course content.
  • Documents (Microsoft Word, Google Docs, PDFs): Ensures readable text in reports, presentations, and learning materials.
  • Social Media (Facebook, Instagram, Twitter, LinkedIn): Improves text visibility in posts and graphics.
  • Email (Outlook, Gmail): Increases readability in newsletters and promotional materials.

Understanding Color Contrast Ratios

Color contrast refers to the difference in brightness and hue between text and its background. This is measured in a contrast ratio, where higher ratios indicate better visibility.

According to Web Content Accessibility Guidelines (WCAG):

  • The minimum acceptable contrast ratio for standard text is 4.5:1.
  • Larger text (14pt bold or 18pt regular) requires a minimum contrast ratio of 3:1.
  • A contrast ratio of 7:1 or higher meets AAA standards for enhanced accessibility.

Examples of Color Contrast Ratios:

Text Color

Background Color

Contrast Ratio

Accessibility Status

Light Gray

White

1.6:1

Not Accessible

Yellow

Blue-Gray

2.5:1

Not Accessible

Red

White

4.0:1

Nearly Accessible

Dark Gray

White

7.45:1

Accessible

White

Dark Blue

13.0:1

Accessible

Using colors with low contrast can make text difficult to read, especially for individuals with visual impairments.

How to Check and Improve Color Contrast

You can check color contrast using online tools such as:

  • WebAIM Color Contrast Checker

Steps to Use a Contrast Checker:

  1. Open the contrast checker tool.
  2. Enter the foreground (text) color and background color using hexadecimal values.
  3. Review the contrast ratio result.
  4. Adjust colors as needed to meet WCAG standards.

Example:

  • Mines Dark Blue (#21314D) on White (#FFFFFF) → 13.03:1 (Highly Accessible)
  • Blaster Blue (#09396c) on Light Gray (#AEB3B8) → 5.48:1 (Partially Accessible)

If your colors do not meet accessibility standards, consider adjusting text or background shades to increase contrast.

Using Mines-Approved Colors

Mines provides branding guidelines with approved colors. To ensure accessibility, check the contrast of Mines colors by:

  1. Finding the hexadecimal value of the Mines-approved color.
  2. Inputting the color into a contrast checker.
  3. Testing different text and background combinations.
  4. Ensuring contrast meets at least AA standards (preferably AAA).

Example:

  • Mines Dark Blue on White: Passes AA & AAA.
  • Blaster Blue on Light Gray: Passes AA but not AAA.

While AAA compliance is ideal, AA compliance is still acceptable for most cases.

Avoiding Color Alone to Convey Meaning

Using color alone to indicate important information can create accessibility barriers. Instead, use additional indicators such as:

  • Text labels (e.g., "Available" and "Unavailable" instead of only using colors like green and black).
  • Icons (e.g., checkmarks or "X" symbols).
  • Patterns or underlines to differentiate elements visually.

For example, instead of using green text to indicate availability and black text to indicate unavailability, use text descriptions or symbols to ensure accessibility for all users.

Best Practices

  • Use high-contrast color combinations to enhance readability.
  • Check contrast ratios using a contrast checker.
  • Ensure Mines branding colors meet accessibility standards.
  • Do not use color alone to convey meaning—add text labels or symbols.
  • Prioritize WCAG AA compliance (AAA when possible).

Support and Resources

If you have questions or need assistance, Mines IT is here to help.

  • Call us: 303-278-HELP (4357)
  • Visit the IT Service Desk: CTLM 156
  • Explore more resources on accessibility: Mines IT Accessibility Guide

Ensuring proper color contrast is a small but powerful step in making digital content more inclusive. Taking the time to check and adjust your color choices will enhance the accessibility of your materials for all users.

 

Print Article