The most common design elements to check for are color contrast between text / background and the meaning of color to give information. But these aren’t the only things to take into consideration to improve your design.
Here are a few major issues to address. At the end of the page you’ll find links to good resources with more examples and solutions.
Color contrast
Check the color contrast ratio between text and it’s background. The rules in WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2 AA guidelines are: Color contrast ratio between text and background must be 4.5 or more for normal text and 3.1 or more for text of at least 24 pixels or 19 pixels bold.
There are many tools to calculate this easily, see Color contrast checkers.
Note: Logos and logotype are frequently exceptions to accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.
Not by color alone
- Don’t depend on color for meaning – it’s fine to use color, as long as that isn’t the only identifying characteristic
- Links in text must stand out as links, make them underlined
- Error messages in forms: don’t indicate errors only using text color, borders, or backgrounds; include clear text messages or icons, as well.
Color blindness check tools:
- Look at your design only in grey scale colors, remove all color. Can you still understand it?
- Sim Daltonism tool for color blindness check.
- Coblis – Color Blindness Simulator
Not by icon alone
Add text with icons, if they are an essential part of the functionality. Make sure interactive elements such as navigation menus are labelled correctly. Not every user understands the icons (hamburgers) that are obvious to you.
For users with dyslexia
- No large blocks of text, e.g. use short paragraphs, headings and lists to divide the information
- Uppercase font is harder to read
- Handwritten font is harder to read
- A font size of 16 pixels minimum, is best for most devices
- Make the line height not too small
For users with limited vision
Keep together what belongs together: place related links or controls near each other.
Some people don’t have an overview of everything that’s on a page, like people with glaucoma. Don’t make them search for a submit button that’s on the bottom right, while the input fields is on the top left, for example.
Make the order of things logical, most users read from top to bottom. For example, do not put required check boxes below the submit button in a form.
For users with an attention disorder
- Users must be able to pause animations, or the animations must automatically stop after 3 seconds
- Avoid using too many elements that distract the user from reading the text or using the navigation.
Resources
- Section Use of color in this handbook
- Inclusive Components
- Inclusive Design Patterns – Heydon Pickering
- Inclusive Design Checklist – Heydon Pickering
- Web Accessibility for Designers
- Accessible design: a process
- 7 Things Every Designer Needs to Know about Accessibility – Jesse Hausler
- Tips for Getting Started Designing for Web Accessibility – W3C
- Writing accessible content – Sami Keijonen
- 6 Principles Of Visual Accessibility Design – Jenna Erickson
- Designing for Accessibility, Step 1: Colour Contrast – Neil Shankar
- Accessible Design – Maja Benke (presentation)
- Accessibility for everyone – Laura Kalbag (book)
- WebAIM: on fonts
- Pennsylvania State University: about Font Face
