Guidelines for Designers

 

Check your colour contrast

The contrast between the text and background should be greater than or equal to 4.5:1 for small text and 3:1 for large text. User interface components, like buttons, should have a contrast ratio of at least 3:1 between adjacent colours. WebAIM’s contrast checker makes this easy to check. Exceptions include logos and text that is part of a disabled control state.

To use text over images, add a solid background behind the text or a dark overlay to the image.

 

Test colour combinations with colour blindness simulators

Colour blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. Simulators such as Color Oracle or Web Disability Simulator allow you to test your colour scheme against common color vision impairments.  

 

Designs must be meaningful without colour

Don’t use colour alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.

 

Use a sans serif font for body copy

Choose a typeface that emphasises clarity and legibility. Some designers recommend sans-serif faces for user interfaces (UI) and serif faces for long-form reading. But these are not hard-and-fast rules.

 

Use a large enough font size for body text so that people can comfortably read

Use at least an effective size of 16px, but this can vary depending on the design of the font.

 

Ensure touch targets are large enough and easy to reach

Make touch targets at least 44px to allow the target to be tapped by the average adult finger pad, which measures 10mm

Make sure you can reach primary actions easily with either right or left thumbs, even on larger phones. Items on the bottom of the screen tend to be easier to reach.

 

Ensure all functionality can be used by keyboard only users

Users should be able to access and move between links, buttons, forms, and other controls using their Tab key and other keystrokes.

Ensure the focus state is visible, following relevant colour contrast guidelines.