Usability standards - Style guide

Tap targets

Recommended tap targets (interactive areas around visual elements) are 48px x 48px.

Tap targets should have the recommended value in at least one of its dimensions (height or width), though the lesser dimension should not be smaller than 16px. If possible, it is still recommended to have an invisible tap target around smaller elements that is at least 48px wide by 48px high.

Utilize the Shape system to indicate interactive elements.

Color contrast

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The WCAG description roughly translates to 18.5px bold and 24px. Webaim contrast checker
Link text must have a 3:1 contrast ratio with surrounding body text. Webaim

For recommended accessible foreground and background color combinations, please refer to our Color Contrast page.

Text resizing

Layouts and elements should support resizing of text up to 200%. This means that all containers and elements surrounding text should expand and allow for larger lines of text and taller areas due to text wrapping. Utilizing relative values for padding and margins helps this as they will then adapt to changes in font-size.

Design for the following up to 200% resizing:

Content and elements are still readable and usable
Text content does not get cut off
No content overlaps
No horizontal scrolling is forced

Body copy line lengths

Recommended line length is a width of 30em, which averages out to roughly 58-60 characters, or 8-12 words, per line:

480px for 16px font-size text
540px for 18px font-size text

Using ems allows for line-length to change relative to font-size, for use in longer and larger headlines or larger body copy.

Reference: Baymard Institute: Readability: the Optimal Line Length