: 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

@Murray664

I can't be certain, but if you are wearing glasses, that is where the problem will lie. You're most likely seeing a chromatic aberration, in which the reds and the greens are separating.

The thicker your glasses the more pronounced the effect will be. Try turning your head and watch the color blocks move -- as you move towards the edge of your glasses, your glasses will be thicker, and thus cause a greater separation.

Vote Up Vote Down

@Speyer780

This thread on Adobe's forum has a good bit on where the "Align to pixel grid" options are.

If I remember correctly, this can also be enabled document-wide via the File > New dialog (at the very bottom of the box).

Either these hard-core monitor experts are correct, or you just have a discrepancy created by the vector not aligning to the pixels on your monitor correctly. This is precisely why so many people are excited about this little check box being added to Illustrator.

Vote Up Vote Down

@Vandalay110

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:



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:



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:



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:




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.

Vote Up Vote Down

@Ann6370331

This is the nature of the colors when they come together, The human eye tends simplification to clarify things .. and the optical illusions caused by our perception of colors.

this phenomena which is called "Mach Bands Illusion" appears with any two color different in Value. not in the hue nor the saturation. and my attached diagram show that the same illusion occur in gray colors. the lighter gray will be more lighter comparing to the darker one in the middle and the middle gray appears lighter beside the edge of the right dark gray at the right. And so one.



if it is important to you so you have two options.


to choose two colors that have the same black ratio this will insure to decrease the illusion
you can "fool the eye" by adding a gray tiny line in between the two color that have the average gray of the two grays in those colors. see the result hereunder. you may recognize that the top strip is less in the illusion that the bottom one.

Vote Up Vote Down

@Martha945

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):



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):



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:



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:



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.

Vote Up Vote Down

@Lengel450

This might be due to color interaction. Red and green are complementary colors and when placed side by side seem to create a black/dark line that seems like an overlap. You could read and see more examples here.

Illustrator auto snaps shapes into place, so there shouldn't be any issue of overlap happening there.

Vote Up Vote Down

@Correia448

If you enable an option Align New Objects to Pixel Grid in the Transform window's option menu (the one in the top right corner of any option window), any new objects that you draw have the pixel-aligned property set by default. For new documents created using the web document profile, this option is enabled by default. For existing objects, you can turn off the pixel grid alignment by selecting Align to Pixel Grid in the Transform window itself (shown after ticking on More Options in the window's option menu).

The crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased results.

Objects that are pixel-aligned, but do not have any straight vertical or horizontal segments, are not modified to align to the pixel grid. For example, because a rotated rectangle does not have straight vertical or horizontal segments, it is not nudged to produce crisp paths, when the pixel-aligned property is set for it.

This Adobe's documentation tells it more broadly: helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Vote Up Vote Down