Zur Navigation Zum Inhalt Kontakt Menu Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Design Tokens Components Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons
Visual Design

You design the visual appearance of the product.

Structure the content

Ensure that the most important information can be identified at first glance. Use a simple structure, clear hierarchies and keep in mind the reading order. Ensure that the page remains comprehensible even when zoomed to 200%.

Testing: Use the zoom function in your browser or on your phone.

Reference: https://www.w3.org/TR/WCAG21/#resize-text

Ensure sufficient contrast

The contrast between text and background must be at least 4.5:1. For the interface and other non-text elements that are important to understanding, a minimum contrast of 3:1 applies. Take particular care with background images, avoid them whenever possible.

Testing: Colour Contrast Analyser https://developer.paciellogroup.com/resources/contrastanalyser

Reference 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
Reference 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

Ensure sufficient size

Ensure that all touch targets have a size of at least 44 x 44 pixels. Also, use sufficiently sized and clearly legible fonts without serifs. As a rule of thumb, a size of at least 16 pixels is recommended.

Testing: Measure using the relevant developer tools.

Reference: https://www.w3.org/TR/WCAG21/#target-size

Make the focus clear

Structure the keyboard focus so that it is obvious where the user is in each situation. As an example, go to sbb.ch and press the Tab button several times.

Testing: Take away the mouse or connect an external keyboard to your phone.

Reference: https://www.w3.org/TR/WCAG21/#focus-visible

Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Cookie settings