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

High contrast graphic elements such as buttons, are a highlight in good user experience. High contrast buttons help functionality, readability, and almost always looks more robust on a page from a design perspective. Buttons with changing states such as sliders and radial buttons should retain their 3:1 contrast ratio in any on/off state. It is important to use pre-existing color bias where applicable. Green means go, yellow means caution and red means stop, depending where you are in the world.

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

Summary Points:

• Check the contrast for all buttons which should fall under a contrast 3:1 ratio

• Low contrast is poor design and poor universal design

• Buttons should be a 44 pixel minimum

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

• Buttons must have text explaining their function in order to qualify as a button, unless a radial button etc.

• Languages, such as German, may require a larger button or a smaller font when needed