How to remove moiré from screen shots

Moiré is an unwanted pattern that appears in screen shots. On Windows, moiré can occur with images of scroll bars. The following example is a scanned image from a printed page:

Moiré on a scroll bar

Moiré is an interference pattern that is caused when two regular patterns overlap. In our case, one of the patterns is the reproduction of the dots on the printed page, and the other pattern is contained in the scroll bar. When you view a scroll bar on the screen, or when you print an image of a scroll bar, the pattern is not easy to see. However, if you make the image larger, the pattern becomes clear. The following image is five times the actual size of a scroll bar, and you can clearly see white pixels and grey pixels:

Pattern of pixels on a scroll bar

To solve the problem of moiré, replace the pattern of dots with a solid colour:

Solid colour replaces pattern of pixels

How do you decide the colour values for the solid block of colour? A quick fix is to choose a shade of grey that looks correct. Alternatively, calculate the values. One method that gives good results is to use the average values of the colour data (possibly, from a theoretical perspective, this is not the correct method). Possibly, your graphics software can automatically use the average of the two values. If it cannot do this, calculate the colour.

The RGB values for white are 255, 255, 255. Our grey pixels have the following RGB values: 212, 208, 200. For each colour channel, we want the average between the grey and the white, as shown in the last column of the table below. In the table, Vg shows the value for the grey pixels.

Colour values for a light grey midway between grey and white
Colour channel Vg 255-Vg ½ (255-Vg) Vg+(½ (255-Vg)) = average colour
Red 212 43 21 233
Green 208 47 23 231
Blue 200 55 27 227

To create the solid block of grey in the final screen shot above, we used the values from the last column in the table.

RSS feed