Accessibility extensions and tools
A selection of tools to help designers and engineers check for accessibility in product development.
The accessibility ecosystem is rich with tools for any stage of product development. We've grouped them on this page by phase of product development life cycle (PDLC), then by specific products. Because of this, there is minimal duplicate content to ensure discoverability.
Product stage specific
Design: Color contrast and colorblindness checkers
When testing contrast, be wary of tools that use color pickers. The picked color may differ depending on your color space settings and other factors. Always prefer direct value input.
-
Figma color contrast tool - There is now a native color contrast checker in Figma that fits most use cases without the need for plugins.
-
Color Blind (Figma plugin): Color Blind allows you to view your designs in the eight different types of color vision deficiencies.
-
WebAIM Color Contrast Checker: Considered the golden standard, this webpage does a good job explaining what the result means. At GitHub, the WebAIM contrast checker is the standard that has to be met.
-
Contrast (Figma plugin): This plugin will check the contrast of text, graphical objects, and even gradients.
-
Colour Contrast Analyser from TPGi for MacOS and Windows: A free app that allows RBG, RBGA, HEX, and more options for testing color contrast.
-
Color Review: Color review is fantastic if you're looking for help finding an accessible color in an existing palette.
-
Sim Daltonism (MacOS) and Colour Simulations (Windows): Free applications in the App and Windows store with similar user interface. Applies a filter to a specific portion of one's screen to test for various types of colorblindness.
Dev and QA
-
Axe DevTools: A series of free and paid tools from accessibility company Deque to help scan for accessibility bugs and code and offer suggestions for remediation.
-
GitHub Accessibility Scanner: The AI-powered Accessibility Scanner (a11y scanner) is a GitHub Action that detects accessibility barriers across your digital products, creates trackable issues, and leverages GitHub Copilot for AI-powered fixes.
-
Microsoft Accessibility (A11y) Insights for Web: A browser extension that allows users to view tab stops, headings, landmarks, and more within their browsers.
-
HeadingsMap (Browser extension): Browser extension to view headings and landmarks of a webpage in a table of contexts style UI.