3 Essential Graphic Design Tips for Clear and Accessible Health Communication

Prepared by Samuel Mendez

Summary

As health communicators, we know style matters just as much as substance. You can have clear writing, but still push people away with a difficult layout. Use these 3 tips to make your content more inviting and easier to use:

1. Use high-contrast combinations of text and background colors.
2. Use streamlined graphics to illustrate advice & instructions.
3. Use white space to separate paragraphs, sections, and embedded content.

Read on to see these tips in action.

Tip 1: Use high-contrast combinations of text and background colors

Not all people see colors the same way. Additionally, people’s screens often display colors differently, and content often looks different if printed or screenshotted. To give everyone the best chance to see your content properly:

• Use high-contrast combinations of text and background colors
• To do this: use the Color Contrast Checker from WebAIM to measure the contrast ratio between your colors. The ratio should be at least 7:1.

Examples of high- and low-contrast color combinations

The tables below show what different contrast ratios can look like. They show that you can’t rely on using one person’s vision to decide if two colors have enough contrast. For example, if you can see subtle differences between shades of red and green, you might not have a problem with some of the low-contrast color combos. However, if you are less sensitive to differences between red and green, it might be difficult to see some of the examples.

Learn how to use high-contrast color combos

Use the following resources to better understand color contrast for accessibility and how to use colors together:

• Contrast and Color Accessibility overview from WebAIM
• Coolor’s contrast checker

Tip 2: Use streamlined graphics to illustrate advice & instructions.

Photos can help grab someone’s attention. They can also help set the right mood for your content. But they can also contain lots of distracting details, depending on the goal of your content. To keep your content clear:

• Use line drawings or simple graphics to help focus attention on the important parts of an illustration.
• Don’t just use silhouettes to depict people. Include faces with at least eyes, nose, and a mouth.
• Use realistic details, like someone sneezing, as opposed to abstract details like a box of tissues to represent sneezing.

Example of a streamlined graphic

The illustrations below come from instructions for at-home COVID tests. The cartoon illustration removes distracting details that might make it hard to see the swab. It also makes the nose transparent, for a better idea of how far a nasal swab should go. There might be clearer ways to illustrate the intended motion of the swab, but the arrows will be helpful for many audience members.

Contrast this with the photo below. The swab is much harder to see against the white wall. It is impossible to see how far inside the person’s nostril the swab is once it’s inserted. Instead, this photo shows the moment before the swab is used. There might be ways to improve this photo if you were to retake it. But this kind of fine-tuning is more feasible with an illustrator than with a photographer and models.

Learn more about clear and accessible illustrations

Use these assessments to help judge whether your illustrations are clear and accessible to a wide audience:

• How to Develop Products for Adults with Intellectual and Developmental Disabilities and Extreme Low Literacy from the CDC

Tip 3: Use white space to separate paragraphs, sections, and embedded content.

Content is easier to navigate when:

• The sections are clearly separated from each other.
• The content on a page isn’t distracting or overwhelming.
• Links and buttons aren’t too close to each other.
• It isn’t too long.

Increasing white space while cutting down on the amount of info you share can help make your content easier to read and more inviting.

Examples of effective white space

Look at the CDC’s page:  “Healthy Living After Cancer” as an example. This page is a good example because:

• It has a line height of 1.5, leaving space between each line of text.
• Paragraphs have extra margin space at the bottom, separating them from each other. So do figures and embedded videos.
• Caption boxes have padding to separate the text from the edges of other content.
• Headings also have extra margin space to separate them from other text.

The content takes up more space, but it looks manageable for our audience.

Contrast this with an edit of the same webpage below. This version is more difficult to navigate because:

• The line height is 1.
• Paragraphs do not have any margin space between them.
• Headings, photos, and embedded media don’t have extra padding around them either.

This is an extreme example of trying to fit a lot of content into a small space. While it might take less time to scroll through this content, it’s more overwhelming. It’s also harder to skim and to read.

Learn more best practices with white space in web pages

• Use White Spacing from the Web Accessibility Initiative

Conclusion

This tipsheet offers advice on using graphic design for more usable, accessible health communication:

• Use high-contrast color combinations to make your text easier to read.
• Use streamlined graphics to make instructions easier to follow.
• Use white space to make your content more inviting and usable.

This tipsheet is part of a series on clear communication. It bridges knowledge from health literacy, web accessibility, and journalism to help you elevate your health communication. Combine your clear design with clearer writing and accessible graphs and tables for even more impact.

This tipsheet was prepared by Samuel R. Mendez. It was reviewed by Amanda Yarnell and Elissa Scherer.