WordCamp New York

How to create accessible websites

Download the slides


Color Contrast

  • Color Contrast Analyzer
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will analyze a web page for conformance with WCAG 2.0 color contrast requirements.
  • “I want to see like the colour blind”
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will show you how your web page appears to those with color blindness.
  • A11y Color Palette
    • Helps you visualize an entire palette of all color combinations with accessibility in mind. The combinations are ordered by color contrast ratio. Try it out with sample colors or create a palette of your own.
  • Color Safe
    • Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
  • Color Tool
    • Web page that allows you to insert your color palette and view accessibility information.
  • Hex Naw
    • Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility.
  • Sim Daltonism
    • Free Mac OS app that lets you visualize colors as they are perceived with various types of color blindness.
  • WebAIM color contrast checker
    • Simple foreground vs. background checker.
    • WebAim color contrast checker API
      • Pass foreground and background color. Returns a JSON object with the contrast ratio and the AA/AAA pass/fail states.


  • Accessibility Developer Tools
  • A11y Command-line Tools
    • Web accessibility audits powered by the Chrome Accessibility Developer Tools.
    • Run audits against local or remote URLs in the command-line to return a list of accessibility improvements that can be made.
  • Axe
    • Axe-core is a Javascript file you can use to scan your site.
    • Offers a Google Chrome extension. Adds a tab to your developer tools to run a scan/audit of your current page.
      • aXe-Coconut is a Chrome extension that allows you to try their latest APIs and experimental rules before they are released.
    • They offer premium services.
  • ARIA validator
    • Is a Google Chrome extension.
    • Adds a button to the top of the browser that, when clicked, will scan and audit ARIA usage.
  • Functional Accessibility Evaluator
    • Developed by the Disability Research and Educational Services at the University of Illinois at Urbana-Champaign.
  • HTML CodeSniffer
    • A Javascript application that can be used to run scans.
    • Also has a bookmarklet for quick scans on any web page.
  • Koa11y
    • Koa11y is a desktop app that allows you to automatically detect accessibility issues on webpages.
  • Lighthouse
    • Works as a Chrome DevTool, CLI, or node module.
    • Will check for accessibility issues along with performance issues, best practices, and if the site is a progressive web app.
  • Pa11y
    • They have a lot of open source tools.
  • Siteimprove
    • Offers a Google Chrome extension. Adds a button to the top of the browser that, when clicked, will scan/audit your web page.
    • They offer premium services.
  • Tota11y
    • Has Javascript file you can place on site.
    • Offers a Google Chrome extension.
    • Both the file and the extension will add a button to the bottom of your page that, when clicked, will show you the results of a scan.
  • WAVE
    • Offers a Google Chrome extension.
    • Both the main tool and the extension will scan/audit your site and show you results.
    • They also have a premium API.

Screen Readers

WordPress Plugins

  • Font Resizer
    • Allows you to give the visitors of your site the option to change the font size.
  • GSpeech Text to Speech
    • A text to speech solution for WordPress. It uses Google power to provide you the best quality of automatic text to speech service.
  • NC State Accessibility Helper
    • Adds “Run Accessibility Check” button to post editor, generating an annotated preview highlighting potential accessibility issues.
    • Still in active development – contributions welcome!
  • WP Accessibility
    • Helps with a variety of common accessibility problems in WordPress themes.
  • Automatic Alternative Text
    • Adds alt text using Microsoft cognitive services
  • wA11y – The Web Accessibility Toolbox
    • Provides a toolbox of resources to help you improve the accessibility of your WordPress website.

Other resources

For a complete list of resources, check out the WPCampus accessibility resources.