Alicia Elliott
- Oct 22, 2021
- 5 min read

Inclusive design for people with low vision needs

We are keeping visual disabilities in mind when creating educational images.

1.5 million Canadians identify as having visual impairment. We will discuss low vision impairment and how we need to think differently about our approach to visual communication to include as many end users as possible regardless of disability.

**Before we talk about low vision impairments, let's understand how we see**

STRUCTURES OF THE HUMAN EYE AND THEIR FUNCTION

Any damage or age related degradation to these structures can result in loss of vision

Retina

The retina is located at the back of the eye and is a layer lined with nerves that sense light and create electrical impulses sent to the brain via the optic nerve.

Optic Nerve

The optic nerve is a bundle of millions of nerves that send electrical impulses of visual images to the visual cortex in the brain. Our brain and eye need to be directly connected for us to see. The retina sees images upside down, and our brains reverse the image and turn it right side up.

Pupil

The pupil is the dark central opening located in the middle of the iris. It functions like a camera lens aperture to focus vision, opening and closing to let in more or less light (it opens wider in low light to allow more in and closes in to let less light in when it is bright).

Iris

The iris is the coloured part of the eye that functions to open and close the pupil.

Ciliary body

These are muscles located behind the iris that control the opening and closing of the iris to focus vision.

Lens

The lens is located behind the iris and is a transparent tissue that focuses light through the eye.

Macula

This area in the retina has special light-sensitive cells that focus fine details in our central vision.

Cornea

The cornea is the outer window in front of the eye that sharpens and focuses light into the eye.

Sclera

The sclera is the eye's outer layer that surrounds the eyeball and is continuous with the cornea.

Vitreous humor

Vitreous humor is a transparent material that fills the central cavity of the eye.

Choroid

The choroid is a thin middle layer of tissue lining the eyeball made almost exclusively of blood vessels that supply oxygen and nutrients to the retina.

Anatomy of the Human Eye. Image on the top shows the gross anatomy of the eye with iris, pupil and cornea labeled. Bottom image shows a lateral cross section of the eye with structures labeled.

How the eye sees. 1. Light wavelengths enter the eye through the cornea and pupil. The amount of light let in is controlled by the iris and ciliary body by contracting or opening the pupil wider. How much it opens and contracts is dependent on lighting conditions (wider in low light, smaller in bright light). 2. The lens focuses light on the retina located at the back of the eye. 3. When the light hits the retina, photoreceptor cells turn the light into electrical signals. The image is inverted. 4. The electrical signals containing the visual image are sent through the optic nerve to the visual cortex of the brain. 5. The brain processes the electrical signals so that we can see and perceive shape, colour and movement in the correct orientation.

Low vision impairment

LEGAL BLINDNESS

Legal blindness is when a person's visual field is 20 degrees or less, or their best visual acuity (clarity) is 20/200, which means that the person needs to be 20 feet away to see something seen 200 feet away by a person with 20/20 vision. These individuals rely heavily on assisted technology to navigate online content, such as screen readers and magnifiers.

LOW VISION

Low vision is when a person has sight remaining, but it cannot be corrected with glasses, contacts or surgery. A broad range of low vision causes are often age-related (glaucoma, cataracts, macular degeneration and retinopathy) and can also result from brain injuries or genetics. Other terms, such as "partially sighted" and "sight-impaired", are also used. Symptoms include blurry/hazy sight, poor night vision and blind spots. Difficulties with seeing a television or computer screen, driving, reading, and recognizing faces may be experienced.

World Health Organization visual impairment classification

20/30 to 20/60, mild vision loss, or near-normal vision
20/70 to 20/160, moderate low vision
20/200, severe low vision
20/500 to 20/1000, profound low vision
Less than 20/1000, near-total low vision
No light perception, total blindness

Inclusive design strategies for low vision impairment

Types of digital images

First, it is essential to distinguish between different image types to determine which needs more focus to include accessibility and inclusive design.

Informative and complex images: Images that convey information, whether they are complex or straightforward. An example of a simple image might be a social media icon. Complex images that give a lot of information, such as graphs, charts, intricate illustrations, maps, etc., need an inclusive design and alternative text.
Decorative images: These images do not convey any information or content, such as decorative illustrations, borders and images that already have text describing what they are.

Learn more about image types here

Low vision issues and user needs

Visual Acuity (Clarity)

The sharpness or clarity of vision is measured by how well a person can focus on an object, and it is calculated by what an average person can read at 20 ft (20/20). If a person has 20/40 vision, they can read at 20 feet what normal vision can read at 40 feet. A person's visual acuity depends on the retina and the ability of the brain to interpret the image.

