┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈

High contrast graphic elements such as icons, are the backbone of good universal design. High contrast icons push functionality, readability, and almost always looks more robust on a page. Icon scales such as 16, 32 and 64 pixels have their own unique properties as listed below. Anything at or above 64x64 pixels tend to have a more illustrative appearance as one can add heavy detail. It is important to use pre-existing color bias where applicable. Green means go and red means red, depending where you are in the world.

You can test your contrast ratio here: https://webaim.org/resources/contrastchecker/

Summary Points:

• Check the contrast for all icons including communicative icons, illustrations, arrows, radial buttons and CTA’s

• Low contrast is poor design and poor universal design

• Contrast should be 3:1 ratio

• Contrast should remain constant even in a state change such as a button or radial button

• Icons should not have text explaining their function. This defeats their purpose

• Use pre-existing color bias where applicable such as a stop sign being red