given a background color, how to get a foreground color that make it readable on that background color?

Question

given a background color, how to get a foreground color that make it readable on that background color?

ps: I mean computing that foreground color automatically in a program.

or simplify the problem, if the foreground color is chosen from white/blank, how to do the choise in a program?

Answer 1

• Calculate the lightness (see HSL)
• If the lightness is less than 50%, use white. Otherwise, use black.

Using colors as foreground color is difficult, because you have to take contrast and color blindness into account.

Answer 2

See this other SO answer

Answer 3

You could compute the inverse colour, but you run the risk of contrast diminishing "in the middle" of the colour space.

Answer 4

The safest bet is to conform with the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.0, which specify a brightness contrast ratio of 4.5:1 for regular text (12 pt or smaller), and 3.0:1 for large text. Contrast ratio is defined as:

[Y(b) + 0.05] / [Y(d) + 0.05]

Where Y(b) is the brightness (luminance) of the brighter color and Y(d) is the brightness of the darker color.

You calculate luminance Y by first converting each of the color’s RGB values to gamma adjusted normalize rgb values:

• r = (R/255)^2.2
• b = (B/255)^2.2
• g = (G/255)^2.2

Then combine them using sRGB constants (rounded to 4 places):

Y = 0.2126*r + 0.7151*g + 0.0721*b

This gives white a Y of 1 and black a Y of 0, so the maximum possible contrast is (1.05/ 0.05) = 21 (within rounding error).

Or let JuicyStudio do the math for you.

This calculation assumes a standard-performing monitor in a relatively dimly lit room (or a room that the user can make dim if she or he has to). That makes it adequate for home or office use, but I don’t know if it’s adequate for mobile apps or other devices that are used outdoors.