Icon and symbol contrast (icons-and-symbols)

Icons and symbols maintain a contrast ratio of at least 3:1 against their background.


Insufficient icon contrast on gradient:

The phone icon below sits on a vertical gradient. In portions of the gradient (e.g., the mid–lower region), the icon’s color is too similar to the adjacent background and drops below the required 3:1 contrast.

Note: Impossible to automatically test. Requires a human tester or AI to determine if the icon has sufficient contrast against all areas of a gradient or patterned background.


axe detected: none  |  QualWeb detected: none