📚 Let's Make Reading Fun Again 📖👓
We are a non-profit focused on research with the aim of improving accessibility and visually enhanced readability for all.
| https://twitter.com/A11yReadTech | |
| Readability Criterion | https://readtech.org |
| APCA calculator | https://apcacontrast.com |
| Colorblind Simulator | https://www.myndex.com/CVD/ |
I'm working on a #SwiftUI view modifier that calculates a foreground Color that maintains sufficient contrast with the background and also takes the font into account. This can improve #accessibility without too much design-time overhead.
It's using APCA by @Myndex.
Elaborating on this a bit more, looking at the version with the solid bars connecting the in and out-of-shadow dots.
These bars are each the same color throughout, but notice on the grey bar that it appears to have a gradient in the area where it crosses the shadow.
"Unvetted" is WCAG 2 contrast, which had no testing, no peer review, and in fact was objected to by stakeholders like IBM back in 2008.
APCA has undergone over three years of public beta testing. The current version has been stable since February 15, 2021, and has had substantial third party expert review, including journal published peer-review, review by PhD-level accessibility experts, and was created with the oversight of W3C/WAI in the Visual Contrast Group and LVTF, which includes members of the US Access Board.
As is well known, the open public testing and open discussion continues at:
https://github.com/Myndex/SAPC-APCA/discussions
WCAG3 did a full reset, starting nearly from scratch. Because visual accessibility is a critical need, APCA guidelines are in public working draft stage as the APC Readability Criteria, a guideline hosted by the non-profit Inclusive Reading Technologies, Inc. https://readtech.org/ARC/
Questions and comments welcome at the GitHub forum linked above.
I'm severely colourblind - my eyes can hardly detect red light at all.
So, working in web development, picking colour schemes is hard.
There are tools around to help you pick accessible colour schemes, but they assume that you can tell by looking that a colour is the one you want, and the only information you need the computer to calculate is the contrast ratio.
I realised I need a tool that will take the name of a colour and find a shade that gives a target contrast ratio.
Here it is: https://colourblind-palette-maker.glitch.me/
It uses the new APCA perceptual contrast algorithm and the Oklab colour space to help me find colours that people with better colour vision will interpret correctly, while ensuring there's good contrast for as many people as possible.
Recent positive, independent peer review of APCA:
"...15 years since the adoption of WCAG 2.0...enhanced color models adapted to human perception, have been developed...APCA shows more accurate results for measuring color contrast..."
#a11y #Webdesign #accessibility #color #colour #contrast #APCA #WCAG
Color contrast tools to check against APCA
EL introduced me to contrast.tools recently, it uses the Advanced Perception of Color Algorithm (APCA) to check the accessibility of your text based on the desired colors and the font weight + size. But importantly, it also provides a lookup table to verify how you should (possibly, probably) interpret things.
I think that APCA is being floated as the new contrast…
https://piperhaywood.com/color-contrast-tools-to-check-against-apca/
The other day I was trying to understand how much different colors contrast with each other so I’ve built a toy that you can play around with and see it!
You can change the background and foreground color and see how much they contrast with both #wcag and #APCA
Let me know what you think
@agvbergin @cwilcox808 @dkieffer
Yes halation in dark mode can be an issue. But in order to set a max contrast, the contrast calculation has to be perceptually uniform. WCAG2 contrast is not accurate to use this way, and WCAG2 is also not useful for dark mode.
APCA can calculate for dark mode, and we are testing the following maximums (negative Lc value means light text/dark BG).
DARK MODE MAX
Small text (under 24px): Lc -90 max
Medium bold text (24-36px): Lc -85max
Large text (>36px) and thick solid icons or buttons: Lc -80
And Lc -75 max if the BG is darker than `#333333 `
We have a discussion thread on the subject at the APCA forum: https://github.com/Myndex/SAPC-APCA/discussions/106
I was recently interviewed by Colleen Gratzer at @creativeboostco regarding APCA, Inclusive Reading Technologies, and guideline development.
We covered the important basics of perceptual uniformity, with ample visual examples.
robb
Myndex 🔵
Marc Edwards
Christian Lawson-Perfect
Piper Haywood
Amalgam
