Choose a free a11y plugin to your undertaking. A11y testing instruments in observe

Automated accessibility testing instruments are an enormous assist for finishing up audits and/or day by day accessibility testing. All have their professionals and cons, however is there something that may do many of the be just right for you and reply to all WCAG (Internet Content material Accessibility Tips) standards, together with ample shade distinction? Because it’s our bread and butter, we’ve collected our favourite free assets to your consideration.

Now we have already written concerning the significance of net accessibility in any software program undertaking. Many elements will have an effect on your selection of instruments (group measurement, finances, time, sort of app/web site) however the accessibility testing must be executed effectively and precisely. Fortunately, accessibility auditors like us are in a significantly better place as a result of increasingly more refined selections can be found. 

On this article, we evaluate a couple of free a11y plugins that we’ve got utilized in observe to check contrasts and several other different WCAG standards. We hope this may make it easier to select the best net accessibility testing instruments to your wants.

Why do I want an automatic accessibility testing instrument for distinction?

Nice query – technically, in the event you learn WCAG pointers you gained’t discover any authorized necessities so as to add particular variations of your web site for visually impaired customers. Nonetheless, don’t you need all folks to achieve your content material and browse it? If the textual content doesn’t have sufficient distinction in comparison with the background, even able-bodied customers may need issues. All it takes is a mirrored image within the glass, a defective monitor, or shiny gentle on a sunny day.

Answer? Add a distinction model. 

Coloration testing instruments use totally different algorithms – shade brightness and distinction, shade distinction brightness, and a few each. We’re glad that increasingly more designers give attention to designing and checking contrasts however not all main websites can be found on this respect but. Subsequently, let’s take a more in-depth have a look at automated instruments for distinction checkups. we record three totally different variations:

  • browser plugin,
  • separate web site,
  • desktop instrument.

WCAG Distinction Checker

WCAG Distinction Checker is a browser instrument that analyzes the colour distinction between the foreground and background of all parts on the web page. Nonetheless, it doesn’t analyze the colour of photos. If an merchandise is a picture, the detected foreground shade is the one its alt textual content would use, and if the merchandise comprises a picture as a background, the background shade is the one outlined with out together with the picture.

WCAG Contrast Checker - chrome developer tools for web accessibility testing
Evaluation outcomes

The outcomes are offered in three columns:

  • Distinction. An icon is displayed to point whether or not the WCAG necessities have been met, and the calculated distinction ratio is listed.
  • Dimension. Signifies the dimensions of the textual content – small or massive.
  • Parts. Successively – foreground shade swatch on background, variety of detected parts, HTML factor title, and an icon indicating whether or not the factor is seen (eye) or hidden (crossed eye).

WCAG Distinction Checker instrument features a shade analyzer. It’s a really cool performance the place you’ll be able to introduce our personal shade palette to judge the distinction. Enter the colour codes or select them from the colour palette.

WCAG Contrast Checker - online service for web accessibility evaluation tools
Coloration analyzer

One other good possibility is the shade blindness selector. Select any of the choices from the drop-down record.

WCAG Contrast Checker - free tool for web applications - web accessibility testing tool
Coloration blindness selector


  • fast and straightforward to make use of,
  • clicking on a given report takes you to a selected merchandise,
  • simulates visible impairment,
  • permits you to take a look at the distinction towards the chosen stage: AA or AAA.


  • doesn’t present immediately the web site’s parts that want enchancment,
  • no filtering choices,
  • doesn’t analyze the distinction between non-text objects and their background.

Distinction instruments

Distinction instruments run within the browser and aside from net accessibility pointers 2.0, it has already thought of WCAG 3.0 (that’s not in impact but). 

The distinction worth for this instrument is calculated utilizing the APCA algorithm. In contrast to earlier algorithms used for distinction (e.g. WCAG 2.1). APCA takes under consideration the context during which colours are used to find out their legibility. Font measurement, font weight, background and textual content shade sequence all have an effect on the ultimate WCAG ranking.

Contrast tools - evaluate web accessibility standards of entire web sites with WCAG 3.0
WCAG 3.0

The result’s the APCA Lookup Desk with pattern font and measurement solutions.

Contrast tools in web page - entire website accessibility issues and accessibility violations in APCA lookup table
APCA Lookup Desk

If you want, you’ll be able to change to WCAG 2.1 and use the prevailing algorithms by manually coming into the colour codes in two variations.

contrast tools - web pages accessibility viewer and accessibility checker for wcag 2.1
WCAG 2.1


  • has a present WCAG 2.1 model but it surely already takes under consideration the upcoming WCAG 3.0 commonplace,
  • further quick efficiency within the browser,
  • outcomes are clear and legible,
  • testing distinction towards the chosen stage AA or AAA.


  • WCAG 2.1 traditional test has no visible impairment simulation,
  • shade codes should be entered manually.

Coloration Distinction Checker CCA

Coloration Distinction Checker CCA is an fascinating instrument made by TPGI. It’s divided into 4 areas:

  1. Coloration for the foreground (textual content)
  2. Coloration for the background
  3. Pattern preview
  4. WCAG outcomes
Color Contrast Checker CCA - accessible plugin checks example element
Coloration Distinction Checker CCA

It’s attainable to pick out the suitable shade code/mannequin together with shade assist, which is actually helpful for product designers of their day-to-day. 

Color Contrast Checker CCA - create, configure default file components combination in software development

Moreover, there’s the slider operate, the place you regulate the vary of derived colours. You may maneuver them to attain a visually pleasing-to-the-eye design and nonetheless repairs accessibility.

Color Contrast Checker CCA - implement settings in developing project (eslintrc configuration file)

Within the outcomes part, you’ll be able to discover the distinction ratio in keeping with WCAG. 

Color Contrast Checker CCA - accessibility api information, single web pages
Distinction ratio


  • fast efficiency,
  • numerous cool choices for product designers to test distinction whereas designing,
  • simulates visible impairment,
  • permits to check the distinction towards the chosen stage: AA, AAA.


  • can’t be used as a plug-in, should be downloaded on to your desktop,
  • operations could also be a bit sophisticated for some (colours must be “downloaded” with the instrument and aimed on the background or textual content),
  • no distinction evaluation between non-text objects and their background. 

Further accessibility testing instruments overlaying a number of WCAG standards

There are additionally lots of accessibility instruments for a fast web site audit. Automated accessibility assessments could be useful within the first phases of a11y audit and design. To make sure that your purposes and web sites attain the widest attainable vary of customers, be certain to finally confirm automated assessments with handbook testing.


ANDI is a straightforward set up instrument and bookmarklet – simply drag and drop it into the bookmarks bar and also you’re executed. It was created by a authorities company so it meets the part 508 requirements (sadly, there aren’t any direct info sources for WCAG requirements). 

In an effort to correctly perceive and function ANDI, it’s price the web information with the proper interpretation of the outcomes. 

Essentially the most helpful ANDI options are:

  • after the scan, all parts with focus and interactions are highlighted,
  • parts with focus are marked with orange (it means this factor wants a handbook test),
  • parts that don’t meet accessibility necessities are marked with crimson, 
  • full web site evaluation,
  • producing accessibility alerts after HTML parts are analyzed for frequent a11y errors.

Let’s see how ANDI distinction testing works

1. This instrument is simple to make use of, simply choose the WCAG standards you need to take a look at. If these are contrasts, it’s sufficient simply choose this class from the record and the weather might be underlined:

ANDI - can omit even more accessibility rules and form elements

2. Distinction playground permits you to evaluate two colours. So in the event you come throughout a component that doesn’t meet the factors for applicable distinction, you’ll be able to manually test which closest shade will do and suggest one other shade to the graphic designer. 

ANDI - accessible contrast in assistive technology for screen readers
Distinction too low
install ANDI - accessibility checks done right - contrast on focusable elements
Right distinction


3. Each factor that wants further checkup is clearly marked on web page

ANDI creating recommended configuration that will mark faulty attributes in browsers

4. A script that tries to load further code from an exterior web site causes cross-origin points in lots of apps. Consequently, widespread web sites like IKEA don’t assist you to run this instrument and take a look at their web site.

5. The extension suggests manually checking one of many parts, but it surely doesn’t present an identifier and also you don’t know what factor it’s. After clicking, nothing occurs when testing contrasts. For an individual who begins their journey with accessibility testing, it will be useful if the listed error (which, by the best way, is a hyperlink) referred the person to a selected space that requires further checking:

ANDI accessible objects & dom element save dev 's time with automation

6. ANDI doesn’t meet 100% of a11y necessities (too low contrasts, or too small fonts)

ANDI - plugins section not always passess a11y requirements so make sure to control it

7. When there are a number of parts that want handbook testing, it turns into tougher to know which hyperlink ought to transfer to a selected factor, and it could be exhausting to determine which factor triggered the alert.

ANDI and a bit complicated accessibility tree


  • straightforward setup and launch,
  • can be utilized on a wide range of platforms, together with desktops, laptops, and cell units,
  • comprises details about every accessibility downside recognized, together with recommendations on methods to repair it,
  • assessments each new web sites, and audits the prevailing ones.


  • not as correct as different accessibility testing instruments (might miss some points or falsely report nonexistent issues),
  • not up to date as typically as different instruments (might not observe the newest model of WCAG pointers),
  • WCAG sources are lacking,
  • ANDI hundreds on webpages as an alternative of loading right into a developer instrument widget, so it may be blocked by the positioning’s content material safety coverage. 


Lighthouse from Google Chrome DevTools stables is an automatic open-source instrument that may make it easier to to handle web site (each public and requiring authorization) high quality. You may audit efficiency, accessibility, progressive net apps, search engine marketing, and so forth. 

Lighthouse - accessibility guidelines with a bit of manual accessibility testing in user interface

After coming into the URL, Lighthouse conducts a sequence of audits and generates a report with specified errors that can be utilized to enhance your utility. 


  • Fast outcomes, readable, straightforward to make use of,
  • Outcomes clearly marked within the report (see screenshot above),
  • May be moved to a separate window so it doesn’t have an effect on the web page place (as ANDI does),
  • Producing and exporting stories to PDF paperwork.


  • not moveable between browsers, so you might want to study a special interface for every browser,
  • can’t decide the standard of different textual content (sure, it checks alt presence however you gained’t know whether or not it’s deceptive for actual customers). 


WAVE is kind of a well-liked plugin, and we are likely to see it very often in our companions’ initiatives. with an in depth record of errors on the positioning, it permits you to consider your web site and search for a11y and WCAG-related errors.

After testing the web site, WAVE creates an inventory of color-coded icons with issues (some discover it complicated and uncomfortable at first). The icons are appropriately assigned to the kind of downside and include detailed info with references to WebAim sources (i.e. the creators of the WAVE plugin). That is in fact a good supply, but it surely takes a little bit of observe to seek out the proper downside in WCAG.


  • The examined factor is distributed on to HTML,

WAVE - web browsers accessibility visualization toolkit for web developers

  • the reference possibility refers to a selected commonplace and justifies the necessity to meet it,

WAVE for your future accessible rich internet application

  • the “construction” tab creates a web page heading plan. Nonetheless, it’s higher to have the web page opened in a separate window to check the outcomes, as you’ll be able to see on the display under, after the evaluation the web page just isn’t legible:

WAVE for individual web pages accessibility criteria. First accessibility audit, then you will be able to fix accessibility issues


  • the “particulars” tab is tough to learn (the variety of errors discovered is listed however after clicking on a given error, you aren’t capable of simply decide which parts of the web page doesn’t meet the factors),
  • some parts caught by the instrument will not be marked as common errors however as warnings (helpful, but it surely requires you to take a more in-depth look to make a last resolution whether or not an merchandise must be mounted or not. 
  • the overall method of analyzing and analyzing web page parts is inconvenient, many icons overlap with one another, which makes it troublesome for the auditor to focus:

WAVE - free software for automated testing for accessibility errors from accessibility checklist

ARC Toolkit

Final however not least, ARC Toolkit (built-in with Chome DevTools) that helps automated and handbook a11y testing. Its foremost objective is to seek out errors and make monotonous testing duties simpler.

ARC Toolkit online checker for structural elements of multiple sites, perfect for react app

You may in all probability guess what the primary two icons symbolize, however the “thumbs up” (that means: greatest practices) and the quantity 0 under it and never very intuitive. If there’s no distinction to look at within the “thumbs up” class, then the zero must be changed by a placeholder suggesting no outcomes, e.g. “–”, or ”n/a”. Contact complicated. 

The “distinction” discipline is clickable however doing so will trigger an error and the instrument will cease responding (not very interactive). Unchecking the field does nothing – function or a bug? 😉

We’ll present you a similar web site navigation issues and the way ARC Toolkit and ANDI do it. 

accessibility management platform for usability testing and high accessibility score
ARC Toolkit
accessibility bookmarklets, accessibility insights for your own accessibility checks

ARC Toolkit offers a greater clarification – the merchandise caught as an error is clearly marked on the web page. On this case, testing navigation utilizing the keyboard turns into less complicated with the ARC Toolkit.


  • permits for take a look at automation, which suggests they are often performed quicker and with much less effort,
  • cross-platform, so you’ll be able to take a look at the appliance on totally different units and working programs (shortly detect errors on many platforms),
  • integration with different testing and undertaking administration instruments,
  • parts that don’t meet the distinction necessities are marked immediately on the web page give clear outcomes,
  • HTML preview is added to every factor.


  • requires to be configured and matched with the suitable units and working programs (could be time-consuming and sophisticated),
  • troublesome for rookies who aren’t skilled cell app testers,
  • for the untrained eye, the outcomes of the report are unreadable.

Much more accessibility guidelines will come sooner or later. Don’t wait, put together to repair your net accessibility points now!

There aren’t any excellent instruments but it surely’s undoubtedly higher and simpler to test parts like contrasts with a useful plugin tailored for this objective. You gained’t all the time be capable of assess whether or not the colour of a given factor meets the WCAG 2.0 (or upcoming 3.0) necessities, it is possible for you to to shortly discover all flaws to enhance. 

Whereas accessibility testing instruments and varied varieties of plugins actually facilitate our work as QA, they actually gained’t do it for us. Errors recognized by the automated plugin must be checked manually!

You in all probability wanna know which plugin is our favourite one, proper?

We’ve tried all of the aforementioned, and in keeping with our subjective opinion based mostly on software program initiatives, WCAG Distinction Checker is essentially the most nice and intuitive to make use of. Regardless of the shortage of a filtering possibility, you’ll shortly and simply assess which parts don’t meet the accessibility requirements and which handed the take a look at. Among the many advantages, you’ll discover varied ranges of testing (AA or AAA), and simulators for shade notion issues. We will confidently advocate the WCAG Distinction Checker plugin.

So far as instruments for analyzing WCAG standards are involved, proper now we give attention to the ARC Toolkit. Perhaps it’s not the quickest (loads is dependent upon the examined web site) but it surely clearly exhibits accessibility errors that we later confirm manually. It has a direct reference to WCAG, so we will advocate enhancements in accessibility simpler. ARC Toolkit positively stands out when it comes to readability.

Wanna combat us on this? 🥊 Be part of our Discord!

Really feel invited to our Discord QA Community! We’ll gladly trade observations and uncover new issues. You may also give us solutions for an inventory of instruments for testing headlines, landmarks, and readers. The brand new article very quickly!

Anna Borgosz

Anna Borgosz

QA Specialist

As a QA specialist at TSH, Anna loves UX – which has a pure connection to a11y, which is her enormous focal point! Exterior of the workplace she likes to learn non-fiction and go for a run!

Małgorzata Czuluk

Małgorzata Czuluk

QA Specialist

Gosia is knowledgeable optimist, and he or she needs to alter purposes to be accessible – to everybody! Privately she’s a contented camper (actually), who loves the wilderness and nature.


Leave a Reply

    Your Cart
    Your cart is emptyReturn to Shop