Color
Design with contrast in mind
The foreground color should stand out against the background to make objects easier to see. To meet technical requirements, we must meet or exceed the following:
- Regular text (smaller than 24px or 19px bold) should have a minimum contrast of 4.5:1
- Large text (24px or 19px bold and larger) should have a minimum contrast of 3:1
- UI components should have a minimum contrast of 3:1
The only exceptions are for decorative text and text on components in inactive states
Be aware of color blindness
Color blindness affects 8% of men and 0.5% of women. Check your designs using the native Figma color picker or the A11y plug-in.
Don't rely on color alone
Color-blind people may not be able to easily perceive or understand content when color is the only means of communication. Support your designs with additional cues, such as underlines, iconography, patterns, or placement on the screen.
Text
Create a pleasurable reading experience
Typography, font size, line length and text decoration can impact the reading experience for many, including people with low vision, dyslexia, and limited literacy skills – some things to consider.
- Fit text within the optimal line length of 45-75 characters per line
- Avoid italics and all caps where possible
- Left-align body text
- Don’t underline words unless it’s a clickable link
- Use bullet points to break up text
Use headings to create a consistent hierarchy
Headings not only help people scan content to find what they need, but they also show the hierarchical structure of the page.
You can think of heading levels as a book with the main title, chapters and subheadings:
- Heading 1: The title of the page – there should only be one per page
- Heading 2: The titles of the various sections on the page – there can be as many as needed
- Heading 3: Subheadings contained within the sections
Don’t skip heading levels
Using correct heading levels helps screen reader users understand the hierarchy of the information on a page. It’s best practice not to skip levels to avoid confusion. For example, don’t jump from a heading level 2 to a heading level 4.
Layout
Patient-Facing Products
For patient-facing products, use ample white space to create a calm, approachable, and easy-to-read interface. White space allows content to breathe visually and reduces clutter, which is crucial for preventing a page from feeling overwhelming. This design approach helps patients easily find and understand key information, ensuring a clear and focused user experience during what can often be a stressful time.
SaaS Products
For data-heavy SaaS products, prioritize a more information-dense layout with less white space. While white space is important, the primary goal here is to present a high volume of data without excessive scrolling or navigation. Reducing the amount of white space helps users view more information at once and make faster comparisons, which is essential for workflows that involve heavy data analysis and manipulation.
Make navigation consistent
Presenting navigation in a familiar and consistent location benefits everyone.
Be aware of text links, site logos, search functionality, and skip links.
Images
Provide text descriptions for all meaningful images
Informational or functional images require a text description to describe the essential information to screen reader users.
Write visually hidden copy at the same time as the visible copy, in the same tone of voice.
Separate text from images
Images of text can lead to visually jarring issues, such as fuzzy text, or be even less inclusive for some users who may not be able to understand the content. Avoid embedding text inside images.
Use inclusive imagery
Make image content inclusive - consider gender, nationality, age, body shape, sexuality, religion, beliefs, disability, etc.
Interaction
Create a logical tab order
Some people may only use a keyboard. Creating a logical tab order means they’ll be able to navigate through all the interactive components easily, and in a logical order.
This is usually from left to right and top to bottom. It helps to annotate designs to show the tab order of more complex pages.
Create large touch targets
Small targets can be difficult to tap or click and problematic for people with fine motor control impairments or tremors. To make things easier, we should ensure size and surrounding spacing meet or exceed the minimum target sizes of:
- Web: 24 x 24 CSS pixels (read about the exceptions to this rule)
- Android: 48 x 48 dp
- iOS: 44 x 44 pt
Provide alternatives to gestures
For some, gestures like swiping, pinching to zoom, or dragging and dropping objects may be complex interactions. Include alternative methods that people can complete with a single tap or click.
Motion
Be careful with motion
Motion may create a delightful experience for some or an unpleasant or debilitating experience for others.
As many as 35% of people over 40 experience occasional or chronic vestibular disorders, and it’s estimated that globally 3.85% of people have active epilepsy.
Here are some things to consider to make our designs more inclusive.
- Make it easy to start, pause, and stop animation or video
- Avoid blinking or flashing images
- Avoid parallax scrolling effects
- Respect accessibility settings. Consider alternative solutions that respect the device settings should parallax or motion be desired.
Test your designs for accessibility
There are some simple checks that every designer can implement in their workflow, such as:
- Check foreground and background colors of text using tools such as the WebAIM contrast checker or A11y - Color Contrast Checker.
- Use plugins, like Stark plugin for Figma or apps, like Sim Daltonism, to check that the designs work for people with various types of color blindness
Hand over accessible design specs
Annotate meaning
A visual representation of a screen only tells part of the story. Using specific annotations for accessibility can help the developer clearly understand both what is and what’s not visualized.
For example:
- What’s the tab order?
- What are the heading levels?
- What’s the alternative text for an image?
- What would a screen reader announce for an icon-only button?
While we don't currently have a standard for these annotations, using a community template can provide guidance.