Designing Accessible Icons

The GNOME desktop includes accessible themes that make the desktop and the applications running on it accessible to users with a range of visual impairments. By default, these are:

The following accessible themes are also available:

To be considered fully accessible, all icons in your application must be replaced by a suitable alternative when one of these themes is used.

High Contrast Icons

High contrast icons are greatly simplified versions of an application's existing regular icons. They are drawn with two colors, black and white, and thicker borders. This style allows high contrast icons to be distinguishable when viewed by a user with a visual impairment. Below is an approximation of what well-designed high contrast icons look like when viewed by someone with a visual impairment.

Table 9.3. Simulation of low vision user viewing high contrast icons

DescriptionHigh Contrast IconSimulated Appearance
Book
Book icon
Blurred Book icon
CD-ROM
CD-ROM icon
Blurred CD-ROM icon
Copy
Copy icon
Blurred Copy icon

If a regular icon uses a simple, straightforward metaphor the corresponding high contrast icon can often use the same metaphor. In many cases the same metaphor will need to be drawn differently to create a simplified high contrast icon.

Figure 9.14. Simplified representation of metaphors for high contrast icons

Comparison of photorealistic style of regular icons with the simpler, line-art style of high contrast icons

High contrast icons are created in a vector drawing program. Black and white shapes are layered to create a simplified icon. The process feels like layering black and white pieces of construction paper, as if you were assembling a collage.

Figure 9.15. Layered technique for high contrast icons

Exploded view of layers used in high contrast floppy disk icon
[Tip]Reuse existing shapes

Often shapes from existing high contrast icons can be resized and reused to more quickly build up a new icon.

[Tip]Don't forget the border!

It is useful to design high contrast icons over a temporary background color so you don't forget to draw the external white border.

Low Contrast Icons

The goal of low contrast themes is to eliminate, as much as possible, light values (e.g. a large 'V' value in HSV). To achieve this, the colors in low contrast icons are compressed toward the middle value range, i.e. dark colors are lightened and light colors are darkened.

Low contrast icons are generated from the existing regular icons by adjusting the levels in GIMP. The Input Levels are set to 100, 1.25, 200 and the Output Levels are set to 100, 160, as shown in the Levels dialog below. Large numbers of regular icons can be quickly converted to low contrast by using GIMP's scripting facilities.

Figure 9.16. Levels dialog in GIMP showing correct levels for generating low contrast icons

Levels dialog in GIMP showing input levels set to 100, 1.25, 200, and output levels set to 100 and 160.