Visual accessibility notes
I recently posted threads and received helpful responses from the Turing Way Slack group discussing visual #accessibility both for #datavisualisation and text.
Visualisations
My original prompt was:
Visual accessibility question: Is converting color to greyscale (or black and white) an adequate test of color blind accessibility (e.g. if I convert a data visualization with color to greyscale and check if I can still understand it)? If no, what's a good test or rule of thumb?
Short answer: No.
Here are the useful responses I got for which I'm grateful (bold emphasis mine):
- Liz Hare: Good question! I don't think that would work because of the way colors are perceived. There are a few different approaches you could take. You could use some secondary code like texture or text labels. Also, it depends on how you are working. I know there are colorblind-friendly color palette packages for R. And don't forget the alt text.
- Alycia Crall: I’ve always found this testing tool very helpful: https://webaim.org/resources/contrastchecker/
- Hao Ye: Why this doesn't work:
- converting color to grayscale is dimensional reduction (3 color axes –> 1 axis of brightness)
- the conversion method is probably based on the perceptual attributes of an average human with 3 cone types
- someone who deviates from that, e.g. by not having a particular cone, will perceive relative brightness differently than what the grayscale conversion produces
- DavidPS: If you open the image with Firefox, and right-click on it you will see a “inspect accessibility properties” button. Clicking on it you will see a simulate button. There you can try many different types of colour accessibility issues.
- Anne Lee Steele: @DavidPS – I've previously used this extension in another context: https://addons.mozilla.org/en-GB/firefox/addon/let-s-get-color-blind/, I didn't realise that this is now built in to the browser, amazing!
- Shern Tee: Given that a “grayscale-legible” chart is not necessarily color-accessible — what about the reverse? That is, do schemes that account for different colour perceptions also tend to make charts more grayscale-legible? Or is that not generally ensured? I ask because I don't have different colour perception (as far as I know!), but I do frequently print papers in grayscale. I'm guilty of assuming that grayscale legibility would equal colour accessibility. I've often encouraged my students to consider being as thoughtful as possible — not just using colour palettes but line-dashing, symbol shapes, and explicit labels to clarify information — but I wonder now if there's no overlap, or some overlap!
- Hao Ye: @Shern Tee – I think so, based on arguments that a set of colors that are distinct under different color perception modes, would probably have to rely on brightness that is agnostic to any specific color channels, and thus render as distinct when converted to grayscale. I would probably have to do some linear algebra to check for sure!
Fonts
Original prompt:
As a follow up, over the years I've noted some open source fonts designed for accessibility: * Atkinson Hyperlegible by the Braille Institute (source code): https://brailleinstitute.org/freefont (expanded forks here and here) * Inclusive Sans (source code): https://www.oliviaking.com/inclusive-sans * OpenDyslexic: https://github.com/antijingoist/opendyslexic My question is: While I like the idea of accessible fonts (e.g. I like good distinction between 0,o,O or 1,i,l), I don't know how to critically evaluate them. What should one consider when choosing a font for visual accessibility?
Liam McGee gave a useful response from the perpsective of dyslexic accessibility. The short version is that ostensibly dyslexic accessible fonts might not be that useful after all.
With regards to dyslexia (according to Liam):
- They don't have much evidential backup... [see] https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5629233/ https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5934461/
- In general, using particular fonts are shown to help particular people with dyslexia (sans-serif is better for some, some like comic sans, distressingly) but I have yet to see evidence for a single font being generally helpful.
- https://www.linkedin.com/pulse/dyslexic-myths-presented-truths-gareth-ford-williams/ is worth reading on the subject.
- also https://www.linkedin.com/posts/christophestrobbe_at-the-bbc-20-fonts-were-tested-for-readability-activity-7001490480043540480-7idF/
- And... https://dyslexiaida.org/do-special-fonts-help-people-with-dyslexia/
- https://link.springer.com/article/10.1007/s11881-018-0164-z
- And, more nuanced: https://onlinelibrary.wiley.com/doi/10.1002/dys.1527
More generally:
- ...distinguishability is important, as is kerning.
- A guide to understanding what makes a typeface accessible – And how to make more informed design decisions: https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0
- Don't overlook more general typography such as leading and margins. https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style is an excellent reference for this.
- Which informed a thesis style: https://bitbucket.org/amiede/classicthesis/wiki/Home
Liam also insightfully noted that “Accessibility is just aesthetics with a more sensitive gauge… where the consequence of a lack of clarity, harmony and structure is greater to some people than to others... But good typography and layout is definitely an accessibility aid.” Great point!
Liam also mentioned the 2:3 aspect ratio which is “12mm off the side of A4 (so 198x297)”, where “2:3... cut in half, it's 3:4... cut in half, 2:3. Like a musical harmonic.”
Other than the above, I note that SIL publishes various open source fonts, including Charis SIL (“optimized for readability”) and Andika (for the needs of “beginning readers”), both with wide character coverage for various languages. What's cool is that SIL hosts a TypeTuner which allows you to customise font features (e.g. whether to have slashes through 0
s and 7
s) and download their fonts with those features enabled.
Unless otherwise stated, all original content in this post is shared under the Creative Commons Attribution-ShareAlike 4.0 license (CC BY-SA 4.0).