Go Back
When it comes to web design, complex design does not necessarily mean well-designed. Not all users are able to view, hear, or navigate intricate & elaborate patterns, which means that complexity can be exclusionary to many. For instance, 4.5% of the population is color blind, 3% of eCommerce users require a screen reader, and 3.1% of users have a hearing impairment. For a site with 10,000 monthly visitors, that means 450 users need text colors to be adequately contrasted, 300 users need content to be straightforward enough for a screen reader to parse, and 310 require captions or transcripts for audio content.
Designing with accessibility in mind means that all users can experience your website, and increased readability, scannability, and hierarchy means that all users, not just those with accessibility needs, can benefit.
Roboboogie’s quick and easy accessibility checklist for designers is a great starting point to reference while creating web experiences.
Color for Accessibility
Considering accessible color options not only accommodates color-blind users who can’t differentiate between colors as visual indicators but ensures that low-vision users can read, navigate and experience everything on the screen.
- Contrast between background color and text color is at least 4.5:1 for small text and 3:1 for large (>24px) text.
- Use WebAIM Contrast Checker or the Stark plugin to check color contrast ratios.
- Bonus points if your brand’s colors were chosen with contrast ratios in mind!
- Color is not used as the sole method of conveying content or distinguishing visual elements.
- E.g. text links in copy are not only a different color than the body copy, but also underlined.
- Color contrast ratio for graphical objects is 3:1 (icons, buttons, form components, etc)
- Contrast between background color and text color is at least 4.5:1 for small text and 3:1 for large (>24px) text.
- Use WebAIM Contrast Checker or the Stark plugin to check color contrast ratios.
- Bonus points if your brand’s colors were chosen with contrast ratios in mind!
- Color is not used as the sole method of conveying content or distinguishing visual elements.
- E.g. text links in copy are not only a different color than the body copy, but also underlined.
- Color contrast ratio for graphical objects is 3:1 (icons, buttons, form components, etc)
Text
Text at readable sizes with a clear hierarchy between headers and body copy means that low-vision users are able to read and understand the information presented. Keeping text out of images means that screen readers for blind users can accurately convey information.
- Body copy is 16px at minimum, and text hierarchy has clear size/weight differences between levels.
- Only about 4 different levels are necessary.
- Sans serif is used for body copy.
- Serif fonts can make it harder to differentiate letters, so they should only be used for larger headings if at all.
- Some great serif fonts to get started with include Montserrat, Roboto, Open Sans, PT Sans, Work Sans, and Urbanist.
- Buttons and links should be descriptive on what action will be performed if clicked on.
- E.g. “Download Resources PDF” instead of “Click here”
- Error states should be descriptive in conveying what the error is and how to fix it
- Text is not part of an image if the text can be conveyed the same way outside of an image
Content for Accessibility
Clear hierarchy of content, consistency between pages, and understanding of where the user is on the site all lead to a better understanding of how to navigate, how to scan for information, and allows screen readers to easily parse the page content.
- There is clear content hierarchy, including descriptive headlines and scannable body paragraphs
- Interactions are consistent across pages
- Navigation items do not change placement
- Text links/buttons/form fields “act” the same in regards to hovering, animations, and outcome
- There are no unneeded demographic form fields (August special, not included in WCAG standards)
- Users can be weary of disclosing information historically discriminated against
- It’s not usually possible to include all demographic options, and lack of options can be unnecessarily alienating and tiresome for those it affects
- An indication of the current page location is provided if a web page is part of a sequence of pages or within a complex site structure
- Audio or video media includes captions or transcripts
Responsiveness for Accessibility
Not everyone has access to use the web on a desktop computer, so it’s important to make sure that mobile users are getting the same experience that users on desktop are seeing.
- There is no loss of content or functionality at a screen width of 320px
- Interactive elements are not too small on mobile devices
- 44px by 44px as a general guideline
- Text is not less than 16px on mobile devices
- Input text within form fields at less than 16px causes mobile browsers to zoom in automatically
We hope our checklist helps you create intuitive, accessible websites that all users can experience regardless of disability, device, or other differences. Download the checklist as a PDF and be sure to check out further resources and tools for designing and developing with accessibility in mind.
Resources
WCAG Checklist (AA and AAA guidelines, helpful for designers and developers)
WebAIM Contrast CheckerStark design plugin (color contrast checker is part of free functionality)
