👋 Hi, this is a demo!
Cancer Research UK | Starling
Guidelines

Design

Make sure there is enough colour contrast between text and its background (minimum 4.5 to 1)

If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1 (though, worth noting that this is a little fuzzy because numbered sizes aren’t always reflective of the visual size type). Pair values of Colours together (not only hues) to increase contrast. Be especially careful of text over images. 

Don't indicate important information using colour alone

There should be another indicator (such as icons to accompany colour coding, or an underline on linked text) so that people who cannot easily distinguish colours will be able to understand and use your content. 

Keep heading styles consistent

Use typography and styles to provide meaning and structure. 

Present errors clearly

Present errors clearly, use an element in addition to Colour and tie to the right field.  Explain the correct format of how something needs to be input 

Don't rely on sensory characteristics as the sole indicator for understanding and operating content 

You should not rely solely on images, shape, size, visual location, orientation, or sound to indicate important instructions for operating or understanding content (ex. “See the image above”). Instead, use a combination of positioning, colour, and labelling to identify content.

Design focus states to help users navigate and understand where they are 

Your designs should never actively hide focus states. When people use the keyboard to navigate, your product should include highly visible focus states. 

Help users understand inputs, and help them avoid and correct mistakes

Labels should never completely go away when the focus is inside of an input. Users should always have clear instructions on what they should be inputting. Put error messages in text that explain the error and how to fix the error. Never rely solely on colour to indicate errors. 

If an experience cannot be made accessible, create another route for users to get that information 

It can be difficult to make certain components into accessible experiences. In those cases, consider creating an additional screen reader-friendly experience, or at the very least, describe the experience to users. 

Be as consistent and clear as possible in layout and copy 

Be consistent across functions, placement, and labelling. Components with the same functionality should work and be identified consistently. Use section headings to organize content. Be clear in writing; avoid jargon and idioms. 

Make sure interactions are well-separated and easy to hit 

Buttons should have a minimum height, width of 48px and have enough space between them. 

When doing research, include users who have disabilities or use assistive technologies 

You may need to pay additional expenses to help participants take part in research - this might include a helper, taxis, or someone to help with communication like a sign language interpreter 

Learn more about recruiting participants for user research. 

During discovery you should be learning how people with visual, hearing, motor and cognitive impairments might use your service, as well as the barriers they face.  You can do this even before you do any user research by: 

  • Developing a clear understanding of what accessibility means as you explore the problem you’re trying to solve 

  • Trying to understand the range of range of abilities users can have - our videos in the resources section should help

  • Reading and utilising our persona profiles of users with disabilities to understand how accessibility affects individual users 

Â