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.

migrated from ux.stackexchange.com Jan 11 at 10:58

This question came from our site for user experience researchers and experts.

  • 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. – Emilie Jan 11 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 Jan 11 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. – Emilie Jan 12 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 Jan 12 at 20:29
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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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