Corporate Design
Accessible Design
WAGO wants to make content and services accessible to as many people as possible. A barrier-free design enables and facilitates access to information for people with various limitations and needs, so that no one is excluded from society. In our corporate design, we therefore rely on barrier-free elements and are guided by the internationally applicable standard WCAG (Web Content Accessibility Guidelines). These guidelines comprise a series of principles and success criteria that are divided into three levels of conformity: A (basic level), AA (enhanced) and AAA (highest level), with level AA being sufficient. Although the guidelines were primarily designed for digital content, they provide a valuable overarching basis. This means that principles for contrasts, fonts and structure can also be transferred to print design.
Color Contrast
Color Check
- A high contrast value, e.g. for texts, graphics and icons, is important to ensure accessibility. The following values apply to texts and their backgrounds:
- Minimum contrast for text:
- Texts: 4.5:1
- Large texts (18pt/24px) 3:1
- Bold text (14 pt/18.7px) 3:1
- Minimum contrast for non-text:
- Information-bearing graphics, graphic control elements, in all available interaction states (activation, focusing), present to adjacent colors 3:1
WAGO Green
- We use our anthracite color for a combination of WAGO green in conjunction with text, so that the accessibility requirements of WCAG and BFSG are met.
- The contrast value is 7:1 and is therefore well above the minimum requirement of 4.5:1.
Dos and Don’ts
Beispiel für barrierefreihe Bullet Points
Bullet Points
- If the bullet points convey information, they must correspond to a contrast ratio of 4.5:1 because they are to be understood as text. This is the case if they are letters or numbers. In our case, this is the “Numbered List” (WCAG 1.4.3 - Text).
- On digital surfaces, the bullet points are displayed in anthracite to make the enumeration visible to the user and to improve readability and structuring.
Schritt 1 - Das können Sie nach der Registrierung
- Bestände einsehen
- Merkliste dauerhaft speichern
- Vergleichslisten dauerhaft speichern
Examples from Digital Media, Print and Social Media
Graphics and diagrams
Information must not be conveyed exclusively via color. There must be an additional visual distinction.
Pro Tips for a accessible Design in different media (excluding interfaces)
- The Aktiv Grotesk (all font styles) and the Lexia Light are neither used in green on white, nor in white on green.
- The LexiaXBold can be used in headlines or quotes from a font size of 20 pt in green on white or white on green.
- For digital assets (e.g., for social media), the font, anthracite, is used instead of the color black.
Further requirements for digital interfaces
The Accessibility Act (BFSG) will come into force on June 28, 2025 and the WCAG standard will serve as the basis for the implementation of the BITV and the BFSG. As a B2B company, we are not currently obliged to implement the law. However, our aim is already to reach as many people as possible with our digital services and products and to offer smooth operation. In addition, it may develop in the future that the aforementioned guidelines will also apply to B2B companies, even if there is no legal requirement at present. (as of 28.04.2025)
Further information and a detailed overview of the individual rules can be found in Sharepoint.
The four success criteria according to WCAG
Perceivable
Web content should be perceivable for all users, regardless of their abilities or limitations. This includes the use of alternative text for images, clear and well-structured content and appropriate contrasts.
Operable
Websites should be easy to use for users, regardless of the type of interaction (e.g. mouse or keyboard). This includes navigability, keyboard navigation and the avoidance of unnecessary time limits.
Understandable
The information and operation of the website should be easy to understand. This includes the clear labeling of forms, the avoidance of jargon and the provision of assistance.
Robust
The web content should be robust enough to be interpreted by a variety of user agents (browsers and assistive technologies).
Use of colors
- Color should not be used as the sole visual means of conveying information, indicating an action, prompting a response or distinguishing an element, for example in graphics, diagrams or as a status message.
- There should be additional labeling to convey important information even without perceiving the color.
Typography
- Good legibility improves user-friendliness.
- For font sizes, WCAG recommends using font sizes from 14 pt in order to be sufficiently legible.
- For better legibility, texts in the digital area have a minimum size of 15 pt.
- In the browser, texts have a default font size of 16 px, which means that the specified font size can be overwritten. By adjusting to 15 px, the difference is only minimally visible to the user.
- Texts should have 1.5 times the line height and not be cut off.
Buttons
- Clear navigation contributes to a positive user experience
- Control elements require a minimum size or a minimum distance to the next control element.
- The size of the target area for pointer input is at least 24 × 24 px, a clickable area of 48 x 48 px is even more user-friendly.
Icons
Interface Icons
According to WCAG 1.1.1, icons (non-text content) must have an alternative label. The alternative can be a label next to the icon, a tooltip (semi-good) or an alt text that is stored and can be read aloud by assistive technologies if required.
All icons are displayed on digital interfaces in anthracite so that they are clearly visible and accessible to all users.
App Icons
Display interface icons in anthracite, as the icon follows a function. Users should be able to recognize which application they are using.
People with visual impairments or cognitive limitations benefit from clear, high-contrast and unambiguous icons, as they do not have to rely as much on small fonts or long names. Users can find and open the app more quickly, which makes interaction easier and avoids frustration - particularly important for people with motor impairments.