Infographic Do’s:

Show, Don’t Tell

• Aim to have your infographic be more visual than textual
• Consider ways that your information can be represented visually (icons, graphs, charts, tables, timelines, etc)

Create a Hierarchy

• Play with colors, shapes and sizes to establish hierarchy
• Visually establish your main message (e.g. with larger text or shapes), then include your secondary message in a way that doesn’t overpower

Use Color Wisely

• Color can be used to set the mood of your infographic because people associate certain colors with ideas or feelings (green for the environment, etc)
• Stick to 3-5 colors (not counting black & white) – any more than 5 and it starts to look messy

Use Blank Space

• Blank space allows the reader to process information and prevents the brain from simply moving from one thing to another
• If there’s no blank space, you’re putting too much info in the infographic

Infographic Don’t’s:

Rely on Text to Tell the Story

• Your images should do the talking in an infographic
• If you need to rely heavily on text, then it’s not the right kind of information for an infographic

Choose Inappropriate Visuals

• Make sure your graphics make sense – at best, it’s confusing, at worst, it’s deliberately misleading
• If you want to use a pie-chart, your data needs to add up to 100%!

Use Color Poorly

• Make sure to use high contrast colors so your text is legible
• Avoid using certain color pairings such as red/green or blue/purple because it’s difficult for people who are colorblind to differentiate between the two.

Cover Every Inch of Space

• Infographics are supposed to be simple – your reader shouldn’t do extra work to figure out what you’re trying to say
• If there’s too much information, the reader won’t be able to focus on anything

Increasing Accessibility in Infographics

• Flyers & Infographics Accessibility

California State University Northridge's Universal Design Center has created this helpful guide on accessibility considerations for infographics.

• Alternative Text - WebAIM

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

Find High Contrast Colors For Accessibility

• Color Safe

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, and it will give you recommendations of what color your font should be.

• Level Access Color Contrast Checker

The color contrast checker will determine if colors you are already using for background and text are WCAG compliant. Enter a foreground and background color to see if it your font color choice meets accessibility standards.

Finding Matching Color Schemes

• Adobe Color

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.

• Coolors

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.