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:


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

11/17/2014 4:47:00 PM

Accepted 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.

11/17/2014 7:25:00 PM

It is hard to make exactly what everyone sees here, because everybody has their own display to see the image. On my monitor, if I squint, I could see a very thin black line between the left red rectangle and the green middle rectangle. And in contrast, between the right red and middle, I see a very thin white line. Basically, I understand the original poster means they see this (exaggerated):

Description of the problem: a black or white line between adjacent rectangles, exaggerated.

These aren't Mach bands, as suggested in the question comments. Mach bands are not born in between different-chromed colours, but instead between different-lighted colours (e.g. between two shades of gray). A very faint Mach band is created in the red rectangle's right side, because full red (RGB 255-0-0) is slightly less bright than full green (RGB 0-255-0) on my monitor (and on all sRGB monitors as well). (Even though the colours the original image are not pure Red or Green, the difference in their percepted lightness is approximately same.) Basically, Mach bands show like this (again, highly exaggerated):

Illustration of Mach bands, exaggerated.

But Mach bands cannot create white or black thin lines. They only create a slight difference in observed brightness on a wide area. And Mach bands are always symmetric: red-to-green is same as green-to-red. But this is asymmetric: other boundary is black and other is white.

Instead, what visual artifact we see here is because of LCD sub-pixel arrangement. The most usual arrangement is Red-Green-Blue from left to right. So between each full red pixel there are a turned-off green subpixel and a turned-off blue subpixel. Between a full red pixel and a full green pixel, instead, there are three turned-off subpixels: green, blue, and red. This creates an effect of a thin black line between the red and green. As in the image below:

Sub-pixel representation of red colour meeting green colour.

Now on the other side of the green rectangle, there is first a lit green subpixel, turned-off blue subpixel and then a red one. Now between the lit green and red subpixels there is only one black subpixel. This creates an effect of a very thin bright line running in between the green and red boundary. As in below:

Sub-pixel representation of green colour meeting red colour.

To see the subpixels on your monitor, you'll probably need a magnifying glass. Norman human eyesight cannot focus on so close distance where you would see the separate pixels. However, it is very good in spotting that slight brightness difference.

Now, to prove the theory correct, you could add e.g. a 1 px wide line of RGB 128-255-0 between the left red rectangle and the green rectangle and see if the black line fades out, because this adds some green subpixel light before the gap. Also you could try e.g. a 1 px wide RGB 85-85-0 between the green and right red rectangle, to dim the subpixels a little. Unfortunately, this cannot be used in actual design, because firstly it depends on the red-green-blue subpixel arrangement and at the same time makes the colour border a little bit smudged.

Furthermore, there is a possibility of a screen sharpening algorithm taking place. Basically monitor sharpening makes all colour edges more prominent, adding white to the brighter side of the edge and dimming to black on the darker side. This is much like the Mach band effect, but much narrower and usually more prominent. This can be found out by adjusting the display's sharpness setting (hopefully possible) and seeing if the effect is reduced.