Support Centre

Search

Checking the color contrast ratio

Renée Meloche
Renée Meloche
  • Updated

The Color Contrast ratio tells you whether users with visual impairments or other disabilities will be able to easily see and interpret the elements in your design. 

Click on the color menu in the top toolbar with the element selected.

A partial view of a canvas in the Venngage Editor (top left corner). A user clicks on the dark green icon of a book, over a navy blue header bar on a design canvas. When the icon is selected, its color menu appears in the top toolbar; the user clicks the color menu and brings up the color picking panel. At the bottom of the panel, the section header 'Contrast Ratio' appears, as well as the element label ('Graphics') and a contrast ratio value 1.8:1, which is identified as not meeting 'AA' accessibility requirements by a red 'x' icon.

 

At the bottom of the color menu panel, a section titled "Contrast Ratio" displays the contrast ratio of the element compared to its background.

A red "x" appears next to the element label (e.g., "Graphics", "Normal text", "Header", etc.) if the ratio doesn't meet accessibility requirements, and a green checkmark if it does.

A user clicks on the info icon (an 'i' in a circle) next to the 'Contrast Ratio' heading at the bottom of the color picker. A black info box appears. The box reads 'To achieve the WCAG 2.1 AA accessibility standards, make sure your designs meet the following color contrast thresholds: Normal text: 4:5:1; Large text (at least 19px and bold, or at least 24px and regular): 3:1; Meaningful graphics: 3:1.' A link at the bottom reads 'Learn more about color contrast'.

Click on the "info" icon next to the Contrast Ratio header for more details about what contrast ratio meets WCAG requirements.

A partial view of a canvas in the Venngage Editor (top left corner). An element is selected on the design canvas and the color picker menu is open, overlaying the partial view of the design. A user clicks into the color selector, which is set to a dark green (HEX 245561) and changes the color to a light blue (HEX 3AB3D2). At the bottom of the panel, under the section header 'Contrast Ratio', the element label 'Graphics' appears and a contrast ratio value. The contrast ratio value of the dark green color is set to '1.8:1', which is identified as not meeting 'AA' accessibility requirements by a red 'x' icon. When the user changes the color to the light blue, the contrast ratio value changes to 6.08:1, and the 'AA' accessibility score changes to meeting accessibility requirements, which is identified by a green checkmark icon.

Change the color of the element with the picker or by entering the HEX code value. The Contrast Ratio in the color panel will update automatically, along with the requirements checker.

What do the color contrast ("AA", "AAA") mean?

Venngage's Accessibility Checker grades color contrast according to WCAG requirements:

  • Level A is the minimum level.

  • Level AA includes all Level A and AA requirements.

    • This is the requirement that Venngage applies to evaluating all the elements in an accessible design created in the upgraded Editor.

    • Many organizations strive to meet Level AA; this is used as the baseline for the legally defined requirement of meeting accessibility standards.

  • Level AAA includes all Level A, AA, and AAA requirements, and meets the highest level of standard requirement.

 

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