Link
Accessibility Designer Guide
Search

Icons

When it comes to icons, different specifications must be observed. Not all icons are self-explanatory or designed for small applications.

Consistency and standards

Aesthetic and minimalist design

Title Picture Icons

Table of contents

  1. Signs and communication
    1. Understanding icon
    2. Understanding index
    3. Understandning symbol
    4. Understanding icons in UI
  2. Icons in UI
    1. Icon labels
    2. Icons contrast
    3. Icons for small applications

Signs and communication

So that we can take a closer look at the topic of icons and analyze them for accessibility. First we have to understand what an icon is. This definition is actually not as simple as it seems. Charles S. Peirce, a philosopher of the late 19th century defined 3 basic signs in semiotics: the icon, the index and the symbol.

Understanding icon

An icon resembles the object it stands for and thus establishes a connection to it. The following example illustrates this.

In this picture we see a classic icon from the field of user interface design is the mail icon. It shows a letter and creates the link to the physical letter and the sending of a message. A classic icon from the field of user interface design is the mail icon. It shows a letter and creates the link to the physical letter and the sending of a message.

Understanding index

An index indicates what it stands for, the classic example is smoke which stands for fire.

In this picture we see the famous System 7 from Apple. Folders look like folders and the trash can looks like a trash can. Photo by Jens Johnsson on Unsplash

Understandning symbol

The symbol makes no clear connection to its origin. The meaning often has to be learned culturally, which means that prior knowledge is needed to understand symbols. A good example of this are religious symbols, which are not self-explanatory for all people at first go.

In this picture we see the famous System 7 from Apple. Folders look like folders and the trash can looks like a trash can. A good example of this is the Om or Aum symbol. The Om is a sacred sound and a spiritual symbol in Indian religions. It signifies the essence of the ultimate reality, consciousness or Atman Wikipedia . This knowledge cannot be expected of everyone, and therefore this symbol needs background knowledge to be understood.

Understanding icons in UI

Now that we have defined the basics, it is time to transfer them into the user interface design. Icons are elementary components of user interfaces. We can label functions using established icons or simplify contents through supporting icons. In the beginning of the user interface design we tried to design these icons as close as possible to the original.

In this picture we see the famous System 7 from Apple. Folders look like folders and the trash can looks like a trash can. In this picture we see the famous System 7 from Apple. Folders look like folders and the trash can looks like a trash can. Wikimedia – Apple

And now we also see that at some point we reach a limit with icons as defined by semiotics. We cannot display complex processes like a “login” or “file sharing” exactly as it is meant. That’s why in the UI we rather speak of symbols which are used as icons.

Icons in UI

Icons in user interface design are to be considered as symbols and sometimes require prior knowledge. There are various icons that have established themselves and now stand for themselves.

  • Search icon
  • Navigation bars
  • User icon
  • Close icon

Icon labels

If icons that are not self-explanatory are used as interaction elements, they should always have a label that explains their function.

In this picture you can see a User Interface (UI) which is not conform to the WCAG standard. In this picture you can see a User Interface (UI) which is conform to the WCAG AA standard.

We see here two times the same interface, once with labels and once without. It is immediately clear that the interface with label is more user-friendly. Not only for users with disabilities it’s much easier to use the interface with labels, but for all users. See also chapter context to get more detailed informationabout meaningful labels.

Icons contrast

For UI components and graphical objects, WCAG requires a contrast ratio of at least 3:1. If icons are used as interaction elements, for example in navigation, a contrast of 4.5:1 is recommended. Since the icons in navigation must be aligned with the navigation labels. See also chapter colours to get more detailed information about contrast.

There are countless tools for checking the contrast of elements and text, one of my favourite tools is the Colour Contrast Analyser from the paciello group.

Icons for small applications

Icons are well suited to make the interface more understandable. One challenge is to design icons for all device sizes. It is recommended to adapt the icons for each viewport to ensure that they are always recognizable for all users. This helps people with visual disabilities to find their way around.

Icons are usually formatted as follows:

  • 32/32px ore more
  • 24/24px
  • 16/16px
  • 8/8px for small sizes
In this picture we see a detailed icon of a magnifier with outline. In this picture we see a solid icon of a magnifier without outline.

In the left example we see a search icon that works well for 16px or more. Once the icon needs to be resized, it is too detailed. A solid icon like the one on the right makes more sense.

W3C – Text Alternatives
W3C – Non-text Content
W3C – Contrast
W3C – Images of Text