Understanding WCAG SC 1.4.11 Non-text Contrast
Version and Level: 2.1/2.2 (Level AA)

Success Criterion 1.4.11 Non-text Contrast requires that the visual presentation of user interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors. This ensures that users with low vision can easily identify and interact with these elements.

Benefits:

  1. Improved Navigation for Low Vision Users: Ensures that users can distinguish active user interface components and their states.
  2. Enhanced Data Interpretation: Makes graphical objects like charts and graphs easier to understand for users with visual impairments.
  3. Better User Experience: Ensures that all users, regardless of their visual abilities, can navigate and interpret content effectively.

Main Objective:

To ensure that user interface components and graphical objects have sufficient contrast, it's essential to consider the borders: those located inside the element (boundary) should contrast with the inner part of the interactive component, while those outside of the element (outline, for example) should contrast with the adjacent outside background color. This ensures they are easily identifiable and usable for users with low vision. Additionally, we must maintain contrast in specific states such as when the element is in focus or selected, while still compliant with SC 1.4.1, Use of color.

Best Practices:

  • Ensure contrast for hit-areas and focus indicators: Ensure hit-areas and focus indicators have a 3:1 contrast ratio with their inner or outer background, depending on the border’s or outline’s placement.

  • Ensure contrast for form element states: Ensure the checked/unchecked states of form elements meet the 3:1 ratio against their adjacent color.

  • Ensure graph and chart contrast: Ensure parts of graphs and charts where color is the only way to decipher information meet the 3:1 contrast ratio.

  • Define color combinations in style guides: Choose and define appropriate color combinations for UI elements and graphical objects in style guides and design documents to avoid retrofitting.

  • Ensure contrast in pie charts: In pie charts, where color is the primary means of conveying information without additional text indicators about the percentage or quantity of each segment, ensure each segment contrasts sufficiently with its adjacent segments. A best practice is to create spaces between the segments (e.g., white spaces) to ensure contrast between each segment and the space, rather than relying solely on contrast between individual segments. This practice enhances clarity and accessibility for users with low vision or color vision deficiencies.

Examples & Explanation:

Example: A webpage includes a form with elements that change appearance when focused.

What Should Be Avoided

HTML/CSS

              <style>
                input {     
                  border: 1px solid #ccc;
                }
              
                form {    
                  background-color: #fff; /* Define the background color of the form */
                }
              </style>
              
              <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
              </form>

Explanation:The current implementation is a failure as the border color : #ccc does not contrast with the adjacent background color of the form: #fff, constituting a ratio which is less than 3:1.

What Should Be Done

HTML/CSS

              <style>
                input {
                  border: 1px solid #000; /* Correct border color for better contrast */
                }
              
                form {
                  background-color: #fff; /* Define the background color of the form */
                }
              </style>
              
              <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
              </form>

Explanation:The border color of the input field has been adjusted to black (#000) for better contrast with the white background color of the form. This ensures a sufficient color contrast ratio between the border and the adjacent background color which is greater than 3:1.

*More non-text contrast examples can be found at the following link: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html .

Next Up

Enhance your understanding with SC 1.4.12 - Text Spacing. Learn to ensure text spacing is accessible for all users.

Go to SC 1.4.12