10

So we are remaking an enterprise app from scratch. This time we want to do 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?

  • Genuinely interesting question this one. One other consideration could possibly be to add some user customisation in here - let them choose their own contrast / colours for their settings. So, a default Day / Night option and another custom setting that they can configure themselves. That way you maintain contrast accessibility standards for both Day and Night modes but also offer additional flexibility for those that want it. – JonW Feb 1 at 11:35
  • 2
    @JonW, oh, we used to have that in some other part of the app - they'd set red (and i mean #FF0000) background and magenta text, "because those are my favourite colours" and complain that the app gives them migraines... That's an extreme anecdote, of course, but I'm scared of letting users customise too much after that. I got your point, though, thanks. – exp Feb 1 at 11:50
  • Haha, yeah people will find something to complain about! What about an + / - toggle for them to brighten/darken the text then? – JonW Feb 1 at 11:53
  • Did you ask whether those users typically use dark themes for other apps? Switching to a dark theme when you're used to a (default) light theme for everything else can be very jarring for folks who aren't used to it. – A C Feb 1 at 18:44
9

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).

  • You've emphasized light-on-dark font does not make text easier to read at night and have also provided references, but you haven't linked those two together. Which reference(s) talk about how light-on-dark is not easier to read to night? I'm very curious because my lifetime experience is the exact opposite: light-on-dark is always easier to read at night, specifically for the reason you mentioned: by reducing the amount of light shining from the device, the user maintains dark adaptation in order to see other things which for me includes the device itself. – studog Feb 1 at 19:44
  • 1
    @studog: I added a couple of cites (the first two). If you’re looking at a relatively bright display at night, you won’t need dark adaptation to see it precisely because it’s bright. So, no, the display brightness doesn’t reduce your ability to see the display itself even at night. It enhances it by contracting the pupils and thus improving sharpness. It’s only when you look away to other things in the dark that it’s a problem. – Michael Zuschlag Feb 1 at 21:35
  • @studog: What you might be experiencing is that if you’re dark-adapted then look at a bright display, it may be too bright, and that could problem, but that is just another reason why you need a dim display if the user is switching repeatedly between the display and objects in the dark. – Michael Zuschlag Feb 1 at 21:35
  • 2
    Anecdotal datapoint: I am one of those users who aren't dyslexic, and can't stand white on black on computer screens, and the subjective perception has always been that of too much contrast. I just tried it, and I can easily read 50% grey text on black background, while the same text in the same size in white creates the familiar feeling that I, independently of this question, connect with too much contrast. It is as if I am seeing each edge too hard. I also tried a 1 px vertical white line on black, and it creates the same problem, so it is not due to font antializing. – rumtscho Feb 1 at 21:47
3

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.

  • Where do you get 21:1 for black and white? I'd think that if you had a true black, you could get any contrast ratio you wanted out of white. – Mark Feb 1 at 23:33
  • Using one of the colour contrast tools (e.g., Lea Verou's) with the hexadecimal values of #000000 and #ffffff (pure black and pure white in hex). – Karl Brown Feb 2 at 7:08
0

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. :-/)

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.