Changing the colour of the closed captions and its background ?

Jul 30, 2018

Hello,

I added captions to my project in storyline 360 and it is shown in white color on a black background. Since it does not match my project color scheme, I am wondering if there is a way to change it easily. I do not know how work with javascript so is there easier options?

Thanks

Pinned Reply
Luciana Piazza

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 86 (Build 3.86.32028.0).

Included in this release is a new feature where you can customize the foreground and background colors of closed captions to complement your course design and maintain contrast accessibility.

All you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

Please let us know if you have any questions by reaching out to our Support Engineers directly.

Have a great day!

33 Replies
Joseph Jani

Hi Mona,

I'm not sure if this is what you're looking for. But you can change the color of the objects (captions included) by going to the design Tab and Select Colors > Create New Themes Color.

From the Custom Theme window. You can edit "Accent 1" to change the background color of the object and edit Text/Background - Light 1 to change the text color.

EDIT: I found the link below discussing how to edit closed caption bgcolor and text.

https://community.articulate.com/discussions/articulate-storyline/changing-the-colour-of-the-closed-captions-font-and-the-background

Refer to the javascript code shared by Knut Jackowski.

Or you may also share your .story file here and let's see what we can do to assist.

Hope this helps.

Thank you,
Joseph

Mona Ahmed

Hi Joseph,

Thank you for your reply.

I actually want to change the closed captions colors. It is black and white now and does not match my project theme.

I tried the option you suggested to change it from design tab but did not affect the captions. Also, I do not work with javascripts, which is basically what they are talking about in that discussion topic.

Do you think their is another option to change those colors? I attached a picture so that you understand which part I am talking about.

Thanks

Joseph Jani

HI Mona,

That is all the information I have regarding closed caption properties for now. But don't worry since a feature request has already been submitted to Articulate for more CC options to be available.

Another option we have is to share the file here and lets have the code added to it or you may reach out to the support team and see what other options we have. 

Thank you,
Joseph

Leslie McKerchie

Hey Mona,

Looks like Joseph covered your options pretty well here. 

We do have a feature request because users would like to Customize Closed Caption Font, Color, Size, and Placement.

I'm adding this thread to the discussion as we track user requests and so that we can update you here when we have an update to share.

I'm not too savvy with JavaScript either, but feel free to reach out in that thread if needed.

Ashley Terwilliger-Pollard

Hi Drew,

This discussion talks about changing the color on closed captions added into Storyline, but it sounds like you're looking to change the color of captions added during a screen recording process? You can change the color a screen recording caption, although it's on a slide by slide basis.

The feature request to adjust the closed caption color, placement, etc. is still with our team for review so no updates yet. As soon as we have more to share we'll update this discussion. 

Anne DeFelice

 I worked on this last year and made my captions white on dark grey with a rounded rectangle (see attached image). However, now I can't remember how I changed the color and shape!

I'd like to change it to a black  background and rectangle and so it matches standard television closed captions.

Does anyone have a suggestion?

Katie Riggio

Hi, Chirag!

I'm sorry that I don't have an update to share about customizing closed captions at this time.

We're closely tracking requests for this option and are continuing to target several accessibility improvements. We'll keep in touch with any news.

Let me know if there's anything else I can do. I'm happy to help!

📕 Related Resource: Articulate 360 Feature Roadmap
Joseph Swords

There are some work arounds if you're willing to go to the trouble of creating your own captions.  It's a little more tedious, but actually not too bad once you get it set up.  

- Put text boxes on your slides in whatever size, color, font, and position you like. 

- Synch to audio on timeline.

- Cover text boxes with a shape that blends in to background to hide them.

- Create a CC button that toggles a True/False Variable

- Use a combination of triggers for "on click of CC button" and "when timeline starts" that change the state of the covering shape from normal to hidden (and vice versa) conditional to the state of the CC Variable.  

- For example, to make captions "appear"  (Change state of "CC Cover Shape" to hidden, when user clicks "CC Button" , If "CC Variable" = True)

 

You may need to play around with it to get it to work like you want, and it's definitely not as easy as the standard caption tool, but it is an option...  

 

Dwayne Schamp

In my experience with accessibility, CC's should always be white on black. This is for commonality with 99.9% of the CC that already exists and is in use around the world. It also adds very distinct contrast for those who might have both vision and hearing issues. The white/black combo is the best color combo for viewing even in bright sun. The option for sizing could be looked at, and is one aspect that is in use in several areas (newer TVs for example.) But playing around with the color to match a theme, isn't something the end user who NEEDS to use the CC option would be happy with. 

HTH