Design Basics

Accessibility in Corporate Design

DHL wants to make its professionals products and services available to everyone, regardless of abilities, requirements or potential impairments. We do this by incorporating accessible elements into our corporate design.

Accessibility in Corporate Design
  • Essentials
  • Legibility
  • Text recognition
  • Contrast and surfaces
  • Icons
  • User Interface

Essentials

Specific requirements for different media have an impact on our corporate design and need to be kept in mind. Because it is not possible to define equal standards for all circumstances, this guide is intended to provide recommendations rather than requirements. However, you should aim for the highest possible degree of accessibility.

Use DIN Standard 1450 a basis for determining legibility and accessibility when designing on-brand materials and texts.

For web applications, follow the recommendations in the Web Content Accessibility Guidelines (WCAG).

Legibility

Essentials

A legible text is one that is coherent and understandable. In addition to the content, the way you design your typography can significantly influence how legible your text is.

Plain Language

Plain language is writing designed to ensure the reader understands as quickly, easily and completely as possible. The UN Convention on the Rights of Persons with Disabilities views the use of plain language as a way to enable people with reading difficulties to participate in society and politics. Some general rules exist for writing in plain language. For example, keep sentences short, limit each sentence to one idea, and avoid passive constructions. Use clear, sans serif typefaces with sufficiently large font sizes. Organize your text logically, format it left justified, and use clear and understandable punctuation. Use colors very sparingly.

The use of plain language should have a specific purpose. It is helpful for people with mental, learning or reading disabilities, the elderly and non-native speakers. Decide whether to use plain language on a case-by-case basis and depending on your target audience.

 

Text recognition

Essentials

To make a text fully accessible, it is important that the blind and visually impaired are able to specifically perceive, recognize and differentiate between individual letters and characters.

Recognizing characters

In typeface design, microtypographical details are essential for recognizing and distinguishing individual letters. This was an important factor in the design of our Delivery font. With distinct shaping of each letter, open counters, and prominent ascenders, our Delivery font is ideal for accessible design.

 

Font sizes

DIN 1450 recommends a font size with a healthy visual acuity of at least 70% (acuity ≥ 0.7). For the visually impaired, the standard recommends multiplying by a factor of 1.4 and 1.75 (acuity 0.4 to 0.5).

Line spacing

DIN Standard 1450 also recommends line spacing with a healthy visual acuity of at least 70% (acuity ≥ 0.7). For the visually impaired, the standard also recommends multiplying by a factor of 1.4 and 1.75 (acuity 0.4 to 0.5).

Contrast and surfaces

Contrast

For digital applications, DHL follows the Web Content Accessibility Guidelines (WCAG) 2.1, level AA. Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1 (= Michelson contrast of 0.6). For font sizes below 18 pt (or 14 pt bold), the contrast ratio must be at least 7:1 (= Michelson contrast of 0.8).

For offline applications and especially for print media, always make sure your contrast ratio is as optimal as possible. In print media, we recommend a Michelson contrast of at least 0.7.

Surfaces

Because the composition or texture of a surface may impair legibility, for example due to reflection or glare, it is best to always use matt surfaces. Avoid glossy surfaces altogether. For print media, be sure to use paper with sufficient opacity.

Icons

Pictograms [MB1] are a useful addition to your communications and in some cases can even replace text.

However, it’s important to design them clearly and concisely to ensure they are clearly understood. As a rule, it is easier to recognize two-dimensional pictograms, as we use in our corporate design, than linear pictograms.

User Interface

The DHL component library is committed to following the Web Content Accessibility Guidelines (WCAG) 2.1 AA level. It focuses on four main aspects: information should be Perceivable, interfaces should be Operable, content should be Understandable, and the meaning of the content should be Robust to changes in the way it is accessed.

Related resources:

 

Contrast & Color usage

Good contrast has a huge impact on accessibility for many users. The WCAG uses a contrast ratio, a numerical value assigned to the difference in relative luminance between the foreground and background, to define contrast. The highest possible contrast ratio is 21:1 for black elements on white background and vice versa. Following contrast ratios are defined as minimum by WCAG 2.1 AA:

 

Standard text

4.5:1

Bold text (>18.5px/14pt)

3:1

Large text (>24px/18pt)

3:1

Interface controls and icons

3:1

Different states of an interactive element should not be differentiated by color only. The interface should be usable without seeing color. This can be achieved with additional indicators or contrast.

 

Keyboard interaction

Many users rely on or prefer using the keyboard to access a page. Therefore, all interactive elements should be accessible by keyboard input. Common keyboard interactions include the Tab key to jump to the next focusable element, the Enter key to activate links, buttons or submit forms, the Arrow keys to navigate between related elements such as menu items or radio buttons, the Space key to activate toggles, expanded menus and submit buttons, and the Esc key to close modals, popovers and menus. 

In order to visually tell where the user is on the page, every interactive element needs a well visible focus state. DHL components use a thick outline. The order in which elements receive focus state should be logical and predictable.

 

Assistive technology

Many users rely on screen readers or other assistive technology to access and use the web. A well structured code with a clear hierarchy, landmark roles, ARIA (Accessible Rich Internet Applications) roles, meaningful text labels, and multimedia text alternatives will significantly improve the experience for these users. It is crucial to test each digital application in various popular screen readers across platforms and devices.