Why do two perfectly adjacent rectangles create black or white lines in between as if they were overlapping or not exactly adjacent?

I have a flat design (well, it’s supposed to be), but these black and white lines between the shapes are so annoying… [no stroke]
take a look:

Problem

See these lines between two overlapping rectangles? How can I fix it?
(I created this with Photoshop, but there is the same problem using Paint.net and Adobe Illustrator)
Is it something with the color? Or am I seeing too much? 😛

Answer

As Elmo Allén correctly notes, this is neither an optical illusion not a bug in your graphics editor, but an effect caused by the monitor technology you’re using.

Specifically, on a typical modern TFT-LCD computer screen, each pixel is actually composed of three separate subpixels arranged side by side, respectively colored reg, green and blue:

Pixels on a TFT screen

Each of these subpixels can only produce one of the primary colors of light, but, since they’re very close together, their colors blend together when you look at them, producing the illusion of solid color.

For a white (or gray) pixel, all the subpixels are equally illuminated. By adjusting the intensity of the different subpixels relative to each other, different colors can be produce. At the extreme, for a pure red, green or blue pixel, only the subpixels producing that color are turned on. Thus, your red–green–red stripe will, at the subpixel level, be rendered something like this:

Red-green-red stripe on a TFT screen

Here, you can begin to see what’s going on: usually there’s a gap of two dark subpixels between each lit one, but at the boundaries between the colors, the gap is either three subpixels (creating a dark band) or just one (creating a light one).

Of course, the effect is more obvious when the colors of nearby subpixels are blended together, as normally happens when you look at the screen:

Red-green-red stripe on a TFT screen, blurred

Here, I’ve applied only a moderate amount of blur, simulating what you might see if you e.g. looked at your screen through a magnifying glass. (Try it!) The dark band at the left-hand boundary is obvious here; the bright band at the right-hand boundary doesn’t show up as clearly, but it would become more noticeable if the image was blurred further.

Of course, you don’t have to trust these simulated images. Instead, let me include a couple of close-up photos I took of my laptop screen, showing the image in your question, with a cheap digital camera:

Photo of laptop screen showing red/green color boundary
Photo of laptop screen showing green/red color boundary

As in the simulated image, the dark line is very obvious; the bright line is less so, perhaps because there’s still one dark subpixel between the lit ones, so there isn’t such a clear single intensity peak.

What can you do to fix this?

In principle, this effect is something that your monitor could automatically compensate for, e.g. by detecting such problematic transitions and letting the colors bleed slightly into each other to soften the transition. This would add more complexity and cost, though, which is why most monitor manufacturers don’t bother.

You can, however, achieve the same result yourself by adding a narrow stripe of an intermediate color (e.g. yellow, for red and green) between such highly contrasting color fields. The color of this stripe should approximately match the average luminance of the surrounding colors, taking display gamma into account.

Attribution
Source : Link , Question Author : candh , Answer Author : Ilmari Karonen

Leave a Comment