The emotion meter in the player already meets the WCAG 2.0 AA color contrast level. If your organization needs the stricter AAA level, you can make the emotion meter colors darker with a short piece of CSS code. You paste it into Custom CSS in the Brand your simulation panel. The colors change in the whole simulation.
Add the AAA colors
In the editor, click the paintbrush icon in the left bar. The Brand your simulation panel opens.
Copy the code below and paste it into the Custom CSS field.
Check the result in Preview.
The Brand your simulation panel, opened with the highlighted paintbrush icon in the left bar. The Custom CSS field (empty) is highlighted, between Choose a theme and Font family. On the right is the player preview.
Code for WCAG AAA
.emotion.happy {
background-color: #136705;
}
.emotion.normal {
background-color: #456101;
}
.emotion.puzzled {
background-color: #7b4f04;
}
.emotion.unhappy {
background-color: #934107;
}
.emotion.angry {
background-color: #ad2010;
}
.emometer div.thumb {
background-image: linear-gradient(to left, #136705, #456101, #7b4f04, #934107, #ad2010);
}
The code keeps the green-to-red order of the emotion meter, but uses darker shades so the white text is easier to read.
Tip: to use these colors in other simulations, save your settings as a theme: type a name in Provide theme name and click Add to themes.