Search

Customize the colors of a group

  • Updated

Who can use this feature?

  • Platform admins and group admins can customize the colors of their groups. 
  • This feature requires the Customization solution. Contact your Customer Success Partner (CSP) for more information.
  • 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 a group page in 3 mains areas:

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

Edit the colors of a group

  1. In the left sidebar, click on a group.
  2. At the top right, click gear cog.svg Settings.
  3. In the lift sidebar, click Branding.
  4. Click on the field below Main color, Left 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.

Default platform colors

If you haven't customized the colors of your platform, it will use the default values provided by us.

Starting July 31st, 2024, new default colors are implemented for new and generic platforms as part of our new branding initiative. If you prefer to keep the previous default colors, you can customize your platform using the old default values.

Old default colors (before July 31st, 2024)

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

New default colors (effective July 31st, 2024)

  • Main color: #212227
  • Left bar background: #FBF6F2

About color propagation in groups

When you customize the colors of a group, the branding automatically applies to subgroups that don't already have another branding applied.

However, some email notifications and pages are not related to any group:

  • The homepage
  • The search results page
  • The users profile page
  • The course pages when you play or edit a course
  • The path pages when you play or edit a course

If a learner is a member of multiple groups with different brandings, by default, the colors of the lowest private common ancestor apply to the pages that are not related to any group. The lowest private common ancestor of a user is the lowest private parent group of all the groups that the user belongs to. 

The following diagram shows a group hierarchy, where private groups are represented with a lock.

Group hierarchy-Group page branding.svg

In the example above, each group has different platform colors. 

  • Ada is a member of group A (public) and group A.1 (public). She is automatically added to the lowest private parent of those 2 groups: group X (private). On her platform, the pages that are not related to any group, such as the homepage, are displayed with the colors of group X.
  • Etta is a member of group B (private) and group B.1 (public). On her platform, the pages that are not related to any group, such as the homepage, are displayed with the colors of group B.
  • Joe is a member of group B (private), group B.2 (public), and group C (private). The lowest private common ancestor group for Joe is group X. On his platform, the pages that are not related to any group, such as the homepage, are displayed with the colors of group X.

You can choose to apply the colors of a specific group to the pages that are not related to any group on the platform of a given learner. For more information, see Edit the primary group in a learner's profile.

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?

0 out of 0 found this helpful

Have more questions? Submit a request