Visual design accessibility checklist

Users can have different visual abilities.  As a visual expert, your role is to ensure that everyone can see the information display on your app.

1. Color & contrast

Users shall be able to distinguish the content from the background and to understand it with or without colors.

• Use a color contrast tool or a Sketch plugin to create a contrast ratio of at least 4.5:1 between the background and small texts. For large texts (at 14 pt bold/18 pt regular and up), the ratio shall be at least 3:1.
• Don’t use color alone to convey meaning. We recommend designing in black & white first. If needed, you can also use a color blindness simulator.

WCAG 2.1 references:

• 1.4.1 Use of Color
• Guideline 1.4.3 – Contrast (Minimum)

2. Typography

Users shall easily read content.

• Use FOLIO typography.
• Use headlines to communicate hierarchy.
• Maintain a line length that promotes comfortable reading (about 66 characters per line).
• Use shorter lines for captions, marginal text and forms.

FOLIO resource:

• Style: typography

WCAG 2.1 reference:

• 1.4.8 Visual Presentation

3. Graphics & images

Users shall be able to easily understand any graphics, icons and images.

• Make sure all graphics have descriptive captions.
• Avoid using graphics when written content could communicate the same thing.
• Place app icons next to items as visual cues to indicate where items come from.
• Use FOLIO app and button icons. If you need to create icons, follow our guidelines to design accessible icons.

FOLIO resources:

• Component: app icon
• Component: icon button

WCAG 2.1 references:

• 1.1 Text Alternatives (Guideline)
• 1.1.1 Non-text Content
• 1.4.5 Images of Text

4. Data visualizations

Users shall be able to read and understand the meaning of a graph easily.

• Follow data visualization best practices.
• Make sure to use clear labels.
• Make sure to have sufficient contrast between graph colors.
• Add a table of information with the graph.

WCAG 2.1 references:

• 1.1 Text Alternatives (Guideline)
• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 1.4.1 Use of Color

5. Forms

Users shall be able to fill out a form easily.

• Use FOLIO text field component to create forms.
• Provide visual feedback to indicate errors, warning and success.

FOLIO resource:

• Component: text field

WCAG 2.0 references:

• Guideline 3.3 Input Assistance
• 4.1.2 Name, Role, Value

6. Touch targets

Touch targets shall be big enough so anyone could click on them.

• Make sure you can reach primary actions easily with either right or left thumbs, even on larger phones.
• Make touch targets at least 48 px. For icons, you can work with your developer to extend padding past the icon.
• Space out touch targets by 8px or more.

Resources:

• 2.5.5 Touch Target (WCAG 2.1)
• 3.2 Touch Target Size and Spacing | Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile

We recommend using aXe to test your app for accessibility. It is a great Chrome extension that allows you to see at a glance if your app has accessibility issues, where to find them and how to fix them.

Be aware: Since aXe doesn’t support transparency, you might see color contrast issues when using RGBA for instance.To accurately check your color contrast ratio, please use a Sketch plugin or the WCAG contrast checker Chrome extension tool.

Find aXe download link with instruction on how to use it in our Asset section.

If you have questions about your app accessibility level, join us on Slack to talk with experts on our #accessiblity channel.