Updates to the Salesforce UI That Will Improve Accessibility for Low-Vision Users

Editor’s note: This post was updated on August 21, 2023, with the latest information and resources.

We’re about to make a big update to the user interface (UI) in your Salesforce environments. How big, you might ask? Well, it’s going to affect all Lightning UI and should dramatically improve the experience for your users with low vision. Last year, we ran a study involving a number of Salesforce users who have low vision, and we found that many of them struggled to recognize important UI elements in Salesforce—such as buttons, icons, and links—because they weren’t dark enough to stand out in their lightly colored backgrounds.

As Trust is our #1 value at Salesforce, we’ll be updating our Lightning UI to be more accessible to these individuals in 2023. In particular, we’ll be increasing the contrast of many colors in our experience, thus improving the recognition of visual information, such as text, icons, warning messages, buttons, and more. This update will also allow our products to comply with modern accessibility compliance standards, namely Web Content Accessibility Guidelines (WCAG) for non-text color contrast and text color contrast.

What is updating?

We’ll be updating the platforms our Lightning Experience is built with: the Salesforce Lightning Design System (SLDS), Lightning web components (LWCs), and Aura components.

Standard object, action, and doctype icons are updating to meet our WCAG standards for non-text color contrast and text color contrast. Colors in the icons will change to improve the recognition of visual information within our experience. Backgrounds will migrate to our new iconography palette built from our color system.

We’re also making updates to components and patterns in our experience. These updates will focus on areas of the UI that convey information or can be interacted with, such as warning graphics or buttons. The below examples will contain notable modifications that are important to be aware of. These examples include neutral buttons, inputs, links, and warning messages.

Example 1: Neutral buttons

Neutral buttons are commonly used across the Salesforce experience. All types of buttons using a grey border will receive a darker border. This includes not only the buttons in the example above, but also button icons, button groups, checkboxes, and radio groups, amongst other functional patterns using a grey border.

Example 2: Inputs

Similar to buttons, inputs will also have their borders darkened for an increased contrast on white backgrounds. The edit icon will also be darkened so those with low vision can discover it.

Example 3: Links

Our link color is updating to ensure it passes color contrast for text on white and grey backgrounds. For the future, we’re considering adding an underline under links so we can better convey information to color-blind individuals.

Example 4: Warning messages

The orange for warning messages is also updating because the information in the warning labels could be black or white.

Why is this happening?

With the current colors in Salesforce, low-vision users struggle to recognize key UI elements, which not only frustrates them, but also prevents them from adopting Salesforce. In addition, Salesforce and its customers face key compliance issues because an increasing number of governments around the world, including the European Union (EU), require color contrast in accordance with WCAG 2.1. WCAG 2.1 has required companies’ websites to use text that meets a 4.5:1 color contrast from its background and functional non-text elements that meet a 3:1 color contrast. Increasing our color contrast to meet these standards will allow us to provide a better experience for low vision users and allow companies who use our products to avoid hefty accessibility fines.

When is this happening?

All icons will update as part of the Summer ’23 release.
Select record homepages including the LWCs embedded on the pages will update as part of the Summer ’23 release.
All other pages, SLDS, and Lightning base components will update as part of the Winter ’24 release.

What do I need to do?

If you haven’t made any customizations to the Salesforce UI or if you’re using just Lightning App Builder or Experience Builder to customize your pages, there’s nothing you need to do. You’ll receive all these changes for free!

If you know there are color customizations done, CSS code, or components built with custom colors using SLDS, please be sure your custom UI doesn’t experience any visual regressions and work with your developer to make updates as necessary.

Quick recap

By the Winter ’24 release, out-of-the-box and custom experiences you’ve developed in Salesforce will automatically update to improve accessibility for low-vision users. Please be sure to check that any custom UI you’ve created hasn’t experienced any visual regressions. If not, enjoy the improved accessibility of your application!

Resources

• Salesforce Site: Lightning Design System
• Salesforce Summer ’23 Release Note: See Improved Color Contrast in UI Elements
• Salesforce Winter ’24 Release Note: See Improved Color Contrast in UI Elements
• Salesforce Winter ’24 Release Note: Use Global Color Styling Hooks to Match Color-Contrast Changes
• Salesforce Site: Lightning Design System – Accessibility Color Contrast Migration Guide