2019 Inclusive Design Resources

In the process of designing the diversity and inclusion report this year, we've bookmarked some useful resources that we would like to share and we hope you find them useful.

Accessibility        Readability         Contrast         Impaired vision

Think of web accessibility as you do of usability - the end goal is to make content available to everyone, no matter how perfect their vision or good their tech skills are. Just like following basic usability principles, applying main pillars of accessibility is a matter of consideration and not funds.

Web Content Accessibility Guidelines - Official guide of the W3C Association

axe-Coconut - Experimental Accessibility testing in Chrome DevTools

Accessibility: Web fundamentals - A guide from Google

Web Accessibility Course by Google - A web course that will give you hands-on experience making web applications accessible

A Guide to Interface Design for Older Adults - Best practices and usability guidelines by Sergey Polyuk, Toptal

Content is king so making sure that all is readable and understandable is crucial for your users. The typography, layout and font settings of the page should be optimised not only for all types of screens but for all disabilities as well. 

We’re just temporarily abled: Designing for the future - An article by InVision

7 guidelines for writing accessible microcopy - An article by InVision

Test your document's readability - Methods for testing readability in Microsoft Word and Outlook.

Readable.io - Analyses your writing to give you a “readability score” and highlighting changes which could make it easier to read.

Adysfont - A font family for people with dislexia covering Western, Central and Eastern Europe languages

Dyslexie font - A special font developed and designed for people with dislexia

Noto fonts - The complete font family from Google that is optimised for all people and devices

Dyslexia Style Guide 2018 - A guide for creating dyslexia-friendly content

The contrast between the colors you are using is especially important for actionable elements (links, buttons, etc.) so designers need to make sure that the colors are easily recognizable and distinctive from each other.

Conrast-Ratio - An online tool for contrast ratio calculation

Contrast App - Desktop app for Mac allowing quick access to WCAG color contrast ratios

Material Design Color Guide - Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

NoCoffee vision simulator - A Google Chrome plugin to simulate website accessibility for people with impaired vision

Оur interfaces and entire design systems massively rely on color - to set a mood, create a hierarchy, inform or warn users. Chances are call-to-action buttons and error states pop in your mind everytime you think about how colors are making your design actually work.

Considering colour blindness in UX design - An article by Econsultancy

Textures.js - Free JavaScript library for creating SVG patterns, designed to improve the readability of data visualization

Coblis - Online Color Blindness Simulator

We've compiled a list of examples and articles that can inspire and inform you how companies have applied those principles in their culture and design guidelines.

Capability loss simulation -  Tools to simulate a reduction in vision, hearing and dexterity.

Inclusive Design Toolkit - Toolkit by University of Cambridge

Inclusive Design 24 Video Playlist - A playlist with talks, tutorials and discussions on inclusive design

Diversity in Tech Analysis - Employee breakdown of key technology companies

State of Diversity and Inclusion in U.S. Tech - A report by Atlassian with key findings, challenges, solutions and data from 2018