Ensure Sufficient Contrast for UI Components and Graphical Objects

Disabilities Affected: Visual

Success Criterion: 1.4.11

Level: AA

The visual presentation of user interface components (like input borders, checkbox/radio button boundaries) and graphical objects (like icons, important parts of charts/graphs) must have a contrast ratio of at least 3:1 against adjacent colors. Exceptions exist for inactive components or where a specific presentation is essential.

Why It Matters

Users with low vision may have difficulty perceiving UI components or understanding graphics if they don’t have sufficient contrast with their surroundings. This applies not just to text (covered by 1.4.3) but to the visual boundaries and key graphical elements needed to understand and operate the interface. For example, a light gray input border on a white background might be invisible to some users.

Fixing the Issue

Ensure that visual boundaries of active UI controls (input fields, buttons, checkboxes, sliders) have at least 3:1 contrast with their adjacent background. For graphical objects like icons or charts, ensure the parts needed to understand the content (e.g., chart lines/bars, icon shape) have 3:1 contrast with adjacent colors. Use contrast checking tools that can measure color pairs. Pay attention to default browser styles (which often meet this) and custom styles, especially focus indicators (which also need 3:1 contrast).

Good Code Example

CSS ensuring sufficient contrast for input borders and an icon:

Markup
Preview

<style>
  input[type="text"] {
    /* Dark gray border (#767676) on white background (#FFFFFF) */
    /* Contrast ratio is ~3.03:1 - Meets minimum */
    border: 1px solid #767676;
    padding: 5px;
  }
  input[type="text"]:focus {
    /* Blue border (#0000FF) on white (#FFFFFF) is high contrast */
    border: 2px solid blue;
    outline: none; /* Remove default outline if custom border is clear */
  }

  .icon-checkmark {
     display: inline-block;
     width: 1em;
     height: 1em;
     /* Dark green checkmark (#006400) on light gray background (#EEEEEE) */
     /* Contrast is ~4.9:1 - Meets minimum */
     color: #006400; /* Color of the checkmark itself */
     background-color: #EEEEEE; /* Background adjacent to the icon */
     /* Use SVG or font icon for better results */
  }
  .icon-checkmark::before { content: '✔'; }
</style>

<label for="myInput">Input:</label>
<input type="text" id="myInput">
<span class="icon-checkmark" aria-hidden="true"></span>

Input:

Bad Code Example

Input border and icon with insufficient contrast:

Markup
Preview

<style>
  input[type="text"].low-contrast {
    /* Very light gray border (#CCCCCC) on white (#FFFFFF) */
    /* Contrast ratio is ~1.45:1 - Fails */
    border: 1px solid #CCCCCC;
    padding: 5px;
  }

  .icon-warning-low-contrast {
     /* Yellow icon (#FFFF00) on white background (#FFFFFF) */
     /* Contrast ratio is ~1.07:1 - Fails */
     color: #FFFF00;
     background-color: #FFFFFF;
  }
   .icon-warning-low-contrast::before { content: '⚠'; }
</style>

<label for="badInput">Input:</label>
<input type="text" id="badInput" class="low-contrast">
<span class="icon-warning-low-contrast" aria-hidden="true"></span>

Input:

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult