The visual system serves various functions, four of which are critical in the context of designing apps for older adults:

• Visual acuity is the ability to see fine details of objects such as text, icons and buttons in apps for older adults.
• Contrast sensitivity is the ability to discriminate between different brightness levels.
• Color perception is the ability to distinguish between different colors in and around text, icons, buttons, etc.
• Usable visual field is the ability to use the whole of the visual field to perceive detail in the area being looked at and the surrounding area.

In this article we take a deep dive into providing optimal brightness and color contrast in apps for older adults.

According to the National Eye Institute in the US, from the age of 40, contrast sensitivity starts to decline, until at the age of 80 it may have been reduced by up to 83%.  Simply put, the older eye is less able to make out low contrast patterns. This has profound implications when choosing colors.  For example, as illustrated below certain text color and background color combinations are extremely difficult to read for older people with low contract sensitivity. These are important factors when designing apps for older adults.

Graphics Courtesy University of Cambridge

In addition to making it more difficult to discern textual information, visual sharpness also gets worse with declining contrast sensitivity. Declines in contrast sensitivity cause the older eye to have slower accommodation transitioning between dark and light places.  Older eyes have more difficulty seeing thin lines and focusing on hard edges.  Beyond affecting reading in general, this makes it difficult for seniors to distinguish between similar icons, buttons and other user interface element shapes where edges and lines are critical visual cues in apps for older adults.

Color Contrast

Most designers use color for aesthetic purposes when designing apps for older adults.  This is good as long as the colors provide sufficient contrast for distinguishing shapes and reading text.  People often assume a difference in color is what creates color contrast, but that’s not true. You might have two colors that are different but have little contrast because their relative luminance is the same.  One envision relative luminance is in terms of the tone of the color (amount of gray in the color).  This is illustrated below:

Graphic Courtesy CoSchedule

Standards Exist

Color contrast is generally specified as a ratio of the relative luminance of the lighter color to the relative luminance of the darker color.  A list of tools for measuring contrast ratios is provided at the end of this article.

For people with normal vision a contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text.

For people with impaired vision, W3C published a recommended minimum contrast ratio of 4.5:1 between text (or images of text) and solid (black or white) background behind the text.  The 4.5:1 ratio accounts for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies ageing.

W3C later increased the recommended enhanced contrast ratio to 7:1 for users with vision loss equivalent to approximately 20/80 vision.  The 7:1 level generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color blindness.

The W3C recommendations are based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1.

Exceptions to the W3C recommendations are (1) that large text (and images of large text) have a contrast ratio of at least 3:1; (2) text (or images of text) that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; and (3) text that is part of a logo or brand name has no minimum contrast requirement.

Note that in most cases black type against a white background, or white type against a black background work consistently well in apps for older adults.  These black/white variations have a contrast ratio of 23:1.

Recommended Strategy

1. Whenever possible, provide a minimum contrast ratio of 7:1 between text (or images of text) and solid background for the broader senior population (65 and older). The 7:1 level provides compensation for the loss in contrast sensitivity experienced by elderly users with low vision who do not use assistive technology and provides contrast enhancement for color blindness.
2. We believe that the 1:4.5 ratio is not adequate because it assumes a relatively low level of vision loss across too broad an elderly population. However, if your product is targeted for the younger segment of the senior market (say 65-75) then 1:4.5 ratio may be adequate.
3. Exceptions to the contrast ratio recommendations above are (1) large text (and images of large text) can have a contrast ratio of as low as least 3:1; (2) text (or images of text) that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; and (3) text that is part of a logo or brand name has no minimum contrast requirement.
4. Bigger is better. Providing larger text, buttons, icons, lines, pointers and other user interface element shapes can also help mitigate contrast problems.  Using sans serif font for text can also help mitigate contrast problems.  See our article on Understanding Recommended Font Sizes and Understanding Recommended Target Sizes for more detailed information.
5. Where possible let people easily adjust contrast themselves in apps for older adults. Our website www.eldertech.org provides an example of how a Word Press add-on can be used to easily do this in websites.  This add-on also provides elderly users with a one-click way of making text larger.  Similar strategies can be employed in apps and other types of user interfaces.
6. Use adequate white space in apps for older adults. Blocks of text are easier to read if surrounded by white space.  This is also true with shapes such as buttons and icons.  There are no specific minimum white space recommendations for vision (although there are for mitigating motor control problems).
7. Avoid patterned backgrounds in apps for older adults. They provide lower contrast ratios and may also be distracting.

Available Tools

• Colour Contrast Analyser provides a pass/fail assessment against WCAG 2.0 color contrast success criteria and simulation of certain visual conditions, including color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.
• Colour Contrast Visualiser helps you find optimal color combinations by visualizing the colors that provide sufficient contrast on a color palette. Colour Contrast Visualiser is available in Flash and Adobe AIR versions, so you will need support for either of these in order to use it.
• Luminosity Colour Contrast Ratio Analyser tests for a contrast ratio of 4.5:1 as recommended by WCAG 2.0.
• Snook Colour Contrast Check tests text and background color combinations against WCAG 2.0 Font size is taken into account.
• CSS Analyser does a color contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.
• Colour Contrast Analyser Firefox Extension examines the difference between foreground and background colors for text elements.
• Colour Contrast Check lets you input foreground and background colors either by entering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen color combination looks like and whether it passes the test.
• Sight Exclusion Estimator is a mobile-friendly website that enables you to assess the visual clarity of text or graphics that are viewed on a handheld device. It estimates the number of people who would be unable to see such designs comfortably.

Related Articles: User Interface Best Practices Guidelines for Seniors | Understanding Recommended Font Sizes | Understanding Recommended Target Sizes | Using Color When Designing Technology for Seniors