skip to primary navigation skip to content
 

Vision

Our sense of vision allows us to perceive the world in images, motion and colour. We use information from our vision to move around and interact with objects and environments. The effective design of any product or environment should take the range of human visual capabilities into account.

On this page:

The eye contains a pupil and lens at the front, and a retina and optic nerve at the back

The shape and structure of eyes.

Important note: This page highlights factors to consider when designing or assessing products, and provides some useful suggestions, but the advice should be followed within the context of an Inclusive design process.

Introduction

Vision is used to perceive graphical, textual, colour and shape information, and thus is extremely important for product interaction.

Vision involves different parts of the eye and nervous system working together. Problems with any of these can make aspects of vision more difficult or impossible. Common conditions such as short and long-sightedness can often be corrected by glasses. However, as people age, their eye muscles weaken and the lens becomes stiffer. This means that the eye can no longer adapt to focus on objects at different distances.

Because of ageing and various eye conditions, the structure and function of the eye can also deteriorate, which can result in blurry vision, reduced contrast sensitivity, and loss of vision at the centre or the outskirts of our vision. Colour blindness is another condition, which can make it difficult or impossible to distinguish between certain colours.

Some general visual factors to consider when designing or assessing products are to:

  • Use multiple media. Think about assisting those with vision impairments by supplementing information through auditory or tactile means. However, be careful not to overload people with information and remember that a significant number of people with vision problems also have difficulties with hearing (1.8% of the GB population).

More detailed advice on specific aspects of visual design is given below.

screenshot of vision impairment simulator

Think about minimising exclusion by ensuring the design remains usable with a vision impairment simulator.

Size and shape of visual elements

Various vision conditions can cause blurry vision and loss of visual acuity. This can make it difficult to see fine detail.

Text and other graphical elements need to be large enough to be seen clearly without being so large that it is difficult to see the whole picture or sentence at one time.

However, it is not just overall size that determines how clear an object is. Users need to be able to distinguish the features or parts of the object. For example, recognising a letter involves distinguishing the strokes in a letter. This is affected by factors such as line thickness and spacing.

Important things to consider in design are to:

  • Consider size. Ensure visual elements (e.g. text, graphics) are big enough to be seen without bringing the product close to the eyes.
  • Consider shape. Make the shapes of elements distinctive and make sure they have enough space around them.
  • Choose fonts carefully. Avoid italicised or decorative font styles for blocks of text or signs. Note that common practice is to use a serif font for large blocks of text, and a sans serif font for signs, labels or headings.
  • Consider symbol clarity. Carefully consider the line thickness, line spacing and overall size when designing graphical symbols or logos.
a mixture of serif and sans serif and decorative typefaces shown at different sizes

Different combinations of font size and style - the top line is a serif font, the middle line a sans serif font and the bottom line a decorative font.

when this image is blurred the large sans serif font is the clearest

The same images viewed with reduced visual clarity.

Contrast

Contrast sensitivity is the ability to perceive the difference in brightness between a foreground and background colour. It is related to the size, distance and illumination of the object to be detected. Maximum contrast occurs with white on black or vice versa.

Contrast sensitivity is important for activities such as detecting and reading text, moving around in the environment, and detecting the outlines of buildings, roads and pavements.

It is important to consider the contrast levels used in designs. Low contrast text will be more difficult to discriminate than high contrast text. In addition, controls on products need to be of sufficient contrast against product chassis to be easily detected.

The diagrams opposite show some different foreground and background colours for text and the corresponding images viewed with a reduced brightness contrast. Note how a sharp colour distinction helps to discriminate between the foreground and background when the brightness contrast is reduced.

Important things to consider in design are to:

  • Consider contrast of objects. Ensure that important objects and features have sufficient contrast with their environment, e.g. adding high contrast strips to the edges of steps can make them much easier to detect and thus reduce falls.
  • Consider contrast of elements. Ensure that graphical and textual elements have sufficient contrast with their background.
  • Choose backgrounds carefully. Be particularly careful with patterned or picture backgrounds as they can interfere with the legibility of text or other graphical elements.
the word design is shown in a variety of foreground and background colours

In order to determine which colour combinations are most effective, try viewing this image at various distances and squinting as you read it.

when the images are viewed at reduced contrast the pink on yellow colour combination is still very visible, whereas Green on red is very hard to see

The same images viewed with reduced brightness contrast.

Colour

Colour conveys information about the physical world. It is detected by cells in the eye that function best in relatively bright light. Thus colours are harder to discriminate in low lighting.

Some people are affected by a loss of colour discrimination (or colour blindness). They can still perceive colour, but cannot effectively distinguish between particular colours. The most common form of colour blindness is red-green colour blindness, which affects the ability to distinguish between colours from red to green in the colour spectrum. This can make interaction with products difficult if colour alone is used to provide information.

The diagram opposite shows various foreground and background colour combinations (top) and the corresponding simulated appearance for a red-green colour blind person (bottom). Note that images in which the foreground and background have similar brightness contrasts can disappear when viewed by someone with colour blindness.

Important things to consider in design are to:

  • Supplement colour. Think about using colours to help convey information but ensure they are supplemented by presenting the information in alternative ways (e.g. use shapes and text).
  • Ensure sufficient contrast Consider using colour contrast to help make things stand out, but ensure there is also sufficient brightness contrast
  • Check in greyscale. Check that a product remains usable when its image is converted to greyscale.
the word design is shown in a variety of foreground and background colours

To determine which colour combinations are most effective, try viewing this image at various distances and squinting as you read it.

red and green appear as similar colours when viewed with simulated red-green colour blindness

The same images viewed with a simulated red-green colour blindness.

Layout

Layout is an important aspect of a design and can have a large impact on its visual accessibility. It is particularly important when considering issues to do with reduced visual field.

Someone's visual field refers to area that they can see without moving their eyes. With increasing age and various eye conditions, the usable visual field can change. This loss can either start from the centre of the visual field (central field loss) or from the outer edge of the visual field (peripheral field loss).

The central visual field is used for focusing and perceiving detail. When it is obscured, tasks that require perception of detail (such as reading) become very difficult. People generally adapt to compensate for this loss and attempt to use the peripheral visual field. However, this part of the retina is less sensitive, resulting in a loss of acuity and contrast sensitivity. The same guidance given for acuity and contrast will help users with central field loss.

A reduction in the usable peripheral visual field results in tunnel vision and can affect mobility. The upper images opposite show a rail ticket machine with widely spaced controls. This can result in problems when viewed with a peripheral loss. The lower images show a proposed redesign of the same machine where the continuity between the required action areas has been emphasised, resulting in a more usable interface.

Important things to consider in design are to:

  • Consider visual field loss. Arrange the design so that it remains visible and usable for those who have some loss of visual field.
this poorly designed ticket machine makes little sense with simulated peripheral vision loss

A ticket machine that has poor clarity of layout viewed with normal vision, and the same ticket machine viewed with poor peripheral vision.

the same ticket machine has been redesigned so that the layout follows a logical flow

This shows a redesigned layout for the same machine, which enables the overall layout to be perceived, even with a peripheral vision loss.

Lighting and glare

The context in which a product is used can affect its visual usability.

The level of ambient illumination impacts on the ability to perceive visual detail. The positioning of the light source in relation to the user and the product is also important. For example, users may have difficulty reading the text on the back of a television, or reading a road sign whilst facing the sun.

Glare can also cause significant difficulties when reflective surfaces such as a screen are viewed from a certain angle relative to the light source. Consideration of reflectivity, distance and viewing angle is particularly significant when the position of the product or user is fixed or constrained, such as when viewing a road-sign.

Important things to consider in design are to:

  • Consider lighting conditions. Consider the likely lighting conditions when choosing the size, font and contrast of text and graphics
  • Enable users to control lighting. Contemplate enabling users to control the intensity, position, and angle of lighting sources to best suit their own vision ability and the task.
  • Consider glare. Consider potential issues with glare, based on: the surface finish of the item being looked at, the intensity of the light source, and the angle of view.
the screen of a cash machine is shown with excessive sunlight glare compared to a computer monitor that can be tilted to reduce glare

Tilt adjustment for a screen helps to minimise problems with viewing angle and glare for a range of users.

visual elements on the back of audiovisual equipment are typically difficult to see

Viewing the back of equipment highlights difficulties that can arise as a result of the context of use.

Further information

More information on the impact of context on usability can be found in the Activities in context section of the Designing with people website. Different lighting conditions are of particular relevance to vision.

Vision simulations

Vision simulations provide one way to understand the impact of vision conditions on usability. They demonstrate the effects of various vision conditions and impairments. Software simulators show the effects of these conditions on photographs and other images, while physical simulators can be worn while interacting with products and prototypes. It is a good idea to try out designs with a simulation to ensure that they remain usable with various vision impairments.

The following are just a few examples of the vision simulations available:

  • The Cambridge Simulation Glasses are also available through this toolkit. These wearable glasses demonstrate the impact of a range of visual acuity losses.
  • Vischeck simulates colour blindess and corrects images to be accessible to colourblind viewers. It can be used online or downloaded.
  • aDesigner simulates different levels of short sightedness, lens transparency and colour blindness. It also checks vision aspects of web accessibility. Is it available for free download.
  • Many blind and visually impaired people use screen readers to read out the contents of webpages. The WebAIM screenreader simulation simulates the use of a screenreader on an example website.
this screenshot of impairment simulator software shows that glaucoma causes peripheral field loss

Impairment simulator software, showing the effect of moderate glaucoma.

Population statistics

Information on the numbers of people in the British population with different levels of capability is available in the 1996/1997 Family Resources Survey. More information on this survey and why it is used here can be found on the Assessing demand and exclusion page of this toolkit.

The graph on the right shows the proportion of the British adult population living in private households who would be excluded by tasks with the following levels of vision demand:

  • No demand: No need to see anything
  • Newspaper headline: As visually clear as a newspaper headline
  • Large print: As visually clear as large print text
  • Newsprint: As visually clear as ordinary newspaper print
0.7% of the population are excluded by a vision demand of a newspaper headline, 0.9% by large print and 3.5% by newsprint (see main text for full definitions).

The proportion of the British adult population excluded by tasks with various levels of vision demand.

Important Note

These statements refer to the level of vision ability that a product or service demands, in order to use it. For a particular demand level, the 1996/97 Disability Follow-up Survey is used to calculate the total number of people who do not have this level of ability, and will therefore be excluded. The GB adult population was 45.6 million at the time of the survey. Please see the Assessing demand and exclusion page for more detail.

Further information

A report from the Department of Social Security (2000): 'Disability Follow-Up to the 1996/97 Family Resources Survey' provides data on the capability levels in the UK population. (Department of Social Security. Social Research Branch. [computer file]. Colchester, Essex: UK Data Archive [distributor], March 2000. SN: 4090.)

Further information

Statistics on the numbers of people in Great Britain with different levels of vision capability can be found by using the Exclusion calculator in this toolkit.

Further information on vision loss and how to address it in design can be found in the following sources:

  • A booklet by the RNIB (2006): 'See It Right: Making information accessible for people with sight problems' provides some further guidance (ISBN: 1858787041)
screenshot of the exclusion calculator within this toolkit

Statistics on the numbers of people in Great Britain with different levels of vision capability can be found by using the Exclusion calculator.

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


Please tick this box if you would like to receive updates on inclusive design training and tools from the Engineering Design Centre.

Your comments:


Please leave this field blank (it's a spam trap):
Submit