Users with moderately low vision or with colour deficiencies that affect contrast to a minor degree can have issues reading and accessing certiani parts of our platform.
If contrast is good, they they are more likely to access our content without requiring additional assistive technologies.
Good contrast means there is sufficient contrast between foreground and background colours, particularly between text and its background but also applicable to the keys and labels of graphs.
This is a ratio of 4.5:1 for text 18pt or less, and 3:1 for text larger than 18pt or text that is bold and larger than 14pt.
All colour combinations must pass the WCAG 2.0 AA-compliant colour contrast check. I love the Contrast for Mac OSX to check contrast quickly.
Click and touch target areaClick and touch targets must be large enough to touch accurately.
For pointer devices
Recommended click area should be a minimum of 42px square. On any clickable elements, such as Icons, buttons and links.
For icons that are 16px to 32px in size, we can do this by creating an opaque mask that is 42px and overlaying it.
Icons should be spaced at least 16px apart.
For touch devices
All users benefit from larger touch targets. For young users, and users with motor and/or vision impairments, this is even more important as accuracy can be difficult.
Content touch targets must be large enough to read and have a large enough interactive target area to tap comfortably with one finger.
The recommended size of touch targets is 7-10mm. This size is equivalent to the smallest average finger. An interactive target area should be at least 7 x 7 mm.
If not, it must be no smaller than 5 x 5 mm inside an exclusion zone of at least 7 x 7 mm that does not overlap with any other touch target. The recommendation is to provide a bigger touch target where possible.
Sometimes text that is big enough to read is too small to touch. For example, a linked letter in an A-Z listing would be too fine to touch accurately and should be placed in a linked container to increase the target area.
Hover states and hidden information
On desktop, hover states are ubiquitous, but as we use these across the app, we need to keep in mind that they do not work on tablets. This can be disastrous for users.
Hints, titles and other tooltip-like text should provide additional explanatory content rather than repeat the main alternative for an element, object, or image. This prevents duplication of information for screen reader users.
Minimum text size
- All content must have a minimum size of 12px
- All core content must have a minimum size of 14px