: How to calculate the best type colour for a random background colour? I might need to present content at multiple levels depending on the distance of the observer to a display. Let's say from

@Cugini998

Here my earlier answer to essentially the same question at Game Development Stack Exchange.

To summarize, like the other answers here suggest, you should generally use either black or white, depending on which one contrasts better with the background. (Of course, if you like, giving either color a slight tint won't affect the contrast much.)

Note that, in order to correctly determine how dark or light a color appears to the user, it's not enough to just average the RGB color values (or to take the lightness / value of a HSL / HSV color). Rather, you need to account for (at least) two effects:


non-linearity of the device the color is displayed on, which (for RGB colors on computer screens, at least) tends to darken midtones, and
spectral sensitivity of the human eye, which, roughly speaking, causes color near the middle of the visible spectrum (green, yellow, cyan) to appear brighter than those near the edges (blue, red, purple).


The first issue can be accounted for by gamma expansion, while the second simply requires a non-uniform weighting of the R/G/B color channels. Put together, here's how to approximately calculate the perceived brightness of an RGB color, and decide whether black or white would contrast with it better:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
+ 0.7152 * pow( G, gamma )
+ 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );


That's assuming that R, G and B are floating-point numbers between 0.0 to 1.0. If you have e.g. integers from 0 to 255, convert them to floats and divide them by 255.

The constants in the code above are (approximately) correct for sRGB input; you can adjust them if you're working in some other color space, although the exact values don't really matter all that much: for sufficiently dark or light colors the answer will be the same anyway, while colors falling near the borderline will contrast just about equally well with either black or white anyway.

Vote Up Vote Down

@Kaufman565

I agree with John, keep the text as much as possible black/white just to be sure,
you can add a small amount of saturation to the text also and you're safe.
Here is a small test:



View in 100% here: flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Download the .ai(source) file here to play around: flavius.clickgarden.net/random-hsb-bg-readable-text/test.ai

Vote Up Vote Down

@Smith574

Readability is all about contrast. I'd try and determine how dark each background color is in greyscale, and if it is above a 50% grey (more dark than light), use white text, below 50% use black text. This will ensure that you have at least a 50% contrast (difference in tone) to make your text readable.

This method is a lot easier than trying to play with complimentary colors or inverting and guarantees maximum tonal contrast on any color.

Vote Up Vote Down