Like what you see? Show some love on Product Hunt
Made by @jesseddy Submit a resource

UI Goodies

Accessibility Guide

A guide to help you understand different accessibility resources and find the right one based on your needs.

See all UI Goodies guides
Visit Streamline icons

Guides are written to help you understand what resources on UI Goodies are best for your specific needs. In honor of Global Accessibility Awareness Day (May 16th, 2019) UI Goodies is launching its first guide: the UI Goodies Accessibility Guide.

Collect, customize and export all your icons with Nucleo App →

Best tools for

Color Blind Simulation

Recommended

Sim Daltonism is an app for iOS and MAC. Once installed, it includes a resize-able window that you can use to place over anything on your computer screen to see what different types of color blindness look like such as deuteranopia, deuteranomaly, protanopia, protanopia, protanomaly (for red-green confusion); tritanopia, and tritanomaly (for yellow-blue confusion) and monochromacy, and partial monochromacy. This app includes a resizable container which allows you to move it around the screen. You can see what a person with normal vision would see, as well as a visually impaired person would see, at the same time. While all the tools here work well, Sim Daltonism is a top pick because of the viewing options, ease, and flexibility of use.

Color Oracle is a free color-blind simulator for Windows, Mac, and Linux and lives in the menu bar. Once installed, Color Oracle applies a full-screen color filter to your screen based on your selection so you can see what different types of color blindness look. Eight percent of all males are affected by color vision impairment. Color vision impairment is linked to the male chromosome, so it rarely afflicts women.

Mentions

Stark is a plugin that works with Adobe XD and Sketch App. It includes a contrast checker and a color-blind simulator. You can use both within each respective app to ensure there is enough contrast between text and background colors and to see what your UI looks like when viewed through the eyes of different types of color blindness.

Best tools for

Building Accessible Color Palettes

Recommended

ColorBox by Lyft offers the most controls and tooling for viewing and adjusting colors to build accessible-friendly color palettes. You just have to see it for yourself! As you are building and adjusting your palette, you can see the indicators for WCAG legibility standards in real-time, which allows you to easily adjust settings to get enough shades to work with white or black text on top.

Accessible color palette builder allows you to enter up to six colors. It will then compare all the colors and communicate which foreground and background colors are accessible-friendly. It does a nice job of breaking down and communicating in human readable text why colors do not work together. While this tool has less controls and real-time operations than ColorBox by Lyft, it does allow you to see different foreground and background color combinations and their WCAG scores.

Mentions

Material Color Tool allows you to select colors and see them on screen in the Android UI. It also creates an accessibility report for you. It’s a great tool for Android specific work!

Colorsafe takes a different and unique approach and allows you to enter background color, and determine the styling of your text. It then generates accessible text colors that meet WCAG Guidelines including the recommended contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold. Put more simply, if you're looking for a green color that will work on white, you can generate many options using Colorsafe.

Best tools for

Learning About Accessibility

Recommended

Rod Dodson teaches accessibility fundamentals on Youtube and it’s called A11ycasts. The goal of A11ycasts is to teach designers and developers how accessibility works all the way down at the platform level, while also demonstrating real-world accessibility problems and solutions to fix them.

Accessible color palette builder allows you to enter up to six colors. It will then compare all the colors and communicate which foreground and background colors are accessible-friendly. It does a nice job of breaking down and communicating in human readable text why colors do not work together. While this tool has less controls and real-time operations than ColorBox by Lyft, it does allow you to see different foreground and background color combinations and their WCAG scores.

The A11Y Project is a site full of great information, including accessibility myths, tips, and tests. A11Y features short, digestible pieces of content and this is important because as they say, accessibility is a complex and difficult topic.

Inclusive Design Principles, made by a small handful of people are intended to give anyone involved in the design and development of websites and applications - designers, user experience professionals, developers, product owners, idea makers, innovators, artists, and thinkers - a broad approach to inclusive design. The site is nicely designed, easy to use and a great example of an accessible-friendly Website.

Accessibility for Teams is an official website of the United States government. It very nicely breaks down accessibility by role (product, content, UX, visual design, and front-end) and includes guides for each. Each guide includes a sub-navigation menu that allows you to navigate to a particular section. So, if you're a visual designer looking for information on data visualizations, that's easy to find.

Mentions

WebAIM includes helpful articles across categories such as The User's Perspective, HTML Accessibility, Rich Media Accessibility, Evaluation, Testing, and Tools, Standards and Laws and Policy, Coordination, and Training. It's pretty dense but with that comes thoroughness.

Best tools for

Checklists for Accessibility

Recommended

Accessibility Guidelines by Vox Media gets top billing because their checklist is organized by role; designer, engineer, project manager, QA, and editorial. This is helpful as in practice, accessibility is everyone's job but not everyone will take responsibility for it or the sole responsibility may fall on one particular role alone.

The 18F Accessibility Guide is geared towards developers but it's recommended as the checklist is organized by matters which are: critical, less critical and minor. So, if you're a developer looking for the most important items to address first, this is a good resource.

The Web Accessibility Checklist by A11Y is a very easy to use checklist (that you can actually check off) that is sectioned off by category. It includes a good overview and is not overwhelming to scan or use in practice. This resource is more useful for developers but helpful for anyone interested in accessibility compliance.

What's nice about the Elsevier Accessibility Checklist is it's a pretty dense checklist but it includes a filtering mechanism to easily target and find the information you're looking for. It does also include some separate information for designers, developers, and testers but these sections, in particular, include less specific information than some of the other resources listed here.

Mentions

The Inclusive Web Design Checklist by Heydon Pickering is a Github-based accessibility checklist. While it’s a comprehensive checklist, it does not include filtering or an easy way to learn more about each item listed. Heydon has done and continues to do a lot of work in the field of accessibility. He’s written about accessiblity frequently for Smashing Magazine many times and has also written a book called "Inclusive Components: The Book."

Best tools for

Accessible Style Guides & Patterns

Recommended

The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation. You can use it as a reference, a base for your own style guide, a base for creating your individual accessible components, or as a base for a new accessible theme.

Inclusive Components by Heydon Pickering is in part blog and also part pattern library. Heydon Pickering goes into beautiful detail about each design component he discusses and also includes helpful code snippets along the way. If you're learning and or want to double-check the work of existing design components, this is a great resource.

Best tools for

Checking Color Contrast

Recommended

Colorable comes highly recommended as it’s the best Web-based tool for comparing and adjusting foreground and background colors quickly to meet accessibility standards. It’s a great tool to use with other color palette building tools as sometimes you need to change one shade in the palette to work with white or black text on top. Colorable also includes controls for adjusting the hue, saturation, and lightness.

Color Review offers an easy way to check a foreground color on a background color for accessibility. It also includes a slider for the complete spectrum of colors which you can easily drag. As you do this, the text and illustration on the page change in real-time offering insight into how the colors really look on screen.

Stark is a plugin that works with Adobe XD and Sketch App. It includes a contrast checker and a color-blind simulator. You can use both within each respective app to ensure there is enough contrast between text and background colors and to see what your UI looks like when viewed through the eyes of different types of color blindness.

Mentions

Contrast Grid lets you test many (many) foreground and background color combinations for compliance with WCAG 2.0 minimum contrast. It’s a powerful if not overwhelming way to check color combinations, but it works!

Accessible Brand Colors is another tool that lets you compare multiple foregrounds and background color combinations for compliance with WCAG standards. This resource delivers a slightly better presentation layer in which to scan the results and also lets you quickly zoom into one result that is part of the set.

Contrast is a macOS app for quick access to WCAG color contrast ratios. Once installed you can use it to compare a foreground color to a background color and see the WCAG score.

Best tools for

Open Source Developer Tools

Recommended

Pa11y publishes a range of free and open source tools to help designers and developers make their web pages more accessible.