Maximum contrast ratio for good accessibility

Question

So we are remaking an enterprise app from scratch. This time we want to base our design decisions on proper research.

Our users use the app 24/7 with high requirements for UX. So our main goal is to make everything as easy to use and accessible as possible.

We used to have 2 color themes in the app: "day theme" (default, with light colors) and "night theme" (aka "the dark theme", for those who work at night). This time around we're having 3 themes: "day", "night" and a "high-contrast" one (aka the "accessibility theme") and we try to be WCAG2.1 compliant where we can.

Now, everything's good with the "day theme" (WCAG Level AA) and the "high-contrast theme" (WCAG level AAA), while we have some problems with the "night" one - users argue that WCAG Level AA is "way too contrast" ("too bright", "bad for my eyes") for working at night.

We've checked some other standards and guidelines, but they all talk about minimal requirements and never discuss the maximum.

Guidelines for newly released macOS "dark mode" state

For custom foreground and background colors, strive for a contrast ratio of 7:1. This ratio ensures that your foreground content stands out from the background, including when Desktop Tinting is active. It also ensures that your content meets more stringent accessibility guidelines. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1.

Which goes well with what we try to do with our night theme. We pass the Material Design guideline recommendations and Windows design guidelines too.

While, for example, Adobe Photoshop's darkest color theme has the ratio between small text and buttons drop to below 4:1 at times.

So my question is: is there any known research or standards that set "maximum caps" on contrast for working at night? Maybe some health implications for contrast being too high? Some other reasons not to maximise the contrast?

Answer 1

More Contrast Generally Better

There are no general standards for capping contrast for either day or night displays. Generally, the higher the contrast, the easier the reading in both cases (Parker & Schaff, 1998; Zuffi, Brambilla, Beretta, & Scala, 2007). Thus, your UI can have two independent dimensions: day versus night, and low versus high contrast, where high contrast is WCAG AAA compliant whether it’s day or night mode.

I would treat user complaints about excessive contrast with caution. Given that lower contrast (dark gray font) has recently been fashionable on many web sites, user may prefer it more because it looks cool and modern, rather than because it’s actually easier to read.

Contrast and Dyslexia

The only concerns about high contrast I’ve heard (and really the only reason to have a low-contrast mode at all) is that some individuals with dyslexia report letters appear “jumpy” at high contrast settings (Rello, Kanvinde, & Baeza-Yates, 2011). However, the effect is not well established or understood (e.g., O’Brien, Mansfield, & Legge, 2000), and there appears to be considerable individual variation (Rello, Kanvinde, & Baeza-Yates, 2011). It may be best to let the user choose the contrast, maybe continuously with a slider. In your comment exchange with JonW, you are right that user can pick horrible color combinations, but if you limit the range of the slider to between WCAG AAA and AA levels, users can’t make it too bad, and, in fact, users with disabilities seem to do okay with choosing their contrast and even (subtle) colors (Gregor & Newell, 2000).

So, I recommend making contrast user-adjustable within the limits of WCAG, but to default to high contrast, and perhaps provide some in-line documentation on how to adjust the contrast slider (“Accessibility: slide until letters are easiest to see and don’t seem to move”).

Maybe the Problem is Night Mode

Now, about night mode. You don’t describe your environment of use, but for everyone’s benefit, light-on-dark font does not make text easier to read at night. Dark-on-light is consistently easier to read in light or dark conditions (Buchner & Baumgartener, 2007; Dobres, Chahine, & Reimer, 2017). There are several theories for this (Scharff & Ahumada, 2003), but it might come down to modern computer fonts being designed for dark-on-light use. In any case, your user complaints about the light-on-dark being too contrasty might really be complaints about light-on-dark itself being hard to read, and not really a problem with the contrast.

The purpose of night mode is to make everything else at night easier to see. That is, by reducing the amount of light shining from the device, the user maintains dark adaptation in order to see other things. If your users are not interacting with dark objects while using your device, then you don’t want light-on-dark regardless of the ambient illumination.

Even if your users do need to maintain dark adaption, you may want to consider other methods to reduce the light coming from the display. For example, you may want to physically dim the display or even put a physical neutral density filter over it, all while keeping the easier-to-read dark-on-light text. Keep in mind, however, that anything you do to reduce display illumination will reduce display readability. As the human eye dilates for dark adaptation, focusing becomes more difficult, especially for older users. You need to decide if it's worth the trade-off in your case.

