0

I am working on an app that helps the user create data visualizations. Long story short, I need it to be able to tell when two colors will be in high contrast with one another or not, so that it can assign similar/dfferent colors to similar/different values.

The first idea I tried to treat the RGB numbers that determine a color as coordinates in space, measure the distance and use that number as a "numeric way of expressing contrast". However, after some testing, I think this method overestimates differences between dark colors while it underestimates those between lighter ones. For example, according to this procedure, (128, 128, 128) is the mean point between black (0,0,0) and white (255,255,255), but at least to my eyes, (128,128,128) appears way closer to black than to white.

So, my question is, is there a way to translate contrast between two colors into a number?

  • Is this for overlaying colors or colors next to each other? – Zach Saucier Mar 28 at 17:21
  • Contrast ratio like this one? webaim.org/resources/contrastchecker – Luciano Mar 28 at 17:28
  • 1
    Have a look at chroma.js - a javascript library for color math. Check out the "contrast", "distance" and "deltaE" methods. – Wolff Mar 28 at 21:03
  • If, and i mean if, you want to use naive color computations then you need to at minimum reverse gamma correct color values before comparing the numbers. Anyway there is no good answer to the question just a number of tradeoffs. I mean if you have Munsell color data use it because its comprehensive, but hard to work with. PS distance is ok but it does not imply interpolation btw. – joojaa Mar 29 at 5:49
  • 2
3

Eyes and screens are nonlinear in a complex way, so no simple difference calculations with RGB numbers are useful. Serious scientific research has been done and we have got some recommendations how RGB numbers should be used when one wants to estimate the difference between 2 colors. This is, of course, for deciding if texts are readable on usual sRGB displays.

One well known calculation formula is recommended by WWW Consortium. You can find it here:

https://www.w3.org/TR/2008/REC-WCAG20-20081211

I give a couple of screenshots of it.

The subjective distance between 2 colors is defined as contrast ratio. It's defined with the following formula:

enter image description here

Relative luminances of the colors are calculated from their RGB numbers with the following formula:

enter image description here

The formulas can seem complex, but actually they are elementary math, no university level math skills are needed. The same formulas are also implemented as online calculators for those who want the result without calculations.

Contrast ratio isn't "distance" in the same sense as geometric distance. Minimum value of contrast ratio is 1 (=no contrast at all), minimum geometric distance =0. If you need zero as the minimum, take a logarithm.

There's also another important difference. W3C's Contrast ratio is designed to help to keep webpages readable also when one cannot see well hue differences, so it's essentially black&white contrast only.

If you want to present as well the differences of luminances as differences of other color qualities, the problem is different. Many attempts are done to create plausible full color difference measures. There's a Wikipedia article of them:

https://en.wikipedia.org/wiki/Color_difference

I pick out one relatively easy to understand version from there. It's for colors presented in CIELab color system (=Lab mode in Photoshop) and the formula is known as CIE76 color difference.

Let your 2 colors have Lab color numbers L1,a1,b1 and L2,a2,b2. Calculate euclidean distance between the number triplets:

CIE76 distance=squareroot((L1-L2)^2+(a1-a2)^2+(b1-b2)^2)

Conversion between RGB and Lab is tricky. You must learn quite thoroughly the meaning of Lab numbers to understand it. To understand Lab fully one must at first understand XYZ color system which is the basic model for seen colors. Full conversion formulas are beyond the scope of this answer, but you can find them with web searches. Here's one place:

http://www.brucelindbloom.com/index.html?Math.html

You can also pick the needed formulas from Wikipedia articles. Start from here: https://en.wikipedia.org/wiki/CIELAB_color_space

My own opinions: I do not like CIE76 distance. It shows substantial distance between two blacks - two Lab colors with different a and b, but zero L. I would multiply CIE76 distance with a number which is zero if the more luminous color of the two colors under comparison is black. A proper multiplier could be the sum of the L numbers. Or some it's power with exponent < 1.

Proper scientists obviously have noticed the same, but their corrected formulas are more complex. The same Wikipedia article of color differences shows several of them.

  • Hi! Thank you for your answer. There is no problem with the math being complex, since it will be done on the fly by the computer. The only relevant thing is that it makes justice to the way humans perceive contrast – David Mar 29 at 7:14
0

I'd use the colour wheel as the maths conception most ;likely to help you with colour contrast.

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.