2

I’ve been doing some work on trying to figure out some color themes for light and dark modes for a UI (aren't we all these days?). Basically, given a particular light theme how might we determine the “equivalent” dark theme? After a couple of experiments/prototypes I started to use contrast ratios between colors to calculate the dark version of the UI. For one version, the hypothesis was that if the contrast ratios were the same between two colors across light and dark themes, they would be just as easy to distinguish in either mode. I think I’m learning that is not the case…because of how math works. I was hoping someone here might have some insight on this. I’ve been scratching my head on it for a while.

Example
In the image below I have two sets of colors (light set and a dark set). The contrast ratio for the two sets are both 1.48. I would think that if two sets of colors had the same contrast ratio they would also appear to have a similar difference between the background and foreground of each set.

Note: Given a contrast ratio of 1.48, I know that these particular colors shouldn’t be for text but this is just an example to illustrate a problem.

enter image description here

However, in the image above the light set of colors seem much easier to distinguish than the dark set. I know this is a bit subjective and can depend on a number of factors (my monitor, calibration, ambient lighting, how good my eyes are, etc..) but I was thinking that a similar contrast ratio would appear to have a more similar difference.

It starts to make sense as I consider how math works, though. Darker colors at a given contrast ratio are going to be closer together in terms of relative luminance as opposed to lighter colors.

In contrast (no pun intended), if I consider colors that have the same difference in relative luminance as opposed to ratio I end up with colors that look more similar (to me)...but still not right.

![[image]

All in all, I’m struggling to figure out if there is a way to calculate a dark theme based on a given light theme.

  • Should I be basing it on something other than relative luminance and their difference/contrast ratio?
  • Am I misusing contrast ratio in this case as it is typically (but not exclusively) targeted at text on background scenarios?
  • Am I just crazy and the images above that use contrast ratios do, indeed, seem similar?
  • Have I overthought all of this and there is a much simpler solution to create an “equivalent” dark theme from a given light theme? Equivalent, in this case, means that all elements of the UI are just as distinguishable and legible across both themes.

Thanks for your time.

4
  • 1
    I always tell my students to use their eye, not their "brain" or "math". When it comes to perception, you will be better served by trusting your eye. If I were you, I'd start with your 2nd method and tweak from there.
    – curious
    Commented Jan 11, 2019 at 11:58
  • Thanks for the input. At some level, I think am trying to use my eyes but ultimately trying to extract something more objective from what I am perceiving. My eyes are not my user's eyes and just can't be used as an objective source of truth.
    – Nate
    Commented Jan 11, 2019 at 17:19
  • Beyond the eyes, your monitor is also not your user's monitor. I totally get wanting to get the details right but I think you're looking for something that is really elusive. And how will you know it's right "for sure" just by looking at the numbers? If equivalence is a really important criteria for your project, I would suggest doing hiring testers to compare different iterations of light vs. dark themes.
    – curious
    Commented Jan 12, 2019 at 3:00
  • @Emilie I think, unless your dealing with illusions, that the math can be correct. But its just really really complicated too. You need to be able to calculate the colors in the right space, as in general rgb colors are not linear so any basic level math gets thrown out of the window in a second. So any naive math is just totally lost. So unless you actually did a LOT of math beyond high school level, beware dangerous things lie this way. In general if one thinks a hex code is a color and does any computation on that then all the calculations are just wrong, just nit how colors work.
    – joojaa
    Commented Jan 12, 2019 at 20:29

3 Answers 3

2

It is actually hideously complicated to calculate with color. It is very very easy to make a mistake. Color as we know it is a human condition, it arises in the head. Color as a technical issue is a bit convoluted to say the least.

To understand color you need to understand that the system consist of at least 4 things that you must consider separately. Input into the system for processing, output of said system, the human eye and human brain.

enter image description here

Now dealing with the values at level of raw input t the monitor does you very little good. First the monitor is not linear.

So if we look at your first case you take the very naive assumption that color is linear. This is not true! You should never, ever, make this assumption. In both cases you have 43 units in between, the values. But the monitor space is not linear, it has a gamma correction on top of the image. Or not even a gamma correction most likely it has a modified gamma correction where few values close to 0 are in fact linear*, like in sRGB.

So the fact that your seeing a difference is expected, in fact if you wouldn't see this difference it would be more than suspect. Even the real math behind the display systems tells us so. If you want to calculate things on color you need to take this into account (only you need to decide how correct is correct enough for you since the calculations go very deep).

Now the way you deal with this is you switch to a device independent color space that does not have this kind of data non linearity. Which you have done. However this triggers the fact that we dont know how your monitor displays things. See the monitor has to be calibrated or profiled for us to even have a stab at knowing what it is sending to your eyes. The computer does not know, so if you want to do anything accurate then you must measure your monitor. Even if you have same brand of display it will display differently due to different age.

OK then the eye, bad news, if you want to see accurate colors on your display then you need to look at your display in a area where the monitor is the brightest source, but not dark. Also the background coloration and lighting has to be neutral or your color vision is off.** But the eye triggers all kinds of other things too like the pixel density, which affects how much the humans inbuilt sharpening mechanism triggers. Your later example triggers very heavy mach bands for me.

Then the brain. Ok, now it gets just plain weird. This is what @Danielillo is trying to tell you.

All in all i would say the later is correct, it's just that your monitor and environment is not really well defined. Color math is not for pedantic's.

* As per broadcast standard, but then you dont know if the system is doing a real gamma correction or not. :(

** If you reached this far you will realize that calculating this value accurately is a bit futile as it changes during this time. But this is still the procedure to take for best guess. Also you probably get why many wouldn't do this calculation.

0
1

Simultaneous Color Contrast

Mathematics doesn't apply to everything, for graphic designers there are other types of procedures, many of them refer to perception. Try changing visual perception with mathematics... maybe. But, as written on the question there are several casual factors such as monitor setting.

In color there are several rules (not dogmas), among them contrast is one of the most relevant. From all the color contrast types, the one that can be more useful to study and understand for this case is the simultaneous contrast. There are many examples online, one of the most famous is the Adelson Checker Shadow Illusion, where the A and B squares have the same color (#7F7F7F)

Checker Shadow Illusion

Simultaneous Color Contrast: the appearance of a color changes according to its context.

This simple rule applies to everything related to color combinations:

  • Place dark colors next to light colors and the dark colors will appear darker and the light colors will appear lighter. Or:
    • To make a color appear lighter: make it lighter or put a darker color surrounding.
    • To make a color appear darker: make it darker or put a lighter color surrounding.

At this image, the center bar has the same color (#7F7F7F).

gradient illusion

  • Place cool colors next to warm colors and the cool colors will appear cooler while the warm colors will appear warmer. Or:
    • To make a color appear warmer: change the hue or put a cooler color surrounding.
    • To make a color appear cooler: change the hue or put a warmer color surrounding.

cool/cold

  • Place saturated colors next to less saturated colors and the desaturated colors will appear less saturated while the saturated colors will appear more saturated. Or:
    • To make a color appear desaturated: just desaturate it or put a saturated color surrounding.
    • To make a color appear more saturated: just saturate it or put a desaturated color surrounding.

saturation

  • Using a color on a background of another color, both take hues, saturation and brightness of the adjacent color

enter image description here

More about simultaneous contrast

0

Short Answer

The WCAG 2.x contrast math is wrong in that it does not follow nor predict human perception of contrast. It can not be used to calculate dark mode.

Longer Answer

I realize this question is a few years old, but it's worth answering as there are more useful answers today that were not available in 2019.

In April of 2019, I made a post on GitHub pointing out that, essentially, the wrong math was being used to predict contrast. This led to extended research and creation of new contrast methods, notably APCA.

...I would think that if two sets of colors had the same contrast ratio they would also appear to have a similar difference between the background and foreground of each set.

Unfortunately, the ratios generated from WCAG 2.x math are not a great way to predict how a human will perceive contrast. Contrast is a perception, and does not follow linear maths in most contexts.

...if I consider colors that have the same difference in relative luminance as opposed to ratio I end up with colors that look more similar (to me)...but still not right.

You're on a better track here, but yes, simply measuring luminance difference is not going to be perceptually uniform (which, interestingly, is how the UK standard for architectural signage is based).

Light in the real world is mathematically linear, that is, if you have 100 photons of light and triple it, you then have 300 photons of light. But that change of 3x may only seem to be a slight increase, due to how our perception compresses a given range of light.

And the non-linear curve of perception is determined by a number of factors, including our present adaptation level, which is our vision adjusting to the current ambient illumination in our immediate environment.

The spatial frequency—how large or small and thin an element is—is also important, and the contrast of surrounding elements has an effect as we "adapt" to the relative contrast. In other words, if you have a design that is mostly low contrast (let's say 15), then a higher contrast of a given value (let's say 60) will seem more contrasty than that same high contrast (60) which is surrounded by other contrasts of 45 to 75. Put another way, the relative contrast difference than an absolute contrast value.

Our human perception is always relative to context, and not absolute.

Have I overthought all of this...

No. You're on the right track.

...[is there] a much simpler solution to create an “equivalent” dark theme from a given light theme?

There is now.

...Equivalent, in this case, means that all elements of the UI are just as distinguishable and legible across both themes.

So, I am working on an article on this very subject. What you need first is a perceptually uniform contrast prediction. APCA is one. Once you have a reasonably uniform contrast prediction across the visual range, then determine the center contrast for each polarity (light mode and dark mode) and use those centers to pivot.

With the current APCA constants (0.98g-4g) the contrast center for light mode is #9e9e9e and the center for dark mode is #a5a5a5. To simplify matters, we can just call center contrast #a0a0a0 for both light and dark modes.

Simple example

If #a0 is the text color, and we set a light background at contrast Lc45, our BG will be #f5f5f5. Now for the equivalent in dark mode, leave #a0 as the text color, and adjust a darker BG color for Lc -45, because dark mode values are negative. We get a BG color of #333

A more typical example

Let's start with a background color of #dbdbdb and a text color of #3a3a3a, giving us a contrast of Lc75.

The BG color #db is Lc30 from the center #a0 (with #a0 set as text). Now make #a0 the BG color, and find a text color that is the same distance, opposite direction—this will be Lc -30 because dark mode values are negative.

Text color #d6 is Lc -30 from BG color #a0, now adjust the BG color to find Lc -75, and we find BG color #36.

Text: #3a BG: #db light mode

Text: #d6 BG: #36 dark mode

Notes

Some of you may be saying "oh wait the center is #77 because that's about 18% and 18% is the center, right?" ... Well yes and no. While Ansel Adams and others like to have the center negative density exposed to about 18%, and for large patches of color 18% tends to seem about the middle between black and white, that does not mean that 18% is middle contrast.

Middle contrast is a different perception.

2
  • 1
    Thank you so much for the response. The question does have some cob webs on it. While I am not longer working on this, I am still curious and passionate about color systems...and general systems for design in a broader sense. Have begun looking at the APCA information you reference. As you well know, it is a mountain of information (since you created it) but I am happy know about it and learn more. Thanks again for responding to this dusty old question. :).
    – Nate
    Commented Jul 30, 2023 at 12:52
  • You're welcome @Nate and if you want we have a discussion forum on APCA and the APC-Readability Criterion It's on Github and it's of course free.
    – Myndex
    Commented Nov 8, 2023 at 7:03

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.