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.The HighContrastLargePrint, HighContrastLargePrintInverse and LowContrastLargePrint icon themes are deprecated as of GNOME 2.12. New icons need only be added to the HighContrast, HighContrastInverse and LowContrast themes.

[Tip]Low Contrast Icons

Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents.

[Tip]Adding icons to accessible themes

When you have designed high and low contrast versions of all your icons, submit them to the gnome-themes module maintainers for inclusion in the appropriate themes.Pending discussion on XDG about possibility of applications being able to install HighContrast and HighContrastInverse icons themselves.

High Contrast Icons

High contrast icons, in conjunction with a high contrast theme, benefit users with reduced visual acuity. A high contrast icon has these characteristics:

  • Drawn only in black and white, with an external white border (black for inverse high contrast icons). One additional color may be used, but only if it is essential to the meaning of the icon.

  • Simple visual style, typically comprising only a single symbol

  • All lines and borders at least 4 pixels wide (at 48x48 pixels)

Figure9.14.Part of application window rendered in high contrast, large print theme

Part of gedit window rendered in high contrast, large print theme

This style allows high contrast icons to be distinguishable when viewed by a user with reduced visual acuity. Below is an approximation of what well-designed high contrast icons look like when viewed by such a user.

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

Figure9.15.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 most easily created in a vector drawing application. 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.

Figure9.16.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!

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

High contrast inverse icons

High contrast inverse icons serve the same purpose as high contrast icons, but are easier to see for some users. Create a high contrast inverse icon simply by inverting the pixel values of the equivalent high contrast icon, for example in GIMP.

Figure9.17.Part of application window rendered in high contrast inverse, large print theme

Part of gedit window rendered in high contrast inverse, large print theme

Low Contrast Icons

[Tip]Low Contrast Icons

Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents.

Low contrast icons are generated from the existing regular icons by adjusting the levels. In GIMP, use these values in the Levels dialog:

  • Input: 100, 1.25, 200

  • Output: 100, 160

Figure9.18.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.
[Tip]Batch conversion

Large numbers of regular icons can be quickly converted to low contrast by using GIMP's scripting facilities. A script to do this is provided in the gnome-themes module.There are some suggestions that it would be a better for a low contrast theme engine to do this on the fly.