Colour
Like computer monitors, mobile devices use an additive colour process. Unlike print media, which begin with a white surface, the computer screen begins as a black surface to which coloured light — red, green, and blue (RGB) — is added. This process can prove tricky for visual designers coming from other media or working with integrated teams that are used to specifying branded visuals using the cyan, magenta, yellow, and key (CMYK), or spot, colours.
Although early mobile devices supported very few colours, colour support is now quite robust, with a large proportion of devices providing 12-bit (4,096 colours), 16-bit (65,536 colours), or 24-bit (16 million colours) colour support. You will find however that — similar to the variety in screen size — many devices in use support varying colour depths, with newer, low-cost models (such as the Nokia 2330 classic) typically supporting 12- or 16-bit colour depths.
Figure: Bit depth and image quality
Pictured above is a simulation of an image displayed at various bit depths. As this illustration indicates, the vast majority of Nokia devices are in the 12- to 24-bit range.
This variety in colour depths, combined with the large number of devices, has practical implications that should be considered during the design process:
Complex gradients — those that include transitions involving more than two colours or that follow a complex path — may not appear as expected, even on newer devices. This will manifest itself as banding between each area of colour. Avoid using gradients for backgrounds or large areas of the screen.
Some devices display colours differently from various viewing angles, so test your design by holding the device in different positions. Remember that unlike desktop computers, mobile devices are not always viewed from the same angle or orientation. Certain development tools, such as Adobe Device Central CS4, enable simulation of various display conditions, such as backlight timeout and daylight reflections on-screen.
Displays also vary in brightness, and the newer devices are not necessarily the brightest. Get to know the brightness range by testing on multiple devices. Pay particular attention to colour contrast. Black on white will always create the highest contrast and, as a rule of thumb, you should aim for a contrast of around 50 percent. Remember as well that devices are often used in sunlight, which further decreases the visible level of contrast.
If you work with brand managers or marketing departments, try to manage their expectations with regard to colour accuracy early on. Even devices with identical colour depths can display colour differently, and, because of differences in colour saturation, it can be difficult to match Pantone colours to a mobile display. Expect slight shifts in colour — in particular with bluish tones, which tend to have a wider range on devices.
For a demonstration of how colours are reproduced on a mobile device, compare the colour-gradient images at http://forumnokia.mobi/example_site/article3.html on mobile and desktop displays.