We recently began a general discussion about accessible icons. In this blog post we want to continue that discussion in more specific terms and talk about designing high contrast icons.

It’s only in the last few years that operating systems have been increasingly designed with accessibility in mind. Most iterations of Windows have featured a very basic “high contrast” theme for those with visual impairments. Mac OS X has slightly more advanced accessibility features, bringing a zoom function and customisable colour features. Both, however, offer changes in contrast as the main answer to accessibility.

The main problem with relying on higher contrasts is that many apps don’t have a separate set of ‘accessible’ icons, so generally all that can be seen is the native app icon but in high contrast. Often these native icons aren’t aesthetically simple enough to function properly in the high-contrast environment, thus still posing a problem for visually impaired users.

Utilitarian design

This poses an interesting challenge for us as icon designers, as it requires us to go back to basics on a number of things. What it can teach us is how to be very utilitarian with our designs. Icons must function with a bare minimum of features to prevent the design becoming incomprehensible to those with visual impairments, but they must also have enough features so that they are easily distinguishable.

In the previous post we gave the example of the Soundcloud icon being an accessible icon. However, due to its reliance on colour for identification, it would not function well in high-contrast or grey scale software environments as these often rely on a few very specific bright colours. It also utilises a rather complex cloud-based design which might not work on the lower resolutions often used in high-contrast UIs. It is worth rethinking icons in a way that does not rely on colour but work in grayscale and purely describe their functionality.

You can do this by reducing an icon to a few primary elements. As we can see in this great set of high-contrast icons for Ubuntu (pictured below), the designer has made these high-contrast icons function well by relying (mostly) on two elements within each icon: a primary shape as an icon’s ‘outline’ then a simple element within. They have taken distinctive parts of the original icons (such as the Facebook ‘F’) and used them as the central element to make them easily distinguishable in a high-contrast interface. They have also relied on using one basic colour in each icon, such as red or orange.

High Contrast Icons

(Source: http://xfce-look.org)

This works to make certain icons stand out while also enabling them to fit in with the OS’s colour scheme (grey and orange). By making the icon outlines thick and bold, they have made them both suitable for a high-contrast UI and for looking great. To someone with a visual impairment, these icons designed specifically for a high-contrast UI will work a lot better than those icons which have simply been ported into accessibility mode.

An accessible design is a good design

If an icon does its job even when confronting someone with visual impairments, it’s proved itself as a good design. By challenging ourselves as designers to work on high-contrast icons, it actually provides us with a number of important techniques and tools for the rest of our design work. It might seem like a restrictive way to think of designing icons, but you’ll be surprised at how good of a design exercise it is and you’ll be helping visually impaired end-users while doing it. If you get the time, it’s certainly worth thinking about designing high contrast icons.

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *