Skip to main content

Ensuring Non-Text Contrast for Web Accessibility

This is the first post of my new Astro blog.

The full Astro logo.
The img caption from my first blog post.

Ensuring Non-Text Contrast for Web Accessibility

A11y.Cafe ~

Introduction

Non-text elements, such as user interface components and graphical objects, are integral to the usability and accessibility of web content. The Web Content Accessibility Guidelines (WCAG) 2.2 include specific criteria to ensure that non-text elements have sufficient contrast, making them easily distinguishable for all users, including those with visual impairments. This article will explain these guidelines, their importance, and provide practical examples and best practices.

Why Non-Text Contrast Matters

Adequate contrast for non-text elements helps users identify and interact with different components on a web page, such as buttons, icons, form controls, and visual indicators. Insufficient contrast can make it difficult for users to distinguish these elements, hindering navigation and functionality.

Relevant WCAG 2.2 Guidelines

1.4.11 Non-Text Contrast

Level AA: This criterion requires that visual information used to identify user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors. This includes controls, input fields, and any other interactive elements.

Example:

Ensuring that buttons and other interactive elements are easily distinguishable from their backgrounds.

Incorrect:

<!-- Button with insufficient contrast -->
<button
  style="color: #AAAAAA; background-color: #CCCCCC; border: 1px solid #CCCCCC;"
>
  Submit
</button>

Correct:

<!-- Button with sufficient contrast -->
<button
  style="color: #FFFFFF; background-color: #007BFF; border: 1px solid #0056b3;"
>
  Submit
</button>

In the correct example, the button’s text and background colors have a contrast ratio of at least 3:1, making it more visible and easier to identify.

Best Practices for Ensuring Non-Text Contrast

  1. High Contrast Colors: Use color combinations that provide sufficient contrast for user interface components and graphical objects. Verify contrast ratios using tools like the WebAIM Contrast Checker.
  2. Consistent Design: Maintain consistent color schemes and contrast levels across your website to help users quickly recognize and interact with different elements.
  3. State Indicators: Ensure that focus indicators, hover states, and active states of interactive elements have sufficient contrast to be easily distinguishable.
  4. Accessibility Testing: Conduct regular accessibility testing with users, including those with visual impairments, to ensure that non-text elements are easily distinguishable and usable.

Additional Examples

Form Controls:

Incorrect:

<!-- Input field with insufficient contrast -->
<input
  type="text"
  style="color: #666666; background-color: #EEEEEE; border: 1px solid #CCCCCC;"
  placeholder="Enter your name"
/>

Correct:

<!-- Input field with sufficient contrast -->
<input
  type="text"
  style="color: #000000; background-color: #FFFFFF; border: 1px solid #000000;"
  placeholder="Enter your name"
/>

Icons and Graphical Objects:

Incorrect:

<!-- Icon with insufficient contrast -->
<i class="fas fa-info-circle" style="color: #CCCCCC;"></i>

Correct:

<!-- Icon with sufficient contrast -->
<i class="fas fa-info-circle" style="color: #007BFF;"></i>

Using CSS for Non-Text Contrast

Use CSS to ensure that non-text elements have sufficient contrast against their backgrounds.

Example:

/* CSS for high contrast button */
.high-contrast-button {
  color: #ffffff; /* White text */
  background-color: #007bff; /* Blue background */
  border: 1px solid #0056b3; /* Darker blue border */
  padding: 10px 20px;
  border-radius: 5px;
}

/* CSS for high contrast input field */
.high-contrast-input {
  color: #000000; /* Black text */
  background-color: #ffffff; /* White background */
  border: 1px solid #000000; /* Black border */
  padding: 5px;
}
<!-- Applying the high contrast classes -->
<button class="high-contrast-button">Submit</button>
<input type="text" class="high-contrast-input" placeholder="Enter your name" />

Useful Resources

For more detailed guidance on ensuring non-text contrast and other accessibility best practices, explore the following resources:

By following these guidelines and best practices, you can ensure that non-text elements in your web content are accessible and distinguishable to all users, providing a better overall user experience.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue