What You Can Learn From Older Adults About Accessible Design

Small changes to your product can benefit more users.

For those of you who work in product, design, or engineering, when was the last time you tested out your product on someone who was 65 or older? If you’re like me — someone who’s spent the last 10 years working in user experience design for startups and Big Tech companies — the answer is likely, well, never.

And I didn’t question that.

I’ve always worked on B2B products and figured people 65 years and older would be retired before they used something I designed. I was wrong.

Pew Research estimates that 29 percent of Baby Boomers ages 65 to 72 are still in the workforce. This number is only likely to increase as advances in science and medicine help us remain healthy and active longer. Today, one in six people in the U.S. are 65 years old or older; by 2030, that number is projected to be one in five.

The other reason I never considered this age group in my research? Perception.

When you think of an older adult, who comes to mind? I used to picture my grandpa. Born in 1925, he didn’t grow up with technology and struggled to adopt it when he was older. We bought him a smartphone, but he never kept it charged. We installed an Echo Show in his apartment hoping we could do video chats, but he didn’t seem as eager to adopt the new device as we were.

In reality, an older adult isn’t just someone my grandpa’s age. It’s someone like…my mom. (Sorry, mom.)

She turned 65 last year. She’s still working, still getting promoted, and still getting raises. She’s an integral part of her team and her company. Like me, she relies on her laptop and smartphone to get things done. And yet, she’s often not considered in the design of the software she uses. This is a problem. Due to the natural process of aging, she has different needs than her younger counterparts.

Understanding the range of users

As designers, engineers, and product managers, it’s our responsibility to make sure that what we build works for as many users as possible. To do that, we need to understand all of our users and what they need to be successful.

Let’s consider what happens when people age and a few small changes we can make to color, contrast, and text that can have a big impact on accessibility—not just for older adults, but for everyone.

Color

As we age, shades of blues and purples become more difficult to distinguish.

Most of us will experience some type of age-related vision loss. By age 45, seven in 10 adults will need to wear glasses. Some also experience a decrease in color vision, which is the ability to distinguish between different colors.

Loss of color vision happens when a yellow film forms over the eye. People have described it as though they’re looking through “ginger-ale-colored glasses.” With this filter, colors appear duller. Blues and purples are especially difficult to distinguish. Yellows and greens can be tricky, too. The change happens gradually, so many people don’t notice until they’ve had corrective surgery.

The previous image as viewed through a yellow filter

This happened to my dad. He had cataract surgery when he turned 65. He hadn’t realized his color vision was off until the first time he saw the car he’d bought a few years earlier.

“It’s like I bought a new car!” he told me.

He was shocked to discover his car was so much brighter with much more magenta in it than he’d thought.

Before cataract surgery, my dad’s perception of the color of his car was off.

What does this mean for your designs? Color is important to communicate mood, tone, and critical information. The key to using color is to recognize that people perceive color differently. Color blindness, glare from sunlight, and screen resolution are other examples of factors that affect color perception. This means it’s good practice to use more than color to convey meaning.

Let’s say you want to design a warning system where red means error and green means success (a very common pattern). Adding supporting text and/or an icon gives additional cues that can help those who have trouble distinguishing color differences. It also improves clarity and lightens the cognitive load.

This benefits all users, not just older adults.

Contrast

A topic closely related to color is contrast. Contrast is the difference in brightness between foreground and background colors. As you age, many people find it difficult to differentiate between visuals that have a similar contrast.

This decrease in contrast sensitivity is why some older adults complain about driving at night. It’s hard to pick out foreground objects (such as pedestrians) from background objects (such as the yellow lines on the road), especially if the street is poorly lit.

At the eye doctor, the Pelli-Robson chart is used to test contrast sensitivity.

On the web, contrast is measured as a ratio that ranges from 1:1 to 21:1. The first number refers to the relative brightness of light colors. The second number refers to the relative brightness of dark colors. So 1:1 would be white on white (no contrast or invisible). 21:1 would be white on black (high contrast).

The Web Content Accessibility Guidelines (WCAG) recommends that body text should have a minimum contrast ratio of 4.5:1 (AA rating). This will allow most users to read your content. However, increasing the contrast ratio to 7:1 (AAA rating) improves the usability by more people who have low vision or other disabilities, or if they find themselves in a situation that temporarily affects their vision.

While it doesn’t seem like there’s a drastic variation between a 4.5:1 ratio and a 7:1 ratio, the increase makes content more accessible to more people. Even those who have 20/20 vision find that higher contrast text is easier to read. (Learn more about how Salesforce’s design systems team created its own set of contrast guidelines.)

Examples of body text at different contrast ratios

To check contrast, you can use any number of free online tools, including WebAIM.org and Chrome DevTools. In WebAIM, plug in the hex codes for the foreground and background colors to get a contrast value.

Chrome DevTools is also a great resource. There’s a contrast panel located within the inspector panel (option + command + i for Mac users) that can assess whether your colors meet the AA or AAA ratings.

Recently, Chrome DevTools rolled out the CSS Overview which gives a snapshot of the CSS across your website and detects any contrast issues. (From the inspector panel, go to overflow menu, then More Tools > CSS Overview.)

Text

We often forget, or don’t realize, that digital products predominantly center on words. People visit your product or website to get information, so it needs to be easy to navigate and understand.

Without text, your product probably isn’t that useful.

And yet often that doesn’t happen. How many times have you encountered, say, an image of a menu online that looked like this:

The text on background images is hard to read. The all-caps text “shouts” at you and line height is too dense. The numbers don’t align. All of these design choices make the menu difficult to absorb.

Now think of some frustrating experiences on the web: text that’s too small and dense, or low contrast; hard-to-find buttons or links; unclearly labeled buttons. These contribute to poor user experience. Let’s take a closer look at a few considerations for how to treat text on the web.

Font: Keep the font simple and, ideally, sans serif. Sans serif fonts are minimalist and considered highly legible in digital environments. Serif fonts, which have extra strokes and flourishes, can be harder to read at smaller font sizes and tighter densities. Condensed or all-caps fonts are also hard to read.

Font selections generally should optimize readability, legibility, and scannability of your content.

Line Height: Line height refers to the difference in space between two lines of text. WCAG recommends that line height is about 150 percent or 1.5 times the size of the font. Having the right line height gives text “breathing room” and makes it easier to read or scan.

Font Size: Size matters. Make sure your body copy is at least 16px. If you’re building an app that’s aimed for older adults, consider adding the ability to adjust the font size and line height. Many devices (smartphones, e-readers, computers) and apps offer this feature now. You might think 16px is too large, but as of this writing, the body text on Medium is is 20px. And it’s comfortable to read, right?

So, now what?

The process for making products that are inclusive and accessible can be overwhelming. But you can start by implementing reasonable tweaks to color, contrast, and text in your designs. It’s important to learn from your users. The population of older adults continues to grow. Their insights can help designers shape better products that, ultimately, can benefit everyone.

—

Acknowledgements: This article was based on a talk I gave at the 2022 TrailblazerDX conference. Many thanks to Danielle Barnes of Women Talk Design, a program aimed at amplifying the voices of women and nonbinary folks, for encouraging me to give this talk and preparing me along the way. And a special shout out to Maisee Xiong and the other folks in our Present Yourself program for the encouragement and support along the way.

Salesforce Design is dedicated to elevating design and advocating for its power to create trusted relationships with users, customers, partners, and the community. We share knowledge and best practices that build social and business value. We call this next evolution of design Relationship Design. Join our Design Trailblazers community, become a certified UX designer, certified strategy designer, or work with us!