My current research focus is readability and accessibility of web content. As an invited expert of the W3C/AGWG (World Wide Web Consortium Accessibility Guidelines Working Group) I've been involved in co-authoring the future WCAG 3 (W3C Accessibility Guidelines 3), namely contrast/color related specifications. I'm a Color Scientist at Myndex Research and the creator of APCA (Accessible Perceptual Contrast Algorithm) Methods and Guidelines.
That said, I'll chime in with a few thoughts. Opinions expressed are my own and do not necessarily reflect those of the W3C or AGWG.
We never want to sacrifice usability for accessibility
Well good! Because usability is accessibility. Or vice versa.
The whole point of accessibility is to make content easy to read, understand, and interact with. For everyone.
If you ever feel that you're sacrificing usability for accessibility, then something is very wrong.
- Create brighter, accessible friendly colors instead of all colors simply being dark and mundane
Yipe! "Brighter" does not necessarily mean accessibility friendly. For instance, a layout that is filled with lots of bright saturated colors all over the place can be cognitively overstimulating for some.
And a bright white background behind text in light mode is fatiguing.
As for "accessible colors", that can have more than one meaning—see the "Deeper Dive" below.
- Ensure colors that pass contrast in light mode also pass in dark mode
Use adjusted colors, don't try to shoehorn a color into working for both modes as you'll find it very frustrating and end up with non-accessible results, not to mention:
WCAG 2.x contrast math does not work for dark mode, use APCA instead for dark mode (or all modes).
- If you have a rare legal requirement, like Ontario, that requires strict 1.4.3 compliance, then use WCAG 2 or BridgePCA for light mode, and APCA for dark mode, as WCAG 2 only requires one mode.
It is usually best to maintain the same or similar hue for interactive controls between modes for cognitive reasons.
- The inverted or negative look can be very confusing.
- but a deep red for light mode needs to be a light red or pink to be used with dark mode.
- pure red or pure blue needs to be the darkest color in a pair of colors.
And now a deeper dive:
Readability and Accommodating CVD User Needs
User needs follows two broad categories
- READABILITY requires good acuity and contrast sensitivity
- DISCERNIBILITY requires color discrimination and recognition
With or without color vision deficiency (CVD) all visual readers require ample luminance contrast for fluent readability. Those with CVD do not need any extra or different consideration when it comes to luminance contrast, the singular exception would be red against black for those with protan, as they see red darker they lose luminance contrast for the specific case of red against black or red against a dark color.
All vision types need very good luminance contrast because the high spatial frequency of text, especially body text, has a much lower threshold of contrast sensitivity. Color contrasts, as in hue or chroma, do not play into readability, except if they interfere with luminance contrast or cause chromatic aberration.
As such, the content author need only to make sure that all sighted users have ample luminance contrast for readability, based on the importance of the use-case of the particular text.
The only CVD need is prohibiting text that's red against black for protan, and avoiding color pairs that interfere with reading.
CVD do have functional problems differentiating some hues, and therefore a user need towards discerning differences between items, particularly for things like color-coded data on a map.
For this reason, the single most important thing to do is to ensure that there is something other than pure color communicating the information. Color, as in Hue and colorfulness, should never be the sole means of communicating information.
This is important for all forms of vision, and all visual users. For instance cultural differences may result in different color interpretations, so rely on non-color dependent indicators to accommodate all visual users.
Accommodating color-coding in non-text largely requires that all color-coded information is discernible and understandable without the color (hue) being present, in other words, make it a functional design in black-and-white first.
"make it right in black-and-white"
The content author need only to make sure that all sighted users have ample luminance contrast for readability.
All color-coded information must be understandable without the color being present.
Color as in hue is a useful tool to enhance information,
but not to be the sole source of information.
It's important to remember that the contrast calculation in WCAG_2.x cannot properly calculate for dark mode. SC 1.4.3 is not at all suitable for dark mode. Take a look at this comparative example:
Bridge PCA, APCA-W3, or even DeltaPhiStar can calculate for dark mode much more effectively.
APCA Brief Overview
For the quick intro to modern perceptually uniform contrast, see "Why APCA"
The FAA study on accessible color palettes
You might find the FAA's study on accessible colors for video displays interesting, at least to skim over.
Modern Color/Contrast Theory
The Realities And Myths Of Contrast And Color
A plain language, as brief as humanly possible yet in-depth primer to vision, color, and contrast for design, with an emphasis on typography and readability needs. Published at Smashing Magazine.
Opinions expressed herein are mine and do not necessarily reflect those of the W3C.