Accessibility
Accessibility is a crucial aspect of design that ensures digital products are usable and inclusive for everyone, regardless of their abilities or disabilities.
This document outlines the accessibility guidelines for the components within our design system component library. These guidelines are designed to assist developers and designers in creating accessible user interfaces that comply with industry standards and best practices.
General principles
- Perceivable: Ensure that all users can perceive the content and interface elements. This includes providing alternative text for non-text content, ensuring sufficient color contrast, and offering resizable text options.
- Operable: Make the interface elements operable through various input methods, such as keyboard navigation, voice commands, and gestures.
- Understandable: Ensure that users can understand the content and operation of the interface. This involves providing clear instructions, consistent navigation patterns, and predictable behavior.
- Robust: Develop components that are robust and compatible with different assistive technologies and devices. Use semantic HTML, ARIA attributes, and progressive enhancement techniques.
Color and contrast
Bad color usage and insufficient contrast is perhaps the most common and obvious accessibility issue. This affects every user, and an effort should be made to ensure proper color contrast between background and foreground content. The WCAG accessibility guidelines define a minimum contrast level, which depends on the colors used, and the font size. Users should strive to achieve AAA color contrast whenever possible.
Check the Modes Inclusive Design section for more information about colors and contrast.
Contrast checker
This is a simple color contrast checker tool that allows you to check the contrast between two different colors (foreground and background), and returns the accessibility report on it. This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.
If the example below is not functioning as expected, refresh the page.
Accessibility is a crucial aspect of design that ensures digital products are usable and inclusive for everyone, regardless of their abilities or disabilities.
Great
Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast). The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text.