FOUNDATION
Accessibility
Accessible digital design ensures that users of all different abilities can use and navigate an interface.
This foundational guidance outlines the latest research and recommendations from the Goldman Sachs Design System. Future guidance may change to support new research, methods and/or code.
- Avoid designs with low contrast, small text or small icons.
- Optimize for keyboard input.
- Prioritize clean hierarchy and organization of information and break up large blocks of text.
- Avoid overwhelming and crowded pages.
- Design responsively to allow for browser zoom and optimized legibility.
- Don't rely only on color to convey information, add text or iconography as a supplement.
Color contrast is an important factor in legibility. Contrast ratios can range from 1:1 to 21:1 with 21 being the highest level of contrast and best legibility. Black text on a white background is a 21:1 ratio.
As per the W3C recommendations, regular sized text, less than 18 point, if not bold and less than 14 point if bold, should have a contrast ratio of 4.5:1 to meet AA standards.
The color system is built to meet AA standards in the following scenarios: our primary text color is on a light colored background (colors numbered 05–40) or white text is used on dark colored backgrounds (colors numbered 50–90).
DO: Use a background color that has enough contrast to meet the AA standard ratio.
DON’T: Use a background color that is close in the spectrum to the text color used.
We have a consistent set of contrast ratios for each color ramp across each of our swatches. This helps us be consistent in applying background and text colors that meets the 4.5:1 AA contrast across our color palette.
Dark text with lighter color backgrounds (#10–50) acheive AA contrast and white text on darker color backgrounds (#60–100) acheive AA contrast.
Within our color system using a contrast gap of at least 40 between the text color and background color can ensure sufficient AA contrast.
Text: Grey 20, Background: Blue 60, Gap: 40
Text: Blue 70 , Background: Ultramarine 30, Gap: 40
Text: Grey 40, Background: Blue 60, Gap: 20
Text: Gray 10 , Background: Ultramarine 30, Gap: 20
Our components aim to allow access to the full functionality from a keyboard without needing to use a mouse. We use standard keys and conventions first and foremost and add custom keys only when needed.
Tab is typically used to move to the next link, form element, or button. Shift + Tab is used to reverse or move to the previous link, form element, or button.
Directional arrows are used to move between menu links or adjust sliders in audio and video plugins. The direction should follow the interface direction using up/down when moving vertically and left/right when moving horizontally.
Enter activates the current link or button and performs the action associated with the link or button, typically directing to a new page or submitting a form.
Space checks or unchecks a checkbox form element. It will also activate a button that currently has focus.
Escape closes the current modal, menu or dropdown menu and returns to the element that opened it.
Web Content Accessibility Guidelines (WCAG) 2.1; (W3C, 2018) Andrew Kirkpatrick, Joshue O Connor, Alastair Campbell, Michael Cooper;
Designing for Keyboard Accessibility, (University of Washington)
Color Contrast Checker, Mari Johannessen
Contents