Color Contrast Non-Text

Things to check for:

The following should have at least a contrast ratio of 3:1:

  • Input fields border or a background color and the page background.
  • Items receiving focus with color before receiving focus OR have an indicator besides color (like text underlining or additional shadow).
  • Icons and other informational images with the page background
  • Images inside an icon and the icon background color

Example Form

The border around the "email" input field doesn't have a contrast ratio of at least 3:1.

When Button 2 receives focus, the change in color doesn't have a contrast ratio of at least 3:1 with the color before receiving focus.

Button 2 does not have a secondary indicator, like a shadow, to assist the user from knowing button 2 has focus.


Info graphics

Idea 1

Idea 2

Idea 2 icon background does not have a contrast ratio of 3:1 wth the page background.

The light bulb icon in Idea 2 does not have a contrast ratio of 3:1 wth the icon background.

Idea 3