Ensuring accessibility with developer tools


Testing your webpage in various clients and views is as important as testing it in various browsers. This testing might not be practical in all scenarios, and it can miss situations where users use a browser but might have another disability. Fortunately, there are tools that you can use as a developer to gauge the accessibility of your page.

Contrast checkers

Someone who is color-blind might not be able to differentiate between colors, or might have difficulty working with colors that are similar to one another. The World Wide Web Consortium (W3C), the standards organization for the web, established a rating system for color contrast.

Choosing the right colors to ensure that your page is accessible to all can be tricky to do by hand. You can use the following tools to both generate appropriate colors and test your site to ensure compliance:


Lighthouse is a tool that Google created for analyzing websites. It has become so popular that it's included in many browsers' developer tools. Lighthouse can examine a page's search engine optimization (SEO), load performance, and other best practices. Lighthouse can also analyze a page and provide a score for its current accessibility.


As with any automated tool, you can't rely on the score that Lighthouse provides as the sole indication of a page's accessibility. But it does provide a good starting point for identifying and remedying problems.

Exercise: Generate a page's Lighthouse accessibility score

Test out Lighthouse in your browser. The following screenshots use Edge, but you can follow the same steps in Chrome and many other browsers.

  1. Open your browser and go to the main Microsoft webpage.

  2. Select the F12 key to open the developer tools.

  3. On the top, select the chevron (>>) icon to open the list of hidden tabs.

    Screenshot of the developer tools with the chevron highlighted.

  4. Select Lighthouse from the list.

  5. Under Categories, clear all items except Accessibility.

  6. Under Device, select Desktop.

    Screenshot of Lighthouse with only Accessibility selected under Categories with and Desktop selected for Device.

  7. Select Generate report.

  8. Notice the score and associated information about the page.

  9. You can test other pages by selecting Clear all in Lighthouse, going to a different page, and then selecting Generate report.

    Screenshot of the URL section of Lighthouse, with the button for clearing all items highlighted.

You've now seen how to use Lighthouse, along with the accessibility information that the tool can provide.