Changing the colour of the closed captions font and the background?

Hi everyone,

I work at a human rights organization that strives for maximum accessibility in all our products. I've led us to adopting the Described Media and Captioning Program (DCMP) standards for closed captions. The DCMP has studied this topic for over 12 years, and I want to contribute a word of caution to all those thinking of deviating from white text on a black background. The DCMP recommends a translucent box. Here's what I do to have Storyline 360 display captions as close to those guidelines as possible. In order to create captions to their specs in the first place, I use a free open source tool called Subtitle Edit, which automates to the best of its ability, the process of breaking lines at sentence endings and conjunctions, constraining display time, and other recommendations geared at making educational tools most accessible to those with too-often-overlooked cognitive disabilities. 

Once I settled on some CSS code I learned where to place it in file templates located within the Program Files(x86) folder on my Windows system. When I started doing this it seemed only necessary to edit one file, but they seem to have separated mobile and desktop defaults since, yet the original file still exists, so I edit 3. I settled on a slightly smaller font for mobile, and the additional file made that easier than ever (thanks Articulate! My discovery I can do this was in fact a big reason we're with you now, after 8 years with you-can-probably-guess-who).  

The three files I edit, using Notepad++ launched with Administrator privileges:

1. C:\Program Files (x86)\Articulate\360\Storyline\Content\dark-spider\unified\html5\lib\stylesheets\main.min.css 
2. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\desktop.min.css
3. C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets\mobile.min.css

The full CSS for files 1 and 2:

.caption p{background:rgba(72,72,72,0.81);color:white;display:inline-block;pointer-events:none;padding:10px;text-align:left !important;text-decoration:none;text-shadow:black 0 0 3px;font-family:"Open Sans",Calibri,Arial,Helvetica,sans-serif;font-size:28px;border-radius:4px;margin:0 0 10px 0;padding:10px;line-height:1.18;}

I always use px unit for font size nowadays, and the only change to the above for file 3 is

font-size:21px;

I only need to repeat this when Articulate pushes out an update that overwrites those files, in my experience most but not all. Notepad++ retains files that were opened and lets you know if they've been changed. It also retains search/replace history. I don't know if Articulate makes other CSS changes, so I resist the option of saving the old file and do a search/replace every time. the code to search for is:

.caption p{display:inline-block;pointer-events:none;padding:10px;text-shadow:-1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;color:#ffffff;border-radius:4px;background:#31373a;margin:0 0 10px 0;padding:10px;text-align:center;line-height:1.5}

I'm going to leave it there now... but as for so many of us the COVID experience is reorganizing our priorities—after a long hiatus I'm determined to start blogging again. This never-completely-forgotten thread—and all of you—have just decided what my first new post will be. I think you've just read most of the text, but I think a screen recording and more information about Subtitle Edit are in order as well.

Give me a day or two for all that.   And be well!