Category: tools

Accessibility Rendering Tools in Chrome

Post author By Dennis
Post date October 4, 2020
No Comments on Accessibility Rendering Tools in Chrome

There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. These are great for testing the implementation of your accessible design! The features include:

Emulate CSS media feature prefers-color-scheme
Emulate CSS media feature prefers-reduced motion
Emulate vision deficiencies

Unfortunately, they are quite difficult to discover/locate, so here’s where to find them:

In Chrome browser, open the Developer Tools.
Select the “…” menu button in the toolbar.
Select the “More tools” menu.
Select Rendering; the Rendering panel appears in the sub-panel (next to Console if no others are present).
Scroll to the bottom of the Rendering panel to locate the features.
Select an option from the dropdown for each.

Happy developing!

Addendum

Great point by Chris Heilmann via Twitter.

Accessibility Rendering Tools in Chrome https://t.co/ZCF2IMKNxZ

Great overview by @dennisl. I just wished people would start mentioning Chromium instead of Chrome as all of these and more (experiments) are available in @MSEdgeDev, too.

— Chris Heilmann codepo8@toot.cafe (@codepo8) October 5, 2020

Accessible Web Animation: The WCAG on Animation Explained (Sep. 2020)
prefers-reduced-motion: Sometimes less movement is more (Dec. 2019)

keyboard tools

Force Focus Tools

When testing web accessibility, missing visual focus indicators is a “violation” of 2.4.7 Focus Visible. And when it fails, it also makes other checkpoints difficult to test (for sighted testers) such as focus order.

blue ring around the words "words cognitive concerns" in a block of text

To get around this problem, here are a few tools to help force a visual indication of keyboard focus. Keep in mind that sometimes the tool doesn’t work, usually due to extremely poor markup and lack of keyboard access entirely.

nerdeFocusPlugIn for Chrome (GitHub)
Force Show Focus bookmarklet by Paul Adam
Restore Focus Outlines bookmarklet by Adrian Roselli
LogFocus – handy Bookmarklet (and Chrome snippet) for Keyboard Accessibility testing by Dirk Ginader
What has focus? by Scott Vinkle
Focus Highlight, an NVDA add-on
Note that Voiceover by default will show focus with a black rectangle.

Do you know any others?

Bonus! Enter this in the browser console. Then the console with return the element which is currently focused.

document.addEventListener('focusin', function() {
  console.log(document.activeElement)
}, false)

Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

Updated April 2024. Please feel free to comment with additions and corrections.

WebAIM contrast checker
Link Contrast Checker by WebAIM (for stubborn designers who won’t underline text links)
The Contrast Triangle by Chip Cullen
Colour Contrast Analyzer app by TPG
Stark – for Figma, Sketch and Adobe XD
Colour Contrast Check by Snook
~~Juicy Studio Accessibility Firefox add-on~~ (no longer available)
Color Contrast Analyzer Chrome plug-in by NCSU
Colorable – interactive web tool
Contrast Ratio – by Lea Verou
Tanaguru Contrast-Finder – web tool that offers solutions
WCAG Contrast checker – Firefox add-on by Rumoroso
Colour Contrast Determinator (beta) by Vision Australia
ColorA11y Chrome extension by Matt Long
A11y Color Palette by Matt Long
Color Contrast Analyzer – Chrome extension by NCSU/Greg Kraus *supports gradients and advanced CSS attributes
Text on background image a11y check – great for text over images
Color Contrast Tester by Joe Dolson, supports alpha
Accessible color palette builder by “toolness”
Hex Naw by The Scenery
Contrast calculation – Javascript in CodePen by Heydon Pickering
Color Contrast iOS app (free with ads) by UserLight Ltd.
Contrast Finder by Asqatasun (GitHub)
WCAG Contrast Checker by Acart Communications
HTML Color Codes by Dan’s Tools, supports alpha
Contrast Checker by Fog Creek via Glitch
Color by Cloudfare Design
Color.Review by Anton Robsarve
Contrast Grid by Eightshapes
Pa11y – Create Accessible Color Palettes
Button Contrast Checker by ADITUS
Who can use this color combination? by Corey Ginnivan
Color Palette Contrast Checker by Deque Systems
Deque Color Contrast Analyzer by Deque Systems
Odd Contrast by OddBird (Warning: doesn’t apply alpha channel at time of posting)
Are my Colours Accessible? by Simon Taggart
Accessible Brand Colors by Use All Five
~~NoCoffee vision simulator~~ (no longer available)
ColorZilla color picker for Firefox and Chrome
Eye Dropper Chrome extension
Color Contrast for Better Readability article by Viget
Contrast — Color Accessibility Mac OS X app ($6.99) by Nothing Magical Inc.
Contrasts – iOS app, free plus upgrades

color wheel

roundup tools wcag2

WCAG Cheat Sheets and Checklists

Post author By Dennis
Post date April 25, 2015
8 Comments on WCAG Cheat Sheets and Checklists

Here are some great checklists and filtering tools for the W3C’s Web Content Accessibility Guidelines—WCAG 2.0 and WCAG 2.1 [and now WCAG 2.2]. Know any others?

WCAG (Quick Reference) by W3C WAI
WCAG 2.2 Checklist + Links by Web Overhauls (based off Paul Adam’s WCAG 2.0 Checklist)
Accessibility Checklist (WCAG 2.1) (+filters) by elsevier
Accessibility checklist by Webflow
Unavailable ~~Interactive WCAG by Viget~~
WebAIM’s WCAG 2 Checklist
WCAG 2.1 Quick Reference by Joe Chidzik
Unavailable ~~Accessibility Checklist by Nomensa~~
The Accessibility Cheatsheet by Bits of Code
Web Accessibility Checklist by The A11y Project
Product Accessibility Checklist by Vox Media
WCAG Guide by Marcelo Sales
Accessibility Not-Checklist by Intopia
Web Accessibility Checklist by Deque Systems
Accessibility checklist by Andrew Hick
WCAG Checklist – A Free and Simple Guide to WCAG 2.0 and WCAG 2.1 by DigitalAlly
WCAG 2.2 map by theme by Andrew Hick
WCAG 2.2 (level A and AA) explorer

Easy Checks – A First Review of Web Accessibility by W3C WAI
Accessibility responsibility breakdown (WCAG 2.0) by Coopérative AccessibilitéWeb
WCAG primer by TetraLogical
How to Meet WCAG 2.1 (Quick Reference) by W3C

Last updated Sep 2024

Addendum

Related

Related

Tools

Code Examples

More