What Is the Contrast Checker Tool in Siteimprove Accessibility for Designers?

Answer

Type or pick a foreground and background color pair, and the checker shows the live WCAG contrast ratio and whether it passes AA and AAA. It can pull colors straight from a selected layer and suggest an accessible color when a pair fails.

Overview

The Contrast Checker is an interactive tool available from the Home screen of the Siteimprove Accessibility for Designers. Unlike an accessibility check that scans a frame, the Contrast Checker takes user-selected colors and evaluates their contrast against WCAG requirements.

What the Contrast Checker Does

Type or pick a foreground and background color pair, and the checker shows the live WCAG contrast ratio and whether it passes AA and AAA.

It can:

• Pull colors straight from a selected layer
• Show the live WCAG contrast ratio
• Indicate whether the color combination passes AA and AAA requirements
• Suggest an accessible color when a pair fails

Why It Matters

Color contrast plays a critical role in readability and accessibility. The Contrast Checker helps designers evaluate color combinations during the design process and identify combinations that may not meet WCAG requirements before development begins.

Key Takeaways

• The Contrast Checker evaluates foreground and background color pairs.
• It displays the live WCAG contrast ratio.
• It identifies whether color combinations pass AA and AAA requirements.
• Colors can be pulled directly from a selected layer.
• The tool can suggest an accessible color when a contrast pair fails.