1.4.11 Non-text Contrast Level AA

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components

Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects

Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

[View on W3C.org]

Testing & Remediation

How to test:
  • Identify each user-interface component (link, button, form control) on the page and:
    • Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
    • Test those contrast indicators in each state.
  • Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
    • Check the contrast of the graphical object against its adjacent colors;
    • If there are multiple colors and/or a gradient, chose the least contrasting area to test;
    • If it passes, move to the next graphical object;
    • If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
    • If there is enough of the graphical object to understand, it passes, else fail.
How to remediate: Update any graphics objects or UI components that do not pass the 3:1 contrast ration against adjacent color(s) so that they do. There are a number of ways to accomplish this depending on the type of graphic or UI element. See the W3C link above for examples. Most of them utilize CSS techniques.

Questions and Answers