Low vision with the old and new iOS icons

Last week, Apple announced the largest user interface overhaul to iOS since the iPhone was first introduced (gallery and basic description of iOS 7 features). A number of posts and articles have been written recently comparing the new look versus the old and that of competitors.

In this post, I am going to take a different approach. I will not talk about the aesthetics, but instead about the accessibility to people with vision impairments. The flickr user nielsboey posted an excellent image¬†comparing the icons for native applications in iOS 6 and iOS 7. With his permission, I have copied it here and made a blurred version to “simulate” low vision. Click on the links for a larger version.

Comparison of iOS 6 and 7 native application icons.
Regular icons.
Blurred comparison of iOS 6 and 7 native application icons.
Blurred icons.


To see some of the usability barriers one might have with low vision, blurring the display is a good test. Note that blurring is not a simulation of low vision. What a person with low vision might see varies depending upon the cause of their impairment.

There are other visual tests one can try. I used a Colour Blindness Simulator to look for egregious problems for people with color blindness. There was nothing particularly problematic with either the old or new icons.

Some improved icons

Blurred Camera icons.

Blurred Safari browser icons.

Blurred Contacts icons.

Several of the new icons (on the right) have improved for people with low or blurred vision.

For example:

  • The camera app icon now takes the shape of a traditional camera rather than just being an image of the circular lens on iOS devices. The camera shape can be made out more easily as a camera than a dark circle.
  • The Contacts app icon has been improved in iOS 7 because the silhouette of man on is much larger even though the contrast is somewhat decreased from that of the previous version.
  • The new Safari mobile browser icon is a little easier to find simply because it is a blue circle that looks like a compass rather that just a rounded rectangular blue field with small points or arrows.

Some old icons were better

Blurred compass icons.Blurred calendar icons.There are also examples of the new icons (right) being worse for people with low vision.

  • The Compass app icon used to be a light-colored compass face on a darker background. The new version is a line drawing of a compass on a dark background. The lines on the icon are so thin that they are difficult to see when blurred. The icon looks like a black square with rounded corners.
  • The new calendar icon uses a font with a much thinner weight or stroke width. While one can perhaps make it out while blurred, the old calendar icon, with a much heavier font, is much easier to read.

There is a current design trend towards fonts with very light weights and thin strokes. This is also apparent in icons that are simple line drawings with very thin lines. This trend has become possible now because screens on mobile devices are being made with very high resolutions. Thin lines and very light fonts are much easier to display at high resolutions. At lower resolutions, such thin lines would become larger and more block-like. The thin strokes of current design trends are more difficult to see and read with low vision.

About J. Bern Jordan

Bern is a Ph.D. candidate and researcher in accessibility, usability, user interface, and technology interested in extending usability to all people, including people with disabilities and those who are aging. He currently works at the Trace R&D Center in Biomedical Engineering at the University of Wisconsin-Madison.

Leave a Reply

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