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.

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

There are plenty of resources to help you get started with choosing colors for your design, including basic color wheels like the one below, as well as ones that show monochromatic, analogous, complementary and contrasting colors:

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.

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?

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.

Select "File" from the top navigation menu (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.

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

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

Start designing!