Recently I had to display labels on a livestream and be sure that their color would be such that they are readable without knowing in advance what the livestream would display. The fit-them-all solution is to use white with a black outline (or the opposite), but it makes bulky labels. Then, how to choose only white or black to maximise visibility, and is using other colors useful ? This article is a short memo of my results.

Given how subjective and complex the concept of color is, I knew the solution wouldn't be obvious and definitive. Then instead of falling into another rabbit hole, I've settled on one I'm happy with and share it only as a source of inspiration if you're looking for your own solution. I invite you to also take a look at other opinions, here for example. Also be aware that I'm color blind, so...

If we reduce the problem to choosing from black and white only, then we can simply choose white over a dark color and black over a bright color. To determine if a color is dark or bright, we can use the Y component (luminance) of the color in XYZ color space (cf my previous article about color spaces). Defining a threshold, we can get the contrasting color.

FUNCTION GetHighContrastWB(rgb): xyz = RGB2XYZ(rgb) IF xyz.[1] > 0.25 THEN RETURN black ELSE RETURN white

The result looks like this (for each little square the inside square is the contrasting color of its surrounding square):

That looks perfect to me. But, would more colors make things even better ?

Referring to the cone shape of the XYZ color space one could expect to get a good contrasting color by choosing from the opposite hue with max saturation and value. However saturation and value also affect the perception of contrast. After choosing several variations the one I liked the most was to keep the black/white selection for colors with relatively low saturation or value, and choose the opposite hue with maximum saturation and value for colors with high saturation and value.

FUNCTION GetHighContrastRGB(rgb): hsv = RGB2HSV(rgb) xyz = RGB2XYZ(rgb) IF hsv[1] > 0.66 AND hsv[2] > 0.66 THEN hsv[0] = (hsv[0] + 0.5) % 1.0 hsv[1] = 1.0 hsv[2] = 1.0; RETURN HSV2RGB(hsv) ELSE IF xyz.[1] > 0.25 THEN RETURN black ELSE RETURN white

The result looks like this:

Doesn't make a huge improvement to my own opinion, but it's also not worse so if for any reason colored labels are desirable, and the user happens to work with high value and saturation colors, this solution may be ok.