📚 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.
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.
The few places APCA passes colors that WCAG 2 contrast rejects, are cases where the rejected colors are actually better for those with color vision deficiency.
In other words, WCAG 2 contrast isn't just wrong, its results can negatively impact readability.
APCA substantially exceeds WCAG2 contrast in terms of actual accessibility, especially for dark mode.
WCAG 2 contrast SCs are essentially unusable for dark mode, and can be harmful to actual accessibility & readability. The fact that the EU is putting WCAG2 contrast into law is unfortunate.
WCAG 2 contrast is not based on any relevant readability research. WCAG 2 contrast is not peer reviewed, and the statements made in the understanding doc lack scientific support.
APCA is a key part of the APCA Readability Criterion, published by Inclusive Reading Technologies.
I created smalls tools for my own personal needs, and I share it with you, if it cans benefit to someone else: https://a11y.sp3r4z.fr/colors/
It's a contrast checker based on WCAG 2.2 rules and APCA (still under development) rules, and some small other tools too.
I know it's quite basic, not really accessible and very messy, but well… 😊
Comments and ideas welcomed.
APCA is a key part of the APCA Readability Criterion, the draft standard from the non-profit Inclusive Reading Technologies, Inc.
2025 should be the year you stop using WCAG 2 colour contrast testing, and switch to APCA. This article is a few years old, and covers everything well. https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/
APCA is part of the APCA Readability Criterion, an open standard available from Inclusive Reading Technologies, Inc. A California non-profit, dedicated to science-based standards and research to improve readability for all.
Indeed: If color management is enabled (on any system, Win/Mac/Lix) the dropper may provide unpredictable results. Choosing a default sRGB profile while using the picker may help mitigate issues.
Better to use a stand alone dropper tool that is color management aware.
For MacOS, that's "Classic Color Meter" desktop app.
Discussion and best practices in our draft guidelines:
https://readtech.org/ARC/tests/visual-readability-contrast/?tn=methods#tool-setup
"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.
I recently switched from WCAG2 to APCA on my personnal projects, so I needed a simple tool to check color contrasts against that new guideline.
Did not find the existing ones efficient enough so quickly developped one that suited my needs.
More: https://villapirorum.netlify.app/web/
The tool: https://villapirorum.netlify.app/web/contrasted-colors/
WCAG 2.0: https://www.w3.org/TR/WCAG20
APCA : https://git.apcacontrast.com
A more sophisticated APCA tool : https://contrast.tools
And here’s the first draft of a perceptually uniform palette, created with @ardov’s incredible tool Huetone.
You can tune the LCH values until you get the desired color and check the APCA and WCAG contrast values.
