- Check My Colours
- Color Oracle
- Colour Contrast Visualiser
- Accessibility Color Wheel
- Sim Daltonism
- Color Laboratory
- Colour Contrast Analyser by TPG
- Luminosity Colour Contrast Ratio Analyser by Juicy Studio
- Colour Contrast Check
- CSS Analyser by Gez Lemon
Another tool created by Gez Lemon, the CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that appropriate text sizes are specified in a relative unit of measurement.
- Color Safe
- A11y Rocks: and/orColor Palette
- Accessible Color Palette Evaluator
- Color Extractor Bookmarklet
Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press “Check!”, and it outputs a nice tabular report for all elements.
Color Oracle is a desktop tool available for Mac, Windows, and Linux operating systems: it simulates color vision deficiencies. The creators of the tool also have a Design Tips section on their site that shares a couple of useful white papers on color accessibility. Note that Windows and Linux users require Java 6.
This tool is an Adobe AIR desktop application for visualizing appropriate color combinations. It’s a wonderful tool for picking your website color palette. If you’re concerned about web accessibility, it’d be a good idea to have this tool around during the design phase of your projects.
This tool is a convenient way to experiment with various color combinations: it helps you rapidly envisage what color schemes look like. To test and tweak color choices, simply move your mouse around the color wheel and evaluate for readability. At the bottom of the tool’s webpage, you’ll see simulations for particular forms of color blindness.
One way to check if a design has sufficient color contrast is by converting it to grayscale and seeing which parts are hard to read. Use GrayBit to convert a web page to grayscale; it will even convert web images on that page. It’s a great tool for visualizing a web design’s color contrast and readability.
Vischeck simulates what things look like to people who are colorblind. It has several options for usage: you can run it on a web page, upload an image file (like a design mockup), or download a Photoshop plugin for local testing. Vischeck’s example page clearly explains how the tool works with demonstrations to highlight what it evaluates.
Sim Daltonism is a vision deficiency simulator for the Mac OS X. The tool allows you to simulate one of the eight supported color blindness conditions such as Monochromacy and Protanopia (a dichromat condition). Please note that Sim Daltonism requires Mac OS X 10.2.8 (or later versions).
This uncomplicated web tool allows you to discover color combinations and how they might look like to a person with color blindness. Color Laboratory is very easy to utilize and only requires three basic steps, all of which are outlined in their quick start guide.
This desktop application (for Windows) is designed for examining your foreground and background color combos for color contrast and brightness. There’s a user guide on the site to help you get started with it quickly, as well as downloads available in several languages.
Juicy Studio has a nifty web tool for analyzing background and foreground color contrast ratio. All you need to do is key in your background and foreground color values in hexadecimal units (for example, a white background is #ffffff) and it will subsequently tell you whether the combination passes WCAG 2.0 contrast recommendations.
The first intuitive online tool for checking colours that I know of, Jonathan Snook’s Colour Contrast Check lets you input foreground and background colours either by entering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
This tool should help you visualize an entire palette of colors with accessibility in mind. An indicator will be placed next to each foreground color to show if its contrast with the background color is WCAG 2and AAA compliant for normal and large text.
When creating color palettes for Web sites, it’s useful to know which color combinations will pass accessibility requirements for color contrast. WCAG 2 defines a formula for determining if two particular colors provide enough contrast. The NC State Accessible Color Palette Evaluator allows you to enter a color palette and quickly analyze all of the color combinations to test for accessibility. The tool is located at http://go.ncsu.edu/accessible-color-palette. For analyzing the original NC State color palette, visit http://go.ncsu.edu/accessible-color-palette-ncsu.
Extracts colors from the page CSS files and feeds them to Color Palette Accessibility Evaluator (see above).
Free Online Accessibility Evaluation Tools
aDesigner is a disability simulator that helps designers ensure that their content and applications are accessible and usable by the visually impaired.
- 508 Checker
With 508checker.com you can quickly check a webpage for 508 compliance and learn more about how to become 508 compliant across your entire organization.
library to make assertions on the DOM via PhantomJS.
AccessLint.com is a hosted version of the AccessLintRubygem and Google’s Accessibility Developer Tools. Enter a url to make assertions on remote web pages
and get a list of results in the browser.
Interactive, international, customizable, Web content accessibility checker. Allows users to create their own guidelines, and author their own accessibility
checks. Based on the Open Accessibility Checks(OAC)
- Functional Accessibility Evaluator
Evaluates website for WCAG 2.0 Level A and AA requirements.Provides summary and detailed reporting on the results of the evaluations. The report URLs
can be easily shared to be viewed by other people.
MAUVE is an environment for Web accessibility evaluation. Accessibility guidelines can be defined and updated through an XML-based definition language,
without requiring changes in the tool implementation.It checks both HTML and CSS and, through some browsers’ plugins, it can validate dynamic sites.
- Online-Utility.org Document Readability Test Tool
Calculates readability: Coleman Liau index, Flesch-Kincaid Grade Level, ARI (Automated Readability Index), SMOG. The measure of readability used here
is the indication of number of years of education that a person needs to be able to understand the text easily on the first reading.
- Tingtun Accessibility Checker
Checks web pages based on WCAG 2.0. Reports barriers, their location together with WCAG references and proposed remedies.
WAVE is a suite of tools for facilitating web accessibility evaluation by providing a visual representation of accessibility issues within the page. There
is an online service at http://wave.webaim.org/, Firefox and Chrome extensions, and an online and installable API engine.
- Accessibility Viewer
The Accessibility Viewer (aViewer) is an inspection tool for Windows that displays the accessibility API information (MSAA, IAccessible2, UI Automation, ARIA, HTML DOM) exposed by web browsers to the operating system, and thus to any assistive technology (AT) such as screenreaders.
Open Source Accessibility Tools
- axe Accessibility Rules Engine by Deque Systems
The Accessibility Engine for automated testing of HTML-based user interfaces. Drop the aXe on your accessibility defects!
- tota11yAn accessibility visualization toolkit.
- Automated Accessibility Testing Tool (AATT)Browser-based accessibility testing tools and plugins require manually testing each page, one at a time. Tools that can crawl a website can only scan pages that do not require login credentials, and that are not behind a firewall. Instead of developing, testing, and using a separate accessibility test suite, you can now integrate accessibility testing into your existing automation test suite using AATT.
Tanaguru is an opensource (AGPL license) website assessment tool. It is dedicated to accessibility (a11y) audits, and focuses on reliability and high level
QUAIL is a jQuery plugin for checking content against accessibility guidelines. It provides a flexible way to test for certain problems (say, images missing
an alt text) and a collection of over 200 tests to get you started. Defining your tests is easy, and you can pick-and-choose tests to focus on the
needs of your app.
- Pa11y – Your automated accessibility testing pal
Monitor the accessibility of your websites with pa11y-dashboard, and protect against accessibility errors creeping into your codebase*.
Accessibility Plug-ins for IE, Chrome & Firefox
- Accessibility Developer Tools (for Chrome)
- Jim ThatchersFavelets
- ARIA validator (for chrome)
- Accessibility Evaluation Toolbar (free Firefox extension)
- Wave Toolbar (free Firefox extension)
- Web Developer (free Firefox extension)
- Juicy Studio Tools (free online tools and Firefox extensions)
- Firebug (free Firefox extension)
- Dom Inspector (free Firefox extension)
- The Web Accessibility Toolbar (free add on for Internet Explorer)
- FireEyes by Deque Systems Inc.
FireEyes is a Firefox plugin that integrates with Firebug and allows developers, QA engineers and subject matter experts to test individual and multiple pages for Section 508 and WCAG 2 accessibility issues. It has built-in color contrast analysis, screen reader simulation and support for DHTML pgs.
- HTML_CodeSniffer by Squiz
Checks a HTML document and detects violations of a defined coding standard. Comes with standards that cover the three conformance levels of WCAG 2.0 and the U.S. Section 508 legislation. An auditor interface is provided by a bookmarklet to let you try out these accessibility checks on any web page.
Color Contrast Checker’s
- The Color Contrast Analyser(free desktop application for windows and Mac)
- Color Enhancer-Chrome Extension
A customizable color filter applied to webpages to improve color perception.
Mobile Accessibility Tools
- Talk Back for AndroidTalkBack is an Accessibility Service that helps blind and vision-impaired users interact with their devices.
Talkback adds spoken, audible, and vibration feedback to your device. It is a system application that was pre-installed on most devices and is updated when the accessibility service is improved.
- VoiceOver for iOSVoiceOver is a gesture-based screen reader that lets you enjoy the fun and simplicity of iOS even if you can’t see the screen. With VoiceOver enabled, just triple-click the Home button to access it wherever you are in iOS. Hear a description of everything happening on your screen, from battery level to who’s calling to which app your finger’s on. You can adjust the speaking rate and pitch to suit you.
- android Accessibility Test Kit The AccessibilityChecksclass allows you to use your existing test code to test for accessibility issues. As a View is acted upon in tests, checks from the accessibility test framework will be run automatically before proceeding. Simply import the class and add the following line of code to your setup methods annotated with @Before:(Use the above links to get more info)
- Remotely debugging Firefox for AndroidThe steps explained in the article can also be used to debug Accessibility issues in the Android using Firefox.
- Remote Debugging on Android with Chrome
The steps explained in the article can also be used to debug Accessibility issues in the Android using Chrome.
- Paul J Adam BookmarkletsPaul J Adam Accessibility Evangelist has created a set of bookmarklets that will help identify few accessibility bugs quickly. This bookmarklets also work great on mobile web with both Chrome & Firefox.