What is color contrast?

Color Contrast

What is color contrast?

Not everyone perceives colors in the same way. Some users may have visual impairments or color vision deficiencies, such as red-green color blindness. If the contrast between text and background is too low, content can become difficult or even impossible to read.

SlideSync uses accessible color contrasts by default, so if you keep the standard settings, no further action is needed. But if you adjust text or background colors, or request custom color profiles, make sure to review the contrasts using available checking tools.

Tools to Check Color Contrast

Check the final result with WAVE Checker

• Install the WAVE extension for Chrome, Firefox, or Edge
• Open the participant preview page and click on the WAVE icon next to the browser’s address bar
• Alternatively, right click anywhere on the page and choose “WAVE this page”
• The results will highlight any color contrast or accessibility issues directly on the page

Check contrasts in advance with the WebAIM Contrast Checker

• Enter your text and background colors as hex codes or RGB values
• The tool checks if the chosen color combination meets WCAG contrast standards
• Use this to test new colors before applying them, e.g. when trying a lighter blue for a countdown box, you can confirm if it has enough contrast or if the text color also needs adjustment

How to check color contrast with WAVE

After installing the Chrome extension, open the participant preview page and right-click somewhere to see a menu where you select “WAVE this page”.

A sidebar will open with a summary, and the final tab called "Contrast" is especially important.

If the page has no contrast errors, it will say “Contrast Errors 0”. You’ll also see this in the contrast info box.

If the text colors in your description don’t meet contrast guidelines, WAVE will show a warning in the preview. When you click on an error, the affected text will be highlighted in red on the page.

Both changes fail to meet contrast guidelines which WAVE detects in the preview. By clicking on an error, the issue will be outlined in red directly on the page.

This helps you spot issues early and adjust your description colors until the contrast is correct.

Checking color contrast in advance

Before sending custom designs to support, it’s best to check them first. Use the Contrast Checker and keep in mind how the text color will look against its background. For instance, if you choose a lighter blue for the countdown box, make sure the contrast works or adjust the text color if needed.

If you test the color beforehand, you’ll immediately see whether the contrast is acceptable:

You can then adjust the brightness step by step until the WCAG AA labels turn green, indicating it passes. In most cases, meeting WCAG AA is sufficient; AAA compliance is not required: