# How to make a color appear the same on different backgrounds?

## Background on color perception:

Due to the nature of the human eye and visual processing by the brain, there's an optical illusion that the same color will look different depending on the background.

It is known as the contrast effect, illustrated below — center rectangles are identical:

Source: Wikimedia

An illustration (and report) by NASA makes the effect of the background's color even more obvious:

(Note how the two upper-most colors in the second image appear the same, but are actually completely different.)

My question pertains to web design, specifically in this case, the color of link text on different backgrounds.

For a given color of text, how can one find the complementary color to make it appear the same on a certain background?

## Let's take a look at an example for this question:

Consider my example below, with yellow text `#FFF000` on the following backgrounds:

• white `#FFFFFF`,
• black `#000000`,
• and grey `#555555`.

As expected, doesn't look the same at all. (View and download .PSD file here.)

How can we make it look the same on all three? Clearly, the text on the white background needs to be a darker yellow, and the one on the grey needs hue/tone adjustments. (The surrounding text will also affect it — but that's likely harder to account for.)

Can this perfect color somehow be calculated, based on the Hex, RGB or another system? That's where the crux of this question lies, as it would be much more efficient than manually approximating.

-
You'll need to use yellows. Notice in your examples they used colors similar to the one they are trying to make look different. – Johannes Jan 30 '13 at 5:37
@Johannes, what do you mean? – Baumr Jan 30 '13 at 5:40
In your first example the colors used were all shades of gray. In your second example your purple was made to look more blue through the use of a very bright purple. Then in your yellow example you're butting yellow of whites, grays, and blacks. So what I'm saying is you need to use yellows instead to make your yellow appear the same on different backgrounds. – Johannes Jan 30 '13 at 5:47
I'm having a tough time explaining this, I apologize. – Johannes Jan 30 '13 at 5:47
– Lightness Races in Orbit Jan 30 '13 at 5:55