Color contrast for non-text content

Maintain sufficient color contrast between interactive components that communicate content or meaning and their backgrounds to ensure important visual information remains visible to all users, including those with visual impairments.

User interface components and graphical objects like icons, toggle switches, sliders/range indicators, progress bars, form elements or data visualizations like graph lines, legend markers or, trend indicators.

For these elements, the contrast ratio between foreground and surrounding colors should be 3:1 or higher. The 3:1 contrast must be measured against adjacent colors, the color(s) immediately surrounding the element that help define its visibility.

The topic “Color contrast of text” provides you with links to Color contrast checkers.

Examples are:

• Meaningful icons, such as the three lines for a menu or an arrow pointing right for the next page.
• An icon that indicates the status of a message, such as an orange triangle for a warning and a green checkmark for success.
• An indicator or line in a graph that shows the trend of a metric.
• A red border indicating that an input field contains errors (in addition to the text error message).

Form elements

The shape of checkboxes and radio buttons should have a contrast ratio of at least 3:1 against their surrounding colors, also for their checked and focus state.

The border of input field and textarea elements should have a contrast ratio of at least 3:1 against their background but also against the inner color of the field. Ensure the focus state is clearly distinguishable from the normal state. For example, by making the border thicker or by using a different color with a higher contrast ratio.

Note: The borders of controls, like buttons, with visible text or clear icons, don’t need to meet color contrast requirements. The existing labels provide sufficient indication of their meaning.

Resources

WCAG Success Criteria for color contrast of non-text content

• 1.4.1 Use of Color (level A).
• 1.4.11 Non-text Contrast (Level AA).

Related pages in this documentation

• Sufficient color contrast of text and UI controls in the Theme guidelines for the WordPress accessibility-ready program.
• Write out an error message in text in Standards and best practice, Forms.

Other resources

• SC 1.4.11 - What does “Non-text Contrast” mean?, by Julia Tol for ProperAccess.
• The Color Contrast Dilemma of Disabled Buttons in Accessible Design, by Salim Ansari.