Designing Infographics on the Web

Color Safe provides accessible color palettes based on WCAG Guidelines of text and background contrast ratios. Simply enter a background color, and determine the styling of your text.

The color contrast checker will determine if colors you are already using for background and text are WCAG compliant. Enter an RGB foreground and background color in #hex or integer format to see if it meets accessibility standards.

Because infographics are visual informational material, they are fundamentally not accessible to users with visual or cognitive disabilities. California State University Northridge's Universal Design Center has created this helpful guide on designing accessibility into inforgraphics.

WebAIM has created this helpful guide to explain how to create appropriate alternate text for visual content online.

Choose a color to start with, and the color palette generator will produce four additional colors that complement one another. Save the palette if you have an Adobe Creative Cloud account, or write down the hex codes to use with another tool. Adobe Color can also identify colors used in an image if you upload it under the "Extract Gradient" tab.

Use the generator to generate complementary color schemes for your infographic. The color blindness feature allows users to preview what the color selection will look like for people with various types of colorblindness.