1.4.11: Non-text Contrast

The Non-text Contrast guideline requires that graphical elements essential for understanding content and interacting with it must have a contrast ratio of at least 3:1 against adjacent colors. This applies to UI components and graphical objects such as icons, buttons, and borders.

Importance of 1.4.11: Non-text Contrast Success Criterion

Non-text contrast is vital for ensuring that users with visual impairments or color blindness can perceive and interact with essential graphical elements on a webpage. It enhances usability by making interactive components and informative graphics more discernible, thereby improving the overall user experience and accessibility.

Primary Use Cases and Requirements Under Guideline 1.4.11: Non-text Contrast (Level AA)

Buttons and Icons

Scenario: Users need to easily identify buttons and icons, especially those with visual impairments.

Example: A submit button on a form that clearly stands out from the background.

Implementation:


.submit-button {
    background-color: #005a9c; /* Dark blue */
    color: #ffffff; /* White */
}

Form Fields

Scenario: Users must be able to distinguish form fields and their boundaries.

Example: Input fields with borders that are clearly visible against the background.

Implementation:


.form-field {
    border: 2px solid #333333; /* Dark gray border */
    background-color: #ffffff; /* White background */
}

Interactive Elements

Scenario: Users need to perceive interactive elements like links and buttons to navigate effectively.

Example: A navigation bar where the links are clearly differentiated from the background.

Implementation:


.nav-link {
    color: #005a9c; /* Dark blue */
    background-color: #e0e0e0; /* Light gray */
}

Graphical Objects

Scenario: Users need to understand information presented through graphical objects like charts and diagrams.

Example: A pie chart with segments that have distinct colors and borders for clear differentiation.

Implementation:


.chart-segment {
    stroke: #000000; /* Black border */
    fill: #ffcc00; /* Yellow fill */
}