Support Centre

Search

Test color combinations for Contrast Ratio scores

Renée Meloche
Renée Meloche
  • Updated

Use Venngage's Color Contrast Checker to determine whether the contrast between text and icons in the foreground and the background color is sufficient to meet Web Content Accessibility Guidelines.

A user inputs different background colors into Venngage's WCAG Color Contrast Checker tool. There are widgets for the user to adjust foreground/text color, background color, lightness of both, and a section underneath that displays updated information about Contrast Ratio and Compliance Results, relative to WCAG Color Contrast guidelines, including whether the combinations pass or fail WCAG standards for color contrast and visibility.

 

Input color HEX Codes in the fields under each widget to change the Foreground Color or Background Color in the right display panel. 

Use the Lightness sliders under each to adjust the exposure of the foreground and background colors.

Contrast level is part of what determines whether readers with visual impairment or other accessibility concerns can clearly perceive the content (visual elements like text, images, etc.) in your documents or on your website.

Under the Contrast Ratio heading, the ratio numbers will change to reflect the WCAG score of the foreground and background colors displayed in the preview pane on the right side. Find more details about each element under Compliance Results. 

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request