- |
- ·
An infographic is a design that explains data or a process visually, combining text and graphics in a single composition. Its purpose is not decoration but letting a reader reach in seconds a conclusion that would take minutes to extract from a table. And the answer to how you make one, as of 2026, is not a tool name; it is a production chain running from source selection through chart type, accessibility thresholds and file format.
Most content on the subject opens by repeating a handful of statistics with no source. Instead, this guide covers verified findings from the visual perception literature, the numeric thresholds in accessibility standards, the production traps you will hit in practice, and the 2026 academic study that measured AI-generated infographics. Our graphic design guide covers the discipline as a whole; the focus here is the data side of information design.
What Is an Infographic?
An infographic, literally an information graphic, has two components: the information to be carried and the visual encoding that carries it. The length of a bar, the position of a dot or the size of an area represents a numeric value, while titles, labels and captions help the reader decode it correctly.
The difference from data visualization is one of scope. Data visualization turns a single dataset into a chart. An infographic combines several charts, text, icons and flow elements around a narrative. Every infographic may contain data visualization, but not every data visualization is an infographic.
One sentence separates a good infographic from a bad one: does the reader look at the design and understand the data, or notice the design? When it is the latter, the composition has got in the way of its own job.
Are Images Really Processed 60,000 Times Faster Than Text?
No, and the claim has no scientific basis at all.
The most repeated sentence in the field is that the human brain processes visuals 60,000 times faster than text. The PolicyViz investigation that traced the figure found the earliest known written source to be a 1997 presentation brochure from 3M, where the number appears without a citation. Doug Vogel, author of the Minnesota and 3M study frequently credited for it, has stated that his research had nothing to do with visual processing speed and concerned persuasive impact instead.
Visual perception is genuinely fast, but the scientific finding says something different. In a 2014 study by Potter and colleagues, participants could detect a named target image even in sequences shown at 13 milliseconds each, and MIT's summary of the same work reports it plainly. Note carefully: the finding is a recognition speed, it contains no comparison with text, and it cannot be converted into a multiplier.
The practical conclusion is that the case for infographics rests not on an invented factor but on comparison judgements imposing less cognitive load in visual encoding than in reading numbers. The case is already strong enough without exaggeration. Putting an uncited statistic at the centre of your infographic undermines the very credibility you are trying to demonstrate.
Types of Infographic and When Each Fits
Choosing a type is a content decision, not an aesthetic one. The structure of what you are explaining determines the type.
- Statistical: foregrounds numeric findings with charts at its centre. Suits survey results and market data.
- Timeline: tells a sequence of events. Used for company history, regulatory processes or product roadmaps.
- Process or flow: shows work advancing step by step, such as application procedures and technical flows.
- Comparison: places two or more options side by side against the same criteria.
- Geographic: shows the spatial distribution of data, the natural choice for regional figures.
- Hierarchy and anatomy: opens up the parts or layers of a structure, as in org charts and product cutaways.
- List: the weakest type, because it contains no visual encoding. Choose it only when the readability of a text list is genuinely the problem.
The common mistake is forcing data into a preselected type. Squeezing a series that changes over time into a comparison table stops the reader from seeing the actual pattern.
Which Data Suits Which Chart?
Chart choice is not a matter of preference; there is a measured accuracy ranking. Cleveland and McGill's 1984 study experimentally measured how accurately people read visual encodings and produced this order:
- Position along a common scale (most accurate)
- Position along non-aligned scales
- Length, direction and angle
- Area
- Volume and curvature
- Shading and colour saturation (least accurate)
The same study reported position judgements to be roughly 1.4 to 2.5 times more accurate than length and about twice as accurate as angle. The practical implication is clear: if you can show the same data as either a bar chart or a pie chart, the bar reads more accurately, because bars use position and length while pies use angle and area.
Working rules:
- Bar charts for comparisons between categories.
- Line charts for change over time.
- Scatter plots for the relationship between two variables.
- Pie charts for parts of a whole only with two or three slices; beyond that a stacked bar reads better.
- Use colour saturation for a secondary layer, never to carry the primary numeric message.
Deceptive Chart Traps: Truncated and Inverted Axes
A chart can carry accurate data and still deliver a false message. Pandey and colleagues' CHI 2015 study tested distortions such as truncated and inverted y-axes with 330 participants and measured two effects: message exaggeration and message reversal. Both effects were large, meaning reader perception can be steered substantially by design decisions.
The traps you will meet most often:
- Truncated y-axis: in a bar chart, an axis that does not start at zero makes small differences look dramatic. Because bar length asserts a proportion, the zero baseline is mandatory. Line charts need not always start at zero, since a line encodes change rather than proportion, but the axis range must still be labelled explicitly.
- Inverted axis: a layout where values decrease upward breaks the reader's orientation.
- Irregular intervals: drawing unequal time steps as though they were equal distorts the trend.
- Two-dimensional scaling: applying a value to both the width and the height of an icon shows a twofold difference as fourfold.
- Cherry-picked time range: showing only the part of a series that supports the desired trend is the easiest way to tell a false story with technically accurate data.
Visual Hierarchy, Data-Ink Ratio and the Place of Decoration
In his 1983 work, Edward Tufte defined the data-ink ratio as the proportion of a graphic's total ink that carries data, and coined the term chartjunk for visual load carrying none. The prescription is clear: remove unnecessary gridlines, shadows, three-dimensional effects and decorative frames.
Presenting only that side would be incomplete. Bateman and colleagues' CHI 2010 study compared heavily embellished charts with plain ones and produced two findings: accuracy in reading values did not deteriorate with embellishment, and recall after two to three weeks was significantly better. Decoration is not harmful under all conditions.
The approach that reconciles both findings: keep the area that encodes data clean and build character around the composition. Adding texture inside a bar hurts reading; a strong illustration in the same infographic's title area improves recall. Visual hierarchy follows the same logic: the reader should see the headline finding first, supporting charts second and the source credit last. On typography, keep at least two steps of scale difference; an ambiguous gap between heading and label destroys hierarchy. Our typography guide goes deeper.
Accessibility: Contrast, Colour Blindness and Non-Colour Cues
Accessibility is not a preference but a standard with defined numeric thresholds, and infographics are the most neglected part of the field.
WCAG 2.2's success criterion 1.4.3 requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text at level AA. Large text means 18 point, or 14 point bold, roughly 24 and 18.5 pixels. Graphical objects have their own criterion: 1.4.11 requires graphical objects and interface components to hold at least 3:1 against adjacent colours. Every line in a chart falls within scope, so a pale blue line over a light grey grid breaks the rule.
A third criterion is more fundamental still. Criterion 1.4.1 states that colour must not be the only visual means of conveying information, indicating an action or distinguishing an element. Any chart whose legend consists solely of colour swatches violates it.
The two most-skipped criteria collide directly with what an infographic is. Criterion 1.4.5, Images of Text, requires at level AA that information be conveyed with real text rather than an image of text wherever the technology in use can achieve the same visual presentation; the defined exceptions are images the user can visually customise and presentations that are essential to the information, with logotypes named as essential. An infographic whose entire text lives in pixels is precisely the case described. The second is 1.4.10 Reflow, which asks that content be presentable at a width equivalent to 320 CSS pixels without scrolling in two dimensions. There is good news. Parts requiring two-dimensional layout for meaning, maps and diagrams among them, sit outside the scope, so the infographic itself is exempt. Exemption does not remove the need for a text equivalent: repeat the headline findings as real text on the page and add an HTML table for any complex dataset.
The scale is not small either. According to the US National Eye Institute, about 1 in 12 men has colour vision deficiency, and the most common form makes red and green hard to tell apart. The classic red-green good-bad encoding carries no information at all for a meaningful share of your audience.
What to do: reinforce series distinctions with line patterns, marker shapes or direct labels in addition to colour, use a safe pair such as blue and orange rather than red and green, keep the palette to three to five colours, and test readability by converting the design to greyscale. For the wider framework see our web accessibility guide, and for colour selection our piece on colour meanings.
Localisation Traps: Typography, Numbers and Label Length
Working in a language other than English exposes errors that English templates produce silently, and most go unnoticed until publication.
Font coverage: characters specific to Turkish such as ğ, Ğ, ş, Ş, ı and İ sit in the Latin Extended-A Unicode block, while ç, ö and ü sit in Latin-1 Supplement. If your chosen font does not support Latin Extended, headings collapse into empty boxes or question marks. Font selection is a concrete production step and must be tested first. See our font choice guide for selection criteria.
Uppercase conversion: automatic uppercase breaks the dotted and dotless i distinction. Under an English locale "İstanbul" becomes "ISTANBUL" and loses its dot, and reverse conversions produce further errors. Write headings by hand rather than leaving them to automatic transformation.
Number and date format: in Turkish the thousands separator is a period and the decimal separator a comma, so 1.250,5 is correct. Datawrapper, Flourish and Canva default to English formatting, and a chart produced without adjusting localisation reads back inverted. Dates should follow DD.MM.YYYY, and when two currencies appear together the exchange rate date belongs in the credit line.
Label length: agglutinative languages produce labels longer than their English equivalents. In ready-made English layouts, label boxes overflow, so the design grid must be resized around the local text. Define an abbreviation glossary for axis labels from the outset.
How to Make an Infographic, Step by Step
- Fix a single message. Write the one sentence the reader should retain. If you cannot write it, the data has not yet become a story.
- Take data from primary sources. For Turkey-focused content, the TurkStat data portal, central bank series, regulator publications and sector authorities are primary. Record the publication period and update calendar for each series, since revisions are common.
- Clean and verify. Check that totals reach 100 percent, that units are consistent and that period comparisons rest on the same methodology.
- Pick the chart type from the data. Use the perceptual accuracy ranking above as your reference.
- Sketch the layout on paper. Building the arrangement by hand before opening a tool catches layout errors at their cheapest point.
- Set the visual system. Limit the palette to three to five colours and typography to two families and three steps.
- Run accessibility checks. Measure contrast ratios, run the greyscale test, add non-colour distinctions.
- Write the source credit. Institution, data period, access date and a direct link where available.
- Export and optimise. See the format and file size section below.
- Prepare the HTML equivalent. Alt text, surrounding copy and a data table where needed.
Infographic Tools: Which One Suits Whom
Tool choice depends on your skill level and where the output is going.
Template-based editors. Canva offers the fastest start with ready layouts and suits teams without a design background. The cost is that ready layouts are not distinctive and overflow with longer localised labels.
Chart-focused tools. Datawrapper gives unlimited charts and PNG downloads on its free plan with mandatory attribution, while PDF and SVG export sit behind the Pro plan at 21 dollars per user per month. Flourish offers unlimited projects and its full template range for free, keeping unpublished projects private while published content is public with attribution. The strength of both is that their charts are correctly encoded by default.
Professional design software. Illustrator and Figma give full control and vector output. The learning curve is steep, but full compliance with a brand system is only possible there. For alternatives see our design programs comparison.
For icons and supporting imagery, use sources with clear licensing; options are in our free stock image sites piece.
Making Infographics With AI: The 2026 Picture
The infographic quality of image generation models was measured in 2026, and the result is striking.
In the study When AI Lies with Charts, presented at AVI 2026, 100 infographics were generated across 20 thematic categories with a current image generation model, and 99 of them contained at least one misleading element. The recurring patterns were fabricated data, inconsistent visual encoding, chart types that did not match the data, missing or broken charts, and misleading framing.
What the finding means in practice is not that AI cannot be used for infographics, but that it cannot be trusted at the data layer. Models genuinely accelerate layout, composition suggestions, icon generation and draft copy. Publishing the numbers themselves, the axis scales and the chart type choice without human verification is where the risk sits. A workable division of labour: produce data and charts in a proper charting tool and use AI on layout and visual elements. For tool options see our piece on AI image generation tools.
Size, Format and Page Speed
Infographics are usually the largest image on a page and turn directly into a performance problem. According to web.dev documentation, a good LCP value is 2.5 seconds or less measured at the 75th percentile, and both img elements and background images count as LCP candidates. The large infographic first visible on screen therefore determines your Core Web Vitals grade.
Format choice depends on content. For vector infographics dominated by text and flat areas, SVG is both crisp and small. For designs containing photographs or heavy gradients, WebP compresses better. PNG belongs only where transparency is required and WebP is unavailable, while JPEG is unsuitable because it degrades text edges.
| Format | Which infographic | The cost |
|---|---|---|
| SVG | Vector work dominated by text, bars and flat areas | Files swell unexpectedly once photographs or heavy gradients enter |
| WebP | Compositions containing photographs or gradients | Fine text edges soften at lossy settings |
| PNG | Transparency is required and WebP is unavailable | Noticeably larger than the WebP version of the same image |
| JPEG | Not suitable for infographics | Ringing artefacts on sharp edges and small type |
The mobile scaling arithmetic slips past most designs. An infographic 1000 pixels wide, fitted to a 360 pixel phone screen, shrinks by a factor of roughly 0.36. An axis label drawn at 14 pixels lands on screen at 5. Unreadable. The check is simple: multiply your label and credit-line sizes by the ratio of design width to screen width, and if the result falls below 12 pixels the fix is not one step of larger type but splitting the infographic into vertical sections or producing a separate mobile version.
What to do: write width and height attributes on the image to prevent layout shift, lazy-load infographics below the fold, serve multiple sizes through srcset, and consider splitting tall vertical infographics into sections. For measurement see our Core Web Vitals guide, and for the theory behind the format decision our vector versus pixel comparison.
SEO and Distribution: Alt Text, Embed Codes and Channels
There are two realities on the SEO side of infographics, and both run counter to common belief.
First, a search engine does not read the text inside your image for you. An infographic with no text equivalent on the page stays largely invisible however valuable the information inside it. Google's own documentation describes alt text as the most important metadata for an image, recommends placing images near relevant text and notes that a descriptive filename provides a mild signal. The correct approach: write the infographic's key findings as text on the page as well, keep alt text descriptive, and provide an HTML table equivalent for complex datasets. Alt text should be a sentence describing what the image conveys, not the word "infographic" or a list of keywords.
Second, harvesting links in bulk through embed codes is now a source of risk. Google's spam policies count keyword-rich, hidden or low-quality links embedded in widgets distributed across sites as an example of link spam. Offering an embed code is not prohibited, but placing a followed link with exact-match keyword anchor inside that code is precisely what the policy describes. The safe route is keeping the attribution link plain and qualifying it where appropriate with rel values; Google's defined values are sponsored, ugc and nofollow, and marked links are generally not followed.
On distribution, LinkedIn document posts and image posts on X deliver the fastest reach. Pinterest generates long-tail traffic through visual search, and the platform's own specification recommends a 2:3 ratio, or 1000x1500 pixels, for a standard Pin, noting that images taller than 2:3 may be cropped in the feed. The highest-return method remains pitching directly to sector newsletters and data journalism outlets, which brings citations far faster than waiting on embed codes.
Pre-Publication Checklist
Pre-publication review runs across five layers: data accuracy, perceptual accuracy, accessibility, localisation and performance. If a single question in any layer goes unanswered, the infographic is not ready to publish. Walk the list below before you export the file.
- Is there a single core message, and does the title state it?
- Does the credit line carry the primary source, data period and access date for every figure?
- Do bar charts start their y-axis at zero, and are axis ranges labelled?
- Does the chart type match the structure of the data, and do pie charts stay within three slices?
- Does text clear 4.5:1 and do graphical objects clear 3:1?
- Has colour been removed as the sole carrier of information, and has the greyscale test been run?
- Does the font support every local character, and is case conversion correct?
- Does the number format match the target locale?
- Has file size been optimised, and are width and height attributes present?
- Is the alt text descriptive, and do the key findings also appear as text on the page?
- If AI was used, has every number and every axis been verified by hand?
Run the list against your own most recent infographic; the items that trip people up are usually the zero baseline, non-colour cues and mobile type size. If you would rather have a data story designed from scratch, or your existing infographics reviewed for accessibility and page speed, see our graphic design services.
Frequently Asked Questions
Quick answers for readers who skipped to the end.




