✎ Technique: Non-text contrast

The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.

Examples

✗ Bad example: icons.

The figure inside of the icon must have good contrast with the icon background. The images below show a calendar icon with a contrast ratio of only 2.2:

Images of a calendar icon with a contrast ratio of only 2.2

✓ Good example: icons.

The images below show a calendar icon with a contrast ratio of 5.3:

Images of a calendar icon with a contrast ratio of only 5.1

✗ Bad example: buttons.

Buttons with no background color, referred to as ghost buttons, have become popular. These buttons usually have text (which must meet 1.4.3 Contrast Minimum) but the button outline against the background must also meet the contrast requirement. If the button is solid, the button color against the background needs proper contrast. This button has a grey outline with the word “Menu” against a white background. Its contrast ratio is only 1.6, too low:

Button with contrast ratio of 1.6

✓ Good example: buttons.

The images below show a button with a contrast ratio of 9.0:

Button with contrast ratio of 9.0

Many sites use a change in color to identify the selected or focused element. This can violate 1.4.1 Use of color. But, if the color change meets the 3:1 contrast ratio of this success criterion, it is acceptable.

(Source: Knowbility article on contrast)