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?

  • 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
    Commented Feb 1, 2019 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
    Commented Feb 1, 2019 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
    Commented Feb 1, 2019 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
    Commented Feb 1, 2019 at 18:44
  • We haven't asked. The main reason for the dark theme is our app replaced some ancient software working on DOS that had black background and white text (which, now to think about it, had maximum contrast), so not to overwhelm the migrating users, the "night theme" was a way to transition, that grew to be a feature that new users still use.
    – exp
    Commented Feb 27, 2019 at 7:26

4 Answers 4


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.


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
    Commented Feb 1, 2019 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. Commented Feb 1, 2019 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. Commented Feb 1, 2019 at 21:35
  • 3
    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
    Commented Feb 1, 2019 at 21:47
  • More anecdata: As someone who suffers from both migraines and eye-strain related headaches, the issue isn't legibility: in my case, I am typically unable to read even a single page in high contrast without significant discomfort. I also have heard complaints from colleagues without my level of sensitivity if there is too much bright white or an overly bright color. That said, there are many options device-level options to decrease contrast/harshness of white, such as "night light" mode, "comfort" mode, etc. that work well for me on computers and on phones.
    – AlannaRose
    Commented Nov 12, 2019 at 18:59

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
    Commented Feb 1, 2019 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
    Commented Feb 2, 2019 at 7:08
  • 2
    @Mark The 21:1 is the max contrast as calculated by the WCAG 2.x guidelines. It has a forced luminance addition that prevents absolute black, intended as a way to prevent infinite contrast values with dark colors. Unfortunately the math is not perceptually uniform and still does not prevent a lot of unreadable colors. Disclosure: I am developing the new method for WCAG 3, called APCA, which is a different approach (and also specifies a maximum for large bold elements).
    – Myndex
    Commented Oct 27, 2021 at 3:25

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

dark mode comparison. This infographic shows two areas using the minimum contrast for dark mode, on the left the minimums for WCAG2 which are unreadable, and on the right the minimums for APCA which are readable.

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

  • Good contribution. What tool(s) did you use to generate the image you included? BTW, I also find 85% of the peak white imminence acceptable for high peaks in dark mode. I use 75% for primary text elements. As a bonus, with today's overbright monitors, it's generally easier for the user to turn imminence up a notch, than to turn it down. Commented Jul 20, 2023 at 10:35
  • 1
    HI @RockPaperLz-MaskitorCasket the image is a screenshot from a browser the elements were created in HTML and CSS, and color values were calculated using WebAim.com for WCAG2, and apcacontrast.com for APCA. The APCA text values are about 60 to 100, depending on font size. Remember it is the spatial characteristics that are most important for contrast when we are talking about small/thin, such as text. Also I assume by "imminence" you mean luminance.
    – Myndex
    Commented Jul 20, 2023 at 21:23
  • Thank you for the references. I thought perhaps there was a site already set up to create the image you provided. Would you mind expanding on your comment regarding "spatial characteristics" with 1 or 2 clarifying sentences? Oh, and I think I may have figured out how "imminence" got in there. I likely missed clicking on "luminance" in my spell-checker by a pixel. The erroneous correction sure does make my comment more intriguing! Commented Jul 23, 2023 at 23:59
  • 1
    Hi @RockPaperLz-MaskitorCasket spatial relates to size/weight/thickness. Here's a link that discusses it with a descriptive infographic: git.apcacontrast.com/documentation/WhyAPCA
    – Myndex
    Commented Jul 25, 2023 at 5:05
  • 1
    Thank you for the link and your ongoing research. I find it very illuminating. Commented Jul 26, 2023 at 18:41

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 agree to our terms of service and acknowledge you have read our privacy policy.

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