Today we’ll talk about accessibility. It’s a practice of creating apps, sites, and products usable for everyone, including people with visual, motor, auditory, speech, or cognitive disabilities. Why should you support accessibility? You can impact someone’s life by making inclusive & easy to use products One billion people have disabilities: your product can be used by them Better accessibility support leads to better UX and cleaner code In this guide, you’ll find accessibility testing tools, color contrast checkers and color blindness simulators, both for designers and developers who work with web and mobile. 🎨 Tools for making accessible colors — a great tool for building accessible color palettes. Enter up to 6 colors and see the color matrix to know which colors can be combined. Accessible color palette builder — a free app for checking the accessibility of text against the WCAG rules. Contraste — a tool to algorithmically build accessible color systems. It also sorts by color, hue, saturation, and luminosity when picking color combinations. ColorBox — simple macOS app to check color contrast ratios and identify accessible color pairings based on WCAG Guidelines. Contrast — a free color accessibility tool for testing entire color systems for contrast and accessibility. You can test about 12 different colors at the same time. Hex Naw — a free collection of accessible color themes: 90 examples variety of A11Y compliant color combos 90 combinations of text/background color that has sufficient contrast ratio. — another free color accessibility tool that helps check the contrast between the background of an element and the page itself. Contrast Checker — a free web-based contrast tool: Colorable take a set color palette and get contrast values for every possible combination includes pass/fail scores for the WCAG accessibility guidelines. 👓 Color blindness simulators — a paid Sketch plugin that will let you simulate different types of color blindness. Stark — a free color blindness simulator. It uses the algorithm for simulating color vision impairment, so you can see colors as they are seen by colorblind people. Color Oracle — this online tool lets you test your website and shows you how people with different color blindness will see your pages. Toptal’s color filter 🙌 Accessibility testing tools — a free accessibility testing tool for web content: ANDI provides automated detection of accessibility issues gives practical suggestions to improve accessibility and checks 508 compliance. — a free web accessibility evaluation tool: WAVE provides visual feedback by injecting icons and indicators into your page has browsers extensions for evaluating local, dynamic, or password-protected pages. — a free accessibility testing web app, which allows you to check accessibility by web page URL, HTML file or even markup. Also, it enables additional options, such as CSS, HTML validator and more. AChecker — a free web tool to analyze websites against WCAG. Also available as a browser extension and as Twitter bot. And to find more accessibility tools, check list. A11ygator Awesome Design Tools 🙌 Tools for iOS developers is a part of Xcode, the main IDE for developing iOS apps. Think of it as a built-in accessibility checker that goes through an iOS application and tries to find accessibility issues. Than Accessibility Inspector shows parts of an iOS app that can be done better and helps to check iOS assistive technologies. Accessibility Inspector helps navigate the app screen without seeing it. It also can be used for testing iOS apps assessability, when you enable it and try to use your app. VoiceOver VoiceOver gives audible descriptions of what’s on your screen — from battery level, to who’s calling, to which app your finger is on. You can also adjust the speaking rate and pitch to suit your needs. When you touch the screen or drag your finger over it, VoiceOver speaks the name of the item your finger is on, including icons and text. To interact with the item, such as a button or link, or to navigate to another item, . — use VoiceOver gestures iPhone User Guide Please take a look at section on the Apple site to learn more about assistive technology, which you can support in your iOS app: Accessibility on iOS Useful Guides & Resources In this guide we focused more on tools to help you build products usable for more people rather than assessability practices (which are equally important). So these guides will teach you to follow best practices: Apple team put together Human Interface Guidelines with many . It covers user interface, navigation, typography, colors, motion and much more. tips on the accessibility in iOS design Some great articles by InVision team. , where you’ll find seven easy-to-implement design guidelines. A will be interesting for those of you who want to design with accessibility in mind. Designing for accessibility is not that hard guide to color accessibility in product design Great image by Pablo Stanley by Microsoft team is a comprehensive accessibility methodology and a set of useful tools. Inclusive Design is an article to help you establish and use an accessible color palette. Color Contrast for Better Readability For building your iOS apps more accessible with SwiftUI, learn about development tips for , , , , , , , , and . It’s a great series of 3–4 minutes iOS dev guides written by iOS Engineer at Capital One, . Images Sort Priority Named Controls Dynamic Type Accessible User Interface Traits Attributes User Settings Semantic Views Rob Whitaker Also, take a look at Checklist: . How to make your iOS app more accessible With all those tools and knowledge we can create more accessible products, reach a bigger audience and make life better for someone. I think it’s a solid motivation to start supporting accessibility in your design and development.

Apple

Microsoft

Accessibility Tools and Resources for Designers and Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

6 Tips to Host a Successful Virtual Networking Event

63 Stories To Learn About Accessibility

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

6 Tips to Host a Successful Virtual Networking Event

63 Stories To Learn About Accessibility

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps