Selecting a color that will be readable overlapped upon another? [duplicate]

Question

I've got random circles from random colors of RBG (assume they can be any combination of values). I have some text I want to write on top of them but I want the color to be readable on it no matter the color of the bubble. How can I pick a complimentary color?

Answer 1

You can pick the opposite color by calculate like this:

maximum - color = opposite color

e.g. white(255,255,255) - red(255,0,0) = cyan(0,255,255)

You can also solve the problem by using a text with a border e.g. inner color white, outher color black -> if the background is black, you cannot see the outer border but the inner white. If the background is white, the border shows the text.

Edit: an example is the caption of the site: "Game Development" -> the inner color is white, the outer color something like gray. The background doesn't matter you can see every character very well.

Answer 2

One simple solution is to pick either black or white depending on how bright the colour is. Something like this:

float GetIntensity(float r, float g, float b)
{
    return r * 0.299f + g * 0.587f + b * 0.114f;
}

if (GetIntensity(r, g, b) < 0.5f)
{
    RenderTextWhite();
}
else
{
    RenderTextBlack();
}

It has the benefit that you don't need to worry about weird looking text colours, or colour blindness in the viewer.