User Interface


DHL seeks to offer quality products and services that are accessible for all users. Regardless of abilities, impairments and the environment, users should be able to navigate, understand and use the DHL user interface.

  • Usable for all
  • Contrast & Color usage
  • Keyboard interaction
  • Assistive technology

Usable for all

Disabilities may affect how people see, hear, move, communicate, learn, understand, and process information. According to the WHO World Report on disability, 15% of the world's population (roughly 785 million people) live with some form of disability. Many of them face limitations that impact how they use digital products. However, web accessibility is not limited to users with permanent disabilities. Users with temporary or situational impairment can benefit from a more accessible user experience. By considering the needs of users with limitations, the experience becomes better for all users.

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


Bold text (>18.5px/14pt)


Large text (>24px/18pt)


Interface controls and icons


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.