Having trouble with contrast ratios

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.

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.

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.