For users that have low visual acuity, you need to consider the following:

larger text size, clearly readable font, proper capitalization, and size of elements
increased spacing of letters, words, justification, borders and margins
proportional text increases and stylization of headers, subheaders and body text

Top image: Example Of How A Person With Impaired Visual Clarity May See Without Inclusive Design Considered. Image top left shows normal vision with small 13px text and a hard to read font style, too closely spaced together. Image top right shows how it looks blurry and eligible for a person with impaired acuity. Image bottom: Example Of How A Person With Impaired Visual Clarity May See With Inclusive Design Implemented. Bottom image left shows normal vision with accessible text (16x), easy to read font style and increased line spacing. Image bottom right shows as blurry, but more easily read now with inclusive design implemented.

Light hypersensitivity

Photophobia is common for people with low vision. Bright screens and lights can make it difficult to see, causing headaches and eye pain. Those afflicted will often turn down the brightness of their screen and need low brightness text. When a user cannot control the text and background colours, an option is to avoid white text on a dark background since it can cause strain to the user's eyes. Use lower contrasting colours such as grey that still meet minimum contrast requirements.

Sensitivity to contrast

Others may need high contrast text due to loss of contrast sensitivity and how easily they can distinguish text on a background. High contrast can be shown either as light text on a dark background or dark text on a light background. Ideally, a user can adjust the text contrast themselves, but when creating images, these ratios (Level AA) need to be followed:

Large text is 18pt (24px) or bold 14pt (18.5px): contrast ratio needed 3:1
Regular text is 12pt (14px): contrast ratio needed 4.5:1
Non-text UI components or graphical objects: contrast needed 3:1

Contrast ratios refer to how bright or dark colours appear on screen and range from 1-21 (written as 1:1- white on white and 21:1- black on white). The first number, L1, is the luminance or brightness of light colours, and L2 is the second number and refers to the relative luminance of dark colours.

This Colour Contrast Analyser (CCA) is a great application to check foreground and background contrast ratios.

Contrast ratio examples. Image on top shows examples of contrast ratios using large text, regular text and graphical objects. The image on the top: The foreground colour (hex# F8A953) on a white background (hex#FFFFFF). The contrast ratio is 1.9:1 which does not meet the minimum of 4.5:1 and is a FAIL. Below this image, the same colours (hex# F8A953) on a dark background (hex#1A211C). The contrast ratio is 8.4:1 which exceeds the minimum of 4.5:1 and is a PASS. The image on the bottom is an example of how a person with high contrast needs may see the colours. The failed contrast ratios on the light background are far less visible than the ones that pass on the dark background shown below.

Field of vision loss

180 degrees left to right and 150 degrees up and down is the typical range for a standard field of vision. For people who have a field of vision loss, there are three groups:

Central field loss – Vision is missing or reduced in the middle of a person's vision
Peripheral field loss – Only a central portion of vision can be seen
Other field loss – There are scattered or patches of vision loss, vision loss in the right or left field of vision or elsewhere

To help navigate the digital content more easily, web users with a field of vision loss need scrolling that rewraps for one direction, reflows to a single column and uses scrollbars and groups of content spaced from unrelated content.

Examples of field of vision loss. The image at the top left shows what a person with a normal field of vision may see. The image at top right shows what a person missing their central vision might see. The image at bottom left shows what a person who is missing their outer vision might see. The bottom right image shows patches of vision missing, representing other field vision loss.

Summary

The above only details a few examples of low vision impairment and how it affects people with these disabilities navigating the web easily. There are a lot of resources at our disposal to learn more about how visual impairments can affect web navigation. It is essential to learn how to implement inclusive design strategies for people with low vision impairments, making access to online educational visual material more equitable. Here are some things to keep in mind:

Ensure minimum text sizes are utilized for clarity
Choose fonts that are easily readable and clear
Avoid using white text on a dark background
Ensure colour is not used as the only method used to convey information or identify content
Foreground and background colour combinations provide sufficient contrast
Ensure your images use good contrasting colours between elements that convey information
Use thicker line weights on strokes to improve visibility
Images of text are to be resizable, replaced with actual text, or avoided when possible
Implement concise alternative text for screen readers

Learn more

Web Accessibility for Designers: https://webaim.org/resources/designers/

Web Accessibility tutorials: https://www.w3.org/WAI/tutorials/

Designing for Web Accessibility: https://www.w3.org/WAI/tips/designing/

Web Accessibility Standards: https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards