Colors & Color Contrast: Enhancing Accessibility Through Design

Why Color Accessibility Matters

Color plays a critical role in making web content visually engaging and effective. However, when colors are not chosen carefully, they can create significant barriers for users with visual impairments, color blindness or other disabilities. At Elon University, we take accessibility seriously by ensuring all colors used on our website meet WCAG 2.1 AA standards for color contrast.

Our CMS is designed to help you make accessible choices by restricting color options to those that have been rigorously tested for accessibility. Circumventing these safeguards, such as by modifying HTML markup, can unintentionally render your content inaccessible.

WCAG Color Contrast Requirements

WCAG (Web Content Accessibility Guidelines) establishes strict criteria for color contrast:

  • Text and Background Contrast: The contrast ratio between text and its background must meet the following thresholds:
    • 4.5:1 for regular text.
    • 3:1 for large text (18pt or larger, or 14pt bold or larger).
  • Non-Text Elements: Graphics, buttons and other essential elements must also meet contrast requirements if their visibility is necessary for understanding the content.

These requirements ensure that all users, including those with low vision or color blindness, can read and interact with content.

Elon University’s Color Management in the CMS

To ensure compliance, our CMS has been modified to provide only pre-approved, accessible color options. When you are presented with the ability to change colors (e.g., for text, buttons or banners), you will see a palette of Elon-branded colors that meet WCAG requirements.

What You Should Know:

  • Custom Colors Are Prohibited: Avoid circumventing the CMS by editing HTML directly to add custom styles and colors. This can violate accessibility standards and create a poor user experience.
  • Why We Restrict Colors: By limiting color options, we guarantee that the website remains consistent with Elon’s branding while also being accessible to all users.

If you feel the provided palette does not meet your needs, contact the Online Communications Team before attempting any workarounds.

Best Practices for Using Colors

  • Be Mindful of Text on Background Images:
    • Placing text on top of background images often leads to poor color contrast, making the text difficult or impossible to read.
    • If you must use a background image, ensure the text is placed on a solid, semi-transparent overlay that meets WCAG contrast requirements. Always test readability.
    • Example of poor practice: White text over a light background image of clouds.
    • Example of good practice: White text on a dark, semi-transparent overlay placed over the image.
  • Use High Contrast for Readability:
    • Ensure that text contrasts strongly with its background, even if it’s part of a banner or graphic. Light text on a dark background (or vice versa) is generally the most readable.
  • Be Mindful of Color Alone:
    • Avoid using color as the sole way to convey information (e.g., “press the green button”). Instead, combine color with labels or other visual indicators.
  • Test for Accessibility:

Considerations & Warnings

  • Custom HTML Modifications: Making manual changes to colors in the HTML editor bypasses Elon’s accessibility safeguards. Even if the colors appear acceptable to you, they may fail WCAG standards or be inaccessible to users with visual impairments.
  • Background Images and Color Contrast: Text over background images is a frequent source of accessibility violations. If an image is essential, use overlays or avoid placing text directly on the image.
  • Graphics with Embedded Text: Avoid embedding text into graphics or images, as it cannot be read by screen readers. Instead, layer text on top of a compliant background within the CMS.
  • Links and Buttons: Ensure that hyperlinks and buttons stand out clearly from their surroundings. Elon’s CMS provides accessible styles for these elements, so avoid creating custom styles.

Final Thoughts on Color Accessibility

Colors and visual design choices have a profound impact on your content’s usability and inclusivity. By using the tools and guidelines built into Elon University’s CMS, you can ensure that your content is accessible, visually appealing and aligned with our brand standards.

If you have questions about color contrast, text on images or any other accessibility-related design choices, contact the Online Communications Team. We’re here to help you make informed, accessible decisions that benefit everyone in our community.