Contrast and color play an important part in whether your design will meet accessibility standards. Sure, you want to choose colors for your design that look good together and create visual interest, but you also want to make sure that readers with visual impairments or disabilities can see and understand your design.

Learn more about best practices for using color contrast in this article:

How do I pick the right colors?
Which tools in the Venngage Editor can help me adjust contrast?
What do the color contrast ("AA", "AAA") mean?

How do I pick the right colors?

When choosing colors for your design, you want to make sure they

Complement each other
Tell a visual story that connects with your data
Use colors that contrast enough to ensure accessibility

Check out our Accessible Color Palette Generator, which includes contrast ratio scores for black and white text to get started. There are plenty of other resources online, including basic color wheels like the one below, as well as ones that show monochromatic, analogous, complementary and contrasting colors:

A set of three color wheels. The first, labelled "Primary", shows the colors red, blue, and yellow in their respective positions on the wheel. The second wheel, labelled "Secondary", shows the colors purple, orange and green. The third wheel, "Tertiary", shows the colors magenta, vermillion, amber, chartreuse, teal and violet.

How do I create designs with accessible contrast?

Contrast is determined by the brightness or vibrancy of a color or element when compared to another element.

Black text on a white background is high-contrast. That same text on a white background is much harder to see if it's a lighter color, like yellow, making it low-contrast.

Two samples of text on a white background; each says "Example text" in the same font face, size and weight. On the left, the text is black and easy to read. On the right, the text is a light yellow and difficult to see against the white background.

Low-contrast elements can be hard to see, and low-contrast text can be hard to read. A high contrast ratio ensures that text is readable and that non-text elements are perceivable.

Readers with visibility impairment will have an especially hard time reading or seeing low-contrast elements, but it affects the readability for others, too.

Tips for creating contrast

Use dark colors on a light background, or light colors on dark background
Use solid patterns in the background, to make any elements layered over it more visible
Run Venngage's Accessibility Checker to check for contrast ratios and see suggestions

Which tools in the Venngage Editor can help me adjust contrast?

Available on the following Venngage subscription plans: Premium, Business and Enterprise.

Venngage's Accessibility Checker is the quickest way to check contrast ratios in your design and see how to adjust them to make them clearer.

Click "File" above the top toolbar, then select "Check Accessibility" to open the Accessibility panel.

Elements in your design that don't meet Web Content Accessibility Guidelines (WCAG) contrast requirements are listed under the "Color Contrast" header.

The right-panel view of Venngage's Accessibility Checker, with the "Color Contrast" section uncollapsed. Text in the design (not pictured) is highlighted as having insufficient color contrast, and a refresh button to re-scan the document when the user has edited the colors to adjust the contrast.

Select an individual element in your design, like an icon or text box, to see whether it meets contrast requirements.

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 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.

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. 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.

Start designing!

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

Use color contrast to create accessible design