Color Contrast for Player Accessibility
Color Contrast:
Web Content Accessibility Guidelines (WCAG) 2.1 define how to make content more accessible to people with disabilities.
According to the WCAG, for contrast conformity at the mid-range level (AA), the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, except for large-scale text and images of large-scale text, which should have a contrast ratio of at least 3:1.
For contrast conformity at the highest level (AAA), the visual presentation of text and images of text must have a contrast ratio of at least 7:1, except for large-scale text and images of large-scale text, which should have a contrast ratio of at least 4.5:1.
To read more about these guidelines, click here.
In the ScreenPal hosting platform, our color pickers provide helpful information about contrast. You'll see these color pickers throughout our site and settings, including:
- On the Interaction Tools tab under Interactive Buttons and Links for annotation buttons and call to action buttons
- Player Branding controls under the video preview within Video Settings
- Within Settings > Content Hosting > Player Color
The button text and player controls will automatically change to white (on darker backgrounds) and to black (on lighter or brighter backgrounds. For example:
To the right of the color picker, you will see the contrast ratio for your chosen color:
Some of our color pickers, such as the those for call to action and annotation buttons, also offer transparency options.
Note: The contrast ratio displayed is calculated based on 100% of the color without any transparency.