Overview
In our design system, we develop our components in alignment with the Web Content Accessibility Guidelines(WCAG) 2.1 level AA. This approach ensures that our digital products are accessible to all users, including those with disabilities. By following these guidelines, we create an inclusive experience that allows everyone to interact with our interfaces effectively. We regularly assess and enhance our components to meet these standards, making accessibility a fundamental aspect of our design practices.
Accessibility can be reached by using image alt texts, ARIA-Labels and other following requirements.
Color contrast
WCAG 1.4.3 Contrast states that
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
except for the following:
* Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
* Text that is part of a logo or brand name has no contrast requirement.
Large-scale text is defined as 18pt or 14pt bold text, which can be interpreted as 24px or 18.5px bold text. See our typography guidelines for the corresponding mappings to our font styles.
For graphics required to understand the content, a minimum contrast ratio of 3:1 is sufficient as per 1.4.11 Non-text Contrast.
Inactive components are not required to meet contrast requirements.
Understanding SC 1.4.11 Non-text Contrast states that:
It is not required that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.
This is especially relevant e.g. for white cards on light-grey background or secondary buttons on white background. The visual indicator then is the content (text, icon, ...) of the control. This has to have sufficient contrast.
Text size
Although many sources recommend using a minimum text size of 12 pt/16 px, the WCAG does not specify a minimum font size for text.
The default text style, copy 100, is 14px (0.875rem at the default user text size). The default headline style, headline 100, comes down to 16px (1rem at the default user text size).
More important in regard to WCAG is the scalability of text. Thus, rem values are used for all text style definitions.
Target size
Accessible target sizes ensure interactive elements (buttons, links) are large enough to be easily activated, reducing errors for users with motor impairments or those using touch devices. WCAG 2.5.8 (Level AA) requires a minimum 24×24 CSS pixel target size, while WCAG 2.5.5 (Level AAA) and common design guidelines (like Apple/Google) recommend 48×48px for optimal usability.
While some OTTO Design System components are provided with a minimum 48×48px target size, smaller components can also have a smaller 24×24px target size. Use bigger variants for main use cases, as they are optimized for touch usage. If components appear smaller than 24×24px, they often feature an enlarged hitbox around them.
48px
32px
24px
16px
HTML
<div style="display:flex;align-items:center;gap:8px"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;text-align:right">Touch target<br>48px</span><span style="position:relative;display:inline-block;width:12px;height:48px"><span style="position:absolute;left:5px;top:1px;bottom:1px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:2px;top:1px;width:6px;height:6px;border-left:2px solid #f0056e;border-top:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:2px;bottom:1px;width:6px;height:6px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></span><span style="display:grid;place-items:center;width:48px;height:48px;background:#fde3ef"><oc-icon-button-v3 variant="secondary-over-color" size="50" icon="wishlist" oc-aria-label="Merken"></oc-icon-button-v3></span><span style="position:relative;display:inline-block;width:12px;height:32px"><span style="position:absolute;left:5px;top:1px;bottom:1px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:2px;top:1px;width:6px;height:6px;border-left:2px solid #f0056e;border-top:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:2px;bottom:1px;width:6px;height:6px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></span><span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;text-align:left">Icon button<br>32px</span></div><div style="display:flex;align-items:center;gap:8px"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;text-align:right">Touch target<br>24px</span><span style="position:relative;display:inline-block;width:12px;height:24px"><span style="position:absolute;left:5px;top:1px;bottom:1px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:2px;top:1px;width:6px;height:6px;border-left:2px solid #f0056e;border-top:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:2px;bottom:1px;width:6px;height:6px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></span><span style="display:grid;place-items:center;width:24px;height:24px;background:#fde3ef"><oc-icon-button-v3 variant="secondary-over-color" size="25" icon="wishlist" oc-aria-label="Merken"></oc-icon-button-v3></span><span style="position:relative;display:inline-block;width:12px;height:16px"><span style="position:absolute;left:5px;top:1px;bottom:1px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:2px;top:1px;width:6px;height:6px;border-left:2px solid #f0056e;border-top:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:2px;bottom:1px;width:6px;height:6px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></span><span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;text-align:left">Icon button<br>16px</span></div></div>Very few components have a smaller than 24×24px target size, they are called undersized. Link 50 and 75 are examples for that. If they are used, make sure to have sufficient spacing around them, where no other interaction is possible. This dead space shall be at least 24×24px around the center of the component.
Resize text - Use of ellipsis
In WCAG 1.4.4 Resize text it is required, that text can be resized [...] up to 200 percent without loss of content or functionality. This also means that it is usually prohibited to use ellipsis for truncating text. WCAG 1.4.12 Text Spacing has similar requirements but actually explicitly states, that "the page can still meet the Text Spacing requirements, so long as the content is still available. For example:
- a mechanism is provided to reveal the truncated text on the page (for instance, the text appears on focus or on activation)
- where the ellipsis is part of a section of content which includes a link, the truncated text is revealed on the linked page"
For that reason, the components that utilize ellipsis after a certain amount of lines automatically provide Tooltips when the the text is truncated. This can be activated using focus, hover and long-press. As these components usually characterize the nature of teasers, the second condition "truncated text is revealed on the linked page" could also apply.
Die besten Ideen
HTML
<div style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 16px"><a href="#" data-oc-tooltip-v2="Küche in Schwarz-Weiß einrichten" style="display:flex;align-items:center;gap:20px;width:300px;padding:6px;border-radius:24px;background:var(--oc-semantic-color-background-frame);color:var(--oc-semantic-color-text-default);text-decoration:none"><span style="flex:none;width:92px;height:92px;border-radius:16px;background:var(--oc-semantic-color-background-emphasized-hint)"></span><span style="min-width:0"><span style="display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:700;font-size:1.25rem;line-height:1.35">Küche in Schwarz-Weiß einrichten</span><span style="display:block;font-size:1rem;line-height:1.5">Die besten Ideen</span></span></a><span aria-hidden="true" style="width:0;height:0;border:7px solid transparent;border-bottom-color:var(--oc-semantic-color-background-inverted);margin-bottom:-8px"></span><div role="presentation" style="padding:8px 16px;border-radius:4px;background:var(--oc-semantic-color-background-inverted);color:var(--oc-semantic-color-text-inverted);text-align:center;font-size:0.9375rem;line-height:1.45;box-shadow:0 4px 12px rgba(0,0,0,.12)"><strong>Küche in Schwarz-Weiß einrichten</strong><br>Die besten Ideen</div></div>