Customize the colors of your platform

  • Updated

Who can use this feature?

  • Platform admins can customize the colors of the platform for all groups.
  • On platforms with the Customization solution, group admins can customize the colors of each group. For more information, see Customize the colors of a group.
  • Accessible only on the Web Application.

To give users more control of the look and feel of the platform, admins can customize the colors of their platform in 3 main areas:

  • The main color — the buttons in platform pages, dialog boxes and email notifications, the top navigation chip for the current page, links, and highlighted elements.
  • The left bar background — the background of the left navigation bar, visible everywhere except when playing training content.
  • The platform background — the background of the central section in the homepage, the group pages, and the profile pages. The platform background isn't visible in search results and when playing or editing training content.

If you cannot see the color changes, it may be because custom CSS is activated on your platform. Contact your platform owner to know more.

Edit the platform colors

  1. In the left sidebar, click the platform group (with the golden crown at the bottom right of its icon).
  2. At the top right, click gear cog.svg Settings.
  3. In the lift sidebar, click Branding.
  4. Click on the field below Main colorLeft bar background, or Platform background to change the colors.
      • To use a HEX code, click on the right side of the field, and enter the code directly.
        HEX color.gif
      • To use the eyedrop tool, click on the color preview on the left side of the field, change the spectrum, and click somewhere in the color area. Then, click outside the menu.
        eyedrop.gif
      • To use an RGB or HSL code, click on color preview on the left side of the field, and enter the value in the fields. Then, click outside the menu.
        RGB.gif

    If you select a platform background with insufficient color contrast with the main color, the platform displays a warning. You can still apply the selected colors, but the result may impact legibility and accessibility. For more information, see About contrast ratio.

  5. At the bottom right, click PREVIEW to preview the changes in the homepage, the left navigation menu, and the email notifications. You can click RESET to restore the previous values. 
  6. When you’re happy with the changes, click APPLY.

The platform adapts the text and icons' colors to ensure the best contrast ratio with the platform background, according to the Web Content Accessibility Guidelines (WCAG):

  • If the platform background is dark, the text and the icons are white.
  • If the platform background is light, the text and the icons are black.

If needed, here are the default platform values: 

  • Main color: #2567F4
  • Left bar background: #FAFAFD

About contrast ratio

Contrast ratio refers to the difference in luminance, or intensity of light emitted, between 2 adjacent colors on a display. A mathematical formula measures the contrast ratio on a scale from 1:1 to 21:1, with higher values indicating better contrast.

When you select your platform colors, keep in mind that the contrast ratio between the Main color and the Platform background may impact the user’s ability to see and interact with the platform. A sufficient color contrast promotes a better user experience for everyone, from users with visual impairments to users interacting with the platform on small devices or under direct sunlight.

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for 3 compliance levels:

  • A: Minimal Compliance, with no minimum contrast ratio required.
  • AA: Acceptable Compliance, with a contrast ratio of at least 4.5:1.
  • AAA: Optimal Compliance, with a contrast ratio of at least 7:1.

We recommend a contrast ratio of at least 4.5:1, which is acceptable according to the WCAG and means your platform is usable and accessible for most users. However, you may need to comply with a higher WCAG compliance level, depending on factors such as your company size, industry, and purpose of your product or service. 

To check the contrast ratio between your Main color and Platform background:

  1. Open a contrast-checking tool, such as:
  2. On the fields below or next to Foreground and Background, enter the HEX color codes for your Main color and Platform background.
  3.  If the contrast ratio is inferior to 4.5:1, it doesn't pass the AA compliance level. Consider adjusting the colors to increase the contrast ratio.

When you select the platform background, the platform automatically adapts the text and icon colors to ensure the best contrast ratio.

Impacted emails

The customization currently shows up on the following email notifications:

Check out our blog for more L&D resources.

Was this article helpful?

3 out of 6 found this helpful

Have more questions? Submit a request