References

Buchner & Baumgartner, 2007. Text – background polarity affects performance irrespective of ambient illumination and colour contrast. Ergonomics, 50, 1036-1063.

Dobres, Chahine, & Reimer, 2017. Effects of ambient llumination, contrast polarity, and letter size on text legibility under glance-like reading. Applied Ergonomics, 60, 68-73.

Gregor & Newell, 2000. An Empirical Investigation of Ways in Which Some of the Problems Encountered by Some Dyslexics May be Alleviated using Computer Techniques. Proceedings of the fourth international ACM conference on Assistive technologies, Arlington, VA.

O’Brien, Mansfield, & Legge, 2000. The effect of contrast on reading speed in dyslexia. Vision Research 40, 1921–193.

Parker &, Scharff, 1998. Influences of Contrast Sensitivity on Text Readability in the Context of a Graphical User Interface.

Rello, Kanvinde, & Baeza-Yates, 2011. Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics. Proceedings of the International Cross-Disciplinary Conference on Web Accessibility, Lyon, France.

Scharff & Ahumada 2003. Letter identification performance is better for negative contrast than positive contrast. Vision Sciences Society Annual Meeting, Sarasota FL

Zuffi, Brambilla, Beretta, & Scala, 2007. Human Computer Interaction: Legibility and Contrast. 14th International Conference on Image Analysis and Processing (ICIAP 2007).

Answer 2

There're no maximum contrasts in WCAG as it's more focused on those with difficulty processing the differences in background and foreground information (either audio, or more usually visual).

The absolute highest contrast ratio I know of is 21:1, which is black and white (contrast is darkest colour vs lightest colour rather than foreground vs background), so you've got plenty of room to move if looking to adhere to AAA compliance, together with some 280 quadrillion+ colour combinations across the entire hexidecimal colour palette.

What typically happens at night isn't a contrast issue, but a brightness issue. Lighter colours used with darker ones tend to pop more, and this becomes especially true in low-light (night) scenarios. Brightness is something that's usually the domain of the Visual Display Unit (VDU) or device rather than an app, but you might be able to tone down the colours to reduce the apparent brightness (or maybe there's a way to actually alter the device brightness? Might be one for the devs).

Playing with the colour palette might be the best option, as reducing the apparent brightness should have a similar effect to reducing the actual brightness.

Answer 3

...users argue that WCAG Level AA is "way too contrast"...

For dark mode? I find that challenging to believe, because WCAG 2.x contrast can not calculate for dark mode. Here's an example, compared to a modern perceptually uniform contrast measure:

As should be abundantly clear, there's no way that WCAG2's weak thresholds create "too much contrast" in dark mode. I would be very curious to see the example and see what the actual color values are, and where they sit within the visual range.

Max Headroom

The maximum contrast issue is a matter of some ongoing research, it is largely related to excess luminance for the given adaptation state of the human vision system. It has complications due to phenomenon such as disability glare, scattering caused by aging ocular media, astigmatisms, and so forth.

And all of these issues are compounded with emerging monitor technologies such as HDR.

As a general guideline, keeping the brightest element that someone should be focusing on, such as text and the immediate area surrounding text, less than about 85% of the peak white luminance of the display. But this is also assuming that the display is calibrated and adjusted appropriately for the given ambient illumination.

And then we get into a bunch of handwaving is related to the overall conditions in the immediate environment. For instance it's reasonable to suggest that there be at least two different dark modes. A dark mode for use in a daytime environment, and a dark mode for use in a nighttime environment.

For light mode, usually "maximum" contrast is ideal, especially for body text. But when I say maximum contrast, I still mean reducing the luminance of the text's immediately surrounding background to about 85% of the peak luminance of the display, again assuming an SDR sRGB display. In light mode, when I say maximum contrast what I really mean is black text as in #000000 -- the correct way to reduce contrast in light mode is to make a bright screen darker (or the font thinner), not to make dark text lighter. (see "Please Stop Using Grey Text")

Answer 4

This isn't so much official research as design with some empirical experimentation but Solarized does very well: has both a light and dark theme and has been designed to be low-contrast but still contrasting.

I've been using it for a couple of years and don't see myself ever not using it. It's great during the day when co-workers are around and the lights are lit, and great during the evening when the timer turns the lights off. (I'm a lights-off type in an open-concept workspace. :-/)