Infographic Design: Types, Layout and Accessibility

Two cartoon people beside a bar chart, a pie chart and a line graph under the word INFOGRAPHIC

What makes a good infographic design

A good infographic makes one idea easier to understand than plain text would. It has a clear question or story, accurate data with sources, a layout that guides the eye in order, and visuals that show the relationship between facts instead of decorating them. It also works for everyone, which means readable contrast and a text version of the information.

This guide covers how to plan an infographic, choose the right type, design it so people read it, make it accessible and share it on the web and in print. Pros Inc designs infographics, charts and other marketing graphics for small businesses from our office in San Diego, and this is the process we follow. Accessibility guidance comes from the W3C Web Accessibility Initiative, checked as of October 2026.

Start with the story

Before you pick colors or icons, decide what the infographic needs to say.

Write the main point in one sentence. For example, “Our five-step process takes a project from idea to install.”
Know the audience. Customers, staff, investors and journalists need different levels of detail.
Collect only the facts that support the point. More numbers do not make an infographic more convincing.
Note the source for every number. Put sources on the infographic itself, usually in small type at the bottom.

Never round up, estimate or borrow a figure you cannot trace. A good-looking chart with a wrong number does more damage than no chart.

Choose the right type of infographic

Three panels showing a bar chart, a colored list and a numbered four-step process, with two people — Statistical, list and process infographics suit different stories.

Type	Best for	Example
Process or timeline	Steps or events in order	How an order is made, a company history
Comparison	Two or more options side by side	Service tiers, before and after
Statistical	A few key numbers	Survey results, annual figures
List	Tips or features	A checklist, top reasons
Map or location	Where things are	Service areas, store locations

Pick the type that matches the story. If you are explaining a sequence, a timeline will work better than a set of unrelated charts.

Design the layout

Guide the eye

Most people scan from top to bottom and from left to right. Put the title and main point at the top, then arrange sections in the order you want them read. Number the steps in a process. Use lines, arrows or consistent spacing to show what belongs together.

Use a grid and consistent spacing

A simple grid keeps sections aligned and makes the graphic feel organized. Keep the same spacing between sections and the same style for every heading.

Show data honestly

Start bar chart axes at zero so bars are not exaggerated.
Use the same scale when you compare numbers.
Label values directly where you can, instead of making readers match a legend.
Avoid 3D effects, which distort sizes.

Limit fonts, colors and icons

Use your brand fonts and colors, with one or two accent colors to highlight the key numbers. Choose one icon style and use it throughout. Every visual element should help explain something; if it does not, remove it.

Make your infographic accessible

A dark tile with large Aa letters beside a text document and an eye icon, with two people — Check text contrast and give every infographic a text version.

An infographic is usually a single image, which means people who use screen readers cannot read the text inside it unless you provide it another way.

Provide a short and a long description

The W3C Web Accessibility Initiative treats charts, diagrams and similar graphics as complex images. Its complex images tutorial says these need a two-part text alternative: a short description in the alt text that identifies the image, and a long description that contains the essential information. The long description can sit on the same page, such as the text right below the graphic, and the W3C suggests making it available to everyone.

In practice, publish the infographic on a page with a heading and the same facts written out as text or a table. That also helps people who prefer reading and helps search engines understand the page.

Check contrast

WCAG 2.2 success criterion 1.4.3 sets a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and the criterion applies to images of text as well as live text. Charts and icons are covered by a separate criterion for non-text contrast. Use a contrast checker on your text and background colors before you finish the design.

Do not rely on color alone

Add labels, patterns or direct values so the chart still makes sense to someone who cannot tell two colors apart. For more on accessible design across a whole site, see our guide to website accessibility.

Sizes and file formats

There is no single standard infographic size. Design for where it will appear:

A blog or web page: a tall vertical layout that fits the content column, exported as a compressed WebP, PNG or JPEG.
Social media: a square or vertical version with less text, or a series of slides with one point each.
Print: set the document to the final print size with bleed, use 300 DPI images and CMYK color, and export a print-quality PDF. Our commercial printing guidelines cover working with a print shop.

Keep the original vector file so you can update numbers and create new sizes later. Our guide to logo file formats explains the difference between vector and raster files.

Infographic design process, step by step

Write the main point and the audience.
Gather facts and record a source for each one.
Choose the infographic type and sketch the layout on paper.
Write all of the text before designing, then cut it down.
Design in your brand style with a simple grid.
Check every number against its source.
Check contrast and write the alt text and long description.
Export versions for the web, social media and print.

Infographics as part of your brand

An infographic that uses your colors, fonts and icon style is instantly recognizable when it is shared. Keep those rules in a brand style guide so every graphic looks like it came from the same business, and reuse your best ones in email newsletters and presentations.

Frequently asked questions

What is an infographic?

An infographic is a graphic that combines short text, numbers and visuals such as charts, icons or timelines to explain one idea quickly. Common types are process, comparison, statistical, list and map infographics.

What size should an infographic be?

There is no single standard size. Use a tall vertical layout that fits your web page’s content column, a square or vertical version for social media, and the final print size with bleed for print.

How do I make an infographic accessible?

Give it short alt text that identifies the graphic, then provide a long description with the same information as text or a table on the page. Check that text meets a 4.5:1 contrast ratio, or 3:1 for large text, and do not use color as the only way to show meaning.

How much text should an infographic have?

Only as much as it takes to explain the main point. Write all the text first, then cut it so each section has a short heading and one or two lines.

Should I cite sources on an infographic?

Yes. List the source for every number, usually in small type at the bottom. It builds trust and lets readers check the facts.

What file format is best for an infographic?

For the web, a compressed WebP, PNG or JPEG. For print, a high-resolution PDF. Keep the original vector file so you can edit it later.

Get help with your infographics

A clear infographic can explain your process, your results or your services in seconds. If you need infographics or other marketing graphics designed to match your brand, contact Pros Inc at 715 J St #200, San Diego, CA 92101, or call (858) 652-8920.