Accessibility Tools

Color Contrast

  1. Check My Colours
  2. checkmycoloursCheck 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.

  3. Color Oracle
  4. color-oracle

    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.

  5. Colour Contrast Visualiser
  6. colour-contrast-visualiser

    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.

  7. Accessibility Color Wheel
  8. color-wheel

    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.

  9. GrayBit
  10. graybit

    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.

  11. Vischeck
  12. vischeck

    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.

  13. Sim Daltonism
  14. 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).

  15. Color Laboratory
  16. 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.

  17. Colour Contrast Analyser by TPG
  18. 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.

  19. Luminosity Colour Contrast Ratio Analyser by Juicy Studio
  20. 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.

  21. Colour Contrast Check
  22. 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.

  23. 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.

  24. Color Safe
  25. Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

  26. A11y Rocks: and/orColor Palette
  27. 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.

  28. Accessible Color Palette Evaluator
  29. 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.

  30. Color Extractor Bookmarklet
  31. Extracts colors from the page CSS files and feeds them to Color Palette Accessibility Evaluator (see above).

Free Online Accessibility Evaluation Tools

                  • aDesigner
                    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.
                  • AccessLintRubygem
                    Run web accessibility audits on urls or files, from the command line or within Ruby. AccessLint uses Google’s Accessibility Developer Tools javascript
                    library to make assertions on the DOM via PhantomJS.
                  • AccessLint.com
                    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.
                  • AChecker
                    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
                    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
                    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
                    Tanaguru is an opensource (AGPL license) website assessment tool. It is dedicated to accessibility (a11y) audits, and focuses on reliability and high level
                    of automation.
                  • Quail
                    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

Color Contrast Checker’s

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.