Configuring an accessible platform interface

Introduction

Keeping accessibility in mind when configuring your platform's interface is crucial. This article provides some basic considerations to help you in configuring the interface of your platform with accessibility in mind.

Colors and contrast

Contrast and colors are vital for an accessible interface. The text must have a sufficient contrast ratio against its background, allowing users with varying levels of vision to perceive and comprehend the content. Users, including those with visual impairments, must be able to perceive content on the page.

Keep a minimum contrast ratio of at least 4.5:1 for regular-size text and at least 3:1 for large-scale text. Also, the visual presentation of user interface components and graphical objects needs to have a contrast ratio of at least 3:1 against adjacent colors.

There are several tools to check the color contrast available online, such as:

• Color contrast checker (opens in a new tab)
• Color contrast analyzer (opens in a new tab)

Accessible color theme

The Docebo Learn default color theme provides accessible colors.

You can configure accessible colors in your platform by setting them in the Configure branding and look menu, Colors section.

Use the HEX codes provided in the following table:

Content hierarchy

Make sure you organize your content by assigning the proper heading level to titles: headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Remember that only one heading level 1 or <h1> is allowed per page and that it is managed by default by the platform title bar. This means that you need to use custom content starting from level 2 or <h2>.

Please note: Docebo is not responsible for any changes applied via custom CSS or HTML content injection.