icon-contrast

Images, infographics, and media elements must have a textual alternative that can be read and announced programmatically.

Who might be affected
Low Vision
Color Blind

Description

Icons, images, and other infographics are sometimes used as buttons, indications on controls, or should convey the user essential information (like a label for text fields, for example). In such cases, the contrast of these graphic elements must be in a contrast ratio of at least 3:1 from their background so that all users can easily distinguish them and interpret their meaning.

Quick Fixes

There is no way to fix this issue quickly through the code. Resolving such an issue will typically require obtaining a replacement image file from the design team that meets the success criteria. Note that the element's contrast should work in both light and dark mode.

How Users Are Affected

Users with low vision or color blindness may have difficulty distinguishing elements with low contrast and, therefore, may have difficulty understanding and operating the interface.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.4.11 Non-text Contrast (AA)

Understanding Non-text Contrast, W3C