Understanding Success Criterion 1.4.11: Non-text Contrast

Understanding Success Criterion 1.4.11 Non-text Contrast

Ensure that meaningful graphics and active user interface components are easily distinguishable by maintaining a contrast ratio of at least 3:1 against adjacent colors

Official Requirements

Success Criterion 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):

1. 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;

2. Graphical Objects

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

Why is it required?

Although all users benefit from a good contrast ratio between components and colors surrounding them. This criterion is especially helpful for users with visual impairments as a 3:1 contrast ratio helps them to distinguish user interface components such as buttons and controls. 

How do we fix it?

  • Ensure that user interface components and graphics( such as icons, graphs, etc.) have a contrast ratio of at least 3:1 to the color surrounding it
  • Maintain the contrast ratio criteria even when controls change color
  • Ensure that the error indicator in form fields also meets the contrast ratio criteria 

Are there any exceptions?

This success criterion has a three exceptions

  • When the user interface components are inactive
  • When the graphics are considered essential (such as brand logos, flags, etc)
  • If the graphics are representations of other things such as heat map or a screenshot of the website or diagrams of medical information
Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media


Related Blogs

What is AEL Accessibility Checker (AAC)

What is AEL Accessibility Checker (AAC)?

Wondering how Accessible your website is to everyone? With AEL Accessibility Checker (AAC), you can quickly evaluate your web page against automated Accessibility violations.  AAC

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content