Add a reverse colour swatch to the accent (custom colour) to accommodate bright backgrounds

Jul 12, 2022

Hi 

I wasn't sure where I could add this after looking around the discussion boards so adding as a new discussion item here.

Our subsidiary company has a very bright accent/custom colour (#00ff33). This causes accessibility issues if text on top of it (or the background it sits on) is also a bright colour. See picture attached.
I can and have edited the css styles and html in the scorm file (rezipped and uploaded), but unfortunately the LMS system we utilise (SuccessFactors) will not accept the file after I've edited it. I would also would like to avoid this as the breadth and forecast of publishing on an ongoing process will become a sizable undertaking.

Could Articulate consider adding a reverse colour to the accent/custom colour?

Pinned Reply
Gren Foronda
Hi Mata!
 
Good news! You can now use theme color contrast to make sure that text or icons that appear on top of a theme color meet contrast guidelines automatically.
 
To use this new feature, simply go to the Theme tab, select Colors, and choose one of the following options:
  • Auto: Turns text and meaningful graphics to black or white automatically depending on your accent color to meet the minimum accessibility contrast requirements.
  • Dark: Turns text and meaningful graphics to black.
  • Light: Turns text and meaningful graphics to white.

Contrast

Once you’ve given it a try, we’d love to hear what you think!
5 Replies
Gren Foronda

Hi Mata!

With the release of the new Themes, text for some elements (such as the Course Title) automatically changes from light to dark as needed to preserve a 3:1 contrast ratio; see more details here.

However, this automatic change of the text color isn't applied to other elements yet, such as in the Continue button or the Numbered List label, see this screenshot:

Text and Accent color

We'll keep you posted as we update this feature and add more elements covered in the automatic change of text/accent color.

Gren Foronda
Hi Mata!
 
Good news! You can now use theme color contrast to make sure that text or icons that appear on top of a theme color meet contrast guidelines automatically.
 
To use this new feature, simply go to the Theme tab, select Colors, and choose one of the following options:
  • Auto: Turns text and meaningful graphics to black or white automatically depending on your accent color to meet the minimum accessibility contrast requirements.
  • Dark: Turns text and meaningful graphics to black.
  • Light: Turns text and meaningful graphics to white.

Contrast

Once you’ve given it a try, we’d love to hear what you think!
Mata Henry

Fantastic update! This is great news, thank you.
Could I also request that an adjustment be applied to the knowledge check selection/radio buttons as well? I've attached what the user experiences with our current #00ff33 accent colour.

Thanks very much - kudos to the team for actioning this so quickly.

Gren Foronda

Thanks for sharing your thoughts and suggestion on the accent color for the knowledge check radio buttons! I'll share this with the team and will keep you posted on any updates on this request.

Thanks as well for your kind words; I'll forward this to our team to let them know the new feature is well appreciated. :)