---
title: "Accessibility tips for visual content: Guidelines for copywriting, design, & publishing"
date: 2026-05-14T14:00:00-05:00
author: Nick Lorang
canonical_url: "https://www.lemonly.com/blog/accessibility-tips-for-visual-content"
section: Blog Posts
---
![Accessibility tips for visual content: Guidelines for copywriting, design, & publishing](https://d2xoo2expjpog9.cloudfront.net/generalUploads/Blog/260513_Lemonly_AccessibilityTips_Thumbnail-Nick_1920x850.png?mode=crop&pos=center-center&w=55&h=40&c=4b08c717&v=952cd3dd0677adf792daaecd96d9eb152c328fc272ab9ba59d48af766f718318) #  Accessibility tips for visual content: Guidelines for copywriting, design, & publishing

 

  [![](/assets/images/icons/back-to.svg)](https://www.lemonly.com/blog) Creating stellar visual content is no easy feat, so why share it with only part of your potential audience? Great design should be enjoyed by as many people as possible. If you’re not designing with accessibility in mind, you’re missing out on the chance to reach more people with your message.

When you’re creating content, it’s important to keep in mind that people use the web in different ways — screen readers, voice recognition tools, and other assistive tech all make a big difference in how people view your work. If your content isn’t optimized for accessibility, it might as well be invisible for these users.

But here’s the cool thing: Prioritizing accessibility doesn’t just increase your work’s visibility; it makes it better. The same best practices that apply to content writing, design, and publishing also enhance accessibility.

**Check out the video below to dive into accessibility tips and best practices for content writing, design, and publishing.**

 

## Accessibility guidelines & tools

Across the board, we aim for Level AA compliance with the latest version of [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/). We have a few favorite resources for helping us make sure we’re adhering to those standards:

- Color contrast tools:
    - [Contrast macOS menu bar app](https://usecontrast.com/)
    - [Colour Contrast Chrome plugin/website](https://colourcontrast.cc/)
    - [Adobe Color contrast checker](https://color.adobe.com/create/color-contrast-analyzer)
    - [EightShapes contrast grid](https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp) - Our favorite tool for checking contrast across an entire color palette at once.
- [WAVE evaluation tool](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?pli=1) - We use this Chrome plugin for checking website accessibility.
- [Colorblindly](https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?hl=en) - This Chrome plug-in simulates different types of color blindness in your browser.
- [Accessibility checklist](https://webflow.com/accessibility/checklist) (Webflow) - We love this accessibility checklist from Webflow (so much that we used it as a reference when putting together our own). It’s written with the Webflow platform in mind, but the principles are universal to many types of digital and web design.

There are lots of resources out there, and we've also developed a number of internal resources and trainings we use with our team. Do some research to explore what resources and tools would be a great fit for your team.

## Why accessibility matters

Before we dive into some tips and best practices, let’s talk about why accessibility matters when creating visual content. For us, it comes down to two goals: **inclusion** and **excellence**.

### Inclusion: Making content that reflects the world around us

Did you know that as many as one in six people has a significant disability? People with disabilities and assistive technology users are important audiences that shouldn’t be left behind when it comes to great content.

Many people use assistive technologies, including screen readers, special controllers, voice recognition, and more. So designing for accessibility means we can create content that includes more people in its potential audience. The way we see it, accessibility is the right thing to do *and* the smart thing to do.

### Excellence: Doing the best work, for us and for our clients

Our second goal is excellence. We want to make the best work possible. It just so happens that there’s a lot of overlap between accessibility best practices and general design best practices… along with SEO *and* web content best practices.

Accessibility is also important to our clients. They expect us to deliver great work that achieves their goals, and creating accessible content represents our clients well, positions them as leaders, and allows them to reach a broader audience. Everybody wins.

## Best practices for writing accessible content

If you’ve ever written copy for visual content, you’ve likely heard of the three Cs for effective writing: clear, concise, and compelling. These are crucial for producing great content, and they’re also great for accessibility. Clarity and concision make your writing more accessible and readable to all audiences, and compelling ideas tend to follow.

When it comes to accessible content writing at Lemonly, we focus on clarity and content hierarchy.

### Clarity

How do you make your content clear to as many people as possible? We’re so glad you asked.

#### 1. Write in plain language. 

Skip the niche slang and advanced vocab in favor of simple, straightforward language that gets your message across. Avoid industry jargon when possible, or provide definitions when you do need to use advanced terminology. Plain language doesn’t mean dumbing down your ideas. Your writing can be conceptually sophisticated while using accessible vocabulary.

#### 2. Aim for an approachable reading level. 

We typically recommend a reading level of around 8th grade or lower. Apps like [Hemingway](https://hemingwayapp.com/) can gauge your content’s reading level and even offer tips to improve it. In general, adjusting for a lower reading level means using shorter sentences and paragraphs. Writing in active voice and with a conversational tone help, too.

#### 3. Use contextual links. 

When writing text hyperlinks or clickable CTAs, make your link text unique and descriptive. Assistive technologies like screen readers can display a list of all the links on a page. If you have a bunch of links that say “Click here” or “Learn more,” the user has no idea what each link does. Instead, try “Read the blog post” to make your link clearer and more specific.

### Hierarchy

A clear, consistent hierarchy improves the quality of your writing by ensuring you have a logical organization and makes your content more accessible to people using screen readers. It’s even helpful for SEO since web crawlers can more easily understand well-organized content — that’s a win-win-win.

#### 1. Establish consistent heading styles. 

Wherever your content will live — whether it’s a document, web page, infographic, or report — you should establish heading styles and apply them instead of manually styling text.

You can have up to six heading levels, H1 through H6. Each page should have a single H1 — that’s the page title (or your infographic title). After the page title, the next heading should be an H2. Use additional heading levels to nest content hierarchically throughout the page — think of it like an outline from your speech or English class.

Remember: Heading levels should always be used in order. That means an H3 always follows an H2; don’t skip from H1 to H3 or from H2 to H4 just to achieve a particular look.

   Heading Hierarchy Diagram       

Correct heading structure

 

 H1 Accessibility guide 

 H2 Why it matters 

 H3 Impact on users 

 

 H3 Legal requirements 

 

 

 

 H2 Best practices 

 H3 Writing clear content 

 H4 Using plain language 

 

 

 

 

 

 

 

 

 

 

 

   

Incorrect heading structure

 

  H1 Accessibility guide 

  H3 Why it matters Skipped H2 

  H5 Impact on users Skipped H4 

 

 

 

 H2 Best practices Out of order 

 

 

 

  H1 Contact us Only one H1 per page 

 

 

 

 

 

 

 

  

#### 2. Write descriptive headings. 

For example: “How ice cream is made” is a descriptive heading. “Time for a treat” doesn’t set up the content as effectively. In general, clarity is better than cleverness when it comes to headings, but it doesn’t hurt if you can do both at once.

Good headings should be clear, descriptive, and consistent across the page. Assume that most users will skim at least some parts of your content. Descriptive headings clearly present your key points, grab readers’ attention, and make your content easy to navigate so users can get the gist even if they don’t read every word.

## Best practices for designing accessible content

Typography, color, and character design are all important considerations when designing content for diverse audiences, including those accessing the web in different ways.

### Typography

Typography includes typefaces, text size, and spacing. Accessible typography is easy to read and flexible across a variety of text sizes and zoom levels.

#### 1. Choose a legible typeface.

For body text, use typefaces that are more conventional and easy to read. Expressive display fonts are great for short headlines — shoutout to Jokerman — but pair them with simpler fonts for body text.

When choosing a typeface, look out for character ambiguity. For example, in some typefaces, the capital “i,” lowercase “L,” and the number “1” are indistinguishable, which can be a challenge for readability. For weights, avoid ultra-thin or ultra-light weights, especially at small sizes — they become hard to read pretty quickly.

#### 2. Ensure your text size is readable.

For a static piece, like an infographic or social media microcontent, test on both desktop and mobile to make sure text is readable on different screen sizes.

#### 3. Use adequate text spacing.

When text feels crowded, lines are too long, or chunks of text aren’t distinguishable from each other, it’s easy for readers to get confused or lose their place. Line spacing, paragraph spacing, and letter spacing are all important. Try using line spacing around 1.5 times the font size and paragraph spacing around 2 times the font size. When in doubt, give text more breathing room.

### Color

Color is a crucial part of design, but it can create barriers for users with colorblindness or low vision, so it should be used thoughtfully.

#### 1. Provide adequate color contrast.

Adequate contrast ensures text and other elements are easily distinguishable from their background.

- For normal text, you should have at least a 4.5-to-1 contrast ratio between the text and background color.
- For large text — meaning 24-pixel or 18-point regular text or 18-pixel or 14-point bold text — it’s a 3-to-1 contrast ratio.
- For icons and other user interface elements, the same 3-to-1 contrast ratio applies — but be sure to test all interactive elements where the default, active, focus, and hover states may each have different designs.

**Try our own contrast checker below to make sure you're using adequate color contrast in your designs.**

Color Contrast Checker   Colors

  Foreground (text)

  

 \#  

 

 Tints & shades

 

 

    Swap colors  

  Background

  

 \#  

 

 Tints & shades

 

 

 

 

 Brand presets (examples)

 

 

 Black on white  

 

 Teal on white  

 

 Black on yellow  

 

 Black on teal  

 

 

  Preview

Normal text

The quick brown fox jumps over the lazy dog.

 

Large text

The quick brown fox jumps over the lazy dog.

 

 

 

 Contrast ratio

 17.40 : 1 

 

 WCAG results

 AA Normal     Pass  

 Requires 4.5 : 1 

 AA Large     Pass  

 Requires 3 : 1 

 AAA Normal     Pass  

 Requires 7 : 1 

 AAA Large     Pass  

 Requires 4.5 : 1 

 

 

 

 

We also think about contrast at the brand level. When we’re working on branding and logo projects, we test the entire color palette and document approved color combinations for easy reference. You can do this for your own brand and identify if you have gaps where expanding your palette with additional high-contrast color combinations would be helpful.

Checking color contrast across a wide range of colors is easier than it looks, too. We use tools like the [EightShapes contrast grid](https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp) to create charts like the one above and to ensure our color combinations are readable for folks with color blindness and other visual impairments.

     ![Example contrast grid showing color contrast levels for each combination of colors within a brand's color palette](https://d2xoo2expjpog9.cloudfront.net/generalUploads/Blog/YouTube_07_Accessibility-Tips-for-Visual-Content_image1.png?mode=fit&pos=center-center&w=55&h=43&c=6c2643e4&v=9fe0192a0b6fe156030634a2842a52de07041fd6e385c73ceab3b37bcb0e6fbe)    Here's an example of a typical contrast grid we include when documenting a brand's visual style guidelines.

 

   

#### 2. Avoid using color as the sole differentiator between different visual elements.

Our next tip is about visual differentiation. Avoid using color as the only distinguishing factor between different elements or states — always include a secondary differentiator, like text, shape, pattern, icon, or position. Ask yourself: “If color is removed from this design, does it still make sense?” If not, add a secondary cue.

Data visualization is a great example here: When presenting two different variables in the same chart, color alone isn’t enough to differentiate between them. Add shape, pattern, or text to make elements easily distinguishable without color.

In the examples below, we used shape and pattern — in addition to color — to indicate which network aired which video game adaptation. Color is helpful, but you can still discern the meaning without color.

     ![Examples of data visualization showing use of secondary differentiators like shape and pattern in addition to color](https://d2xoo2expjpog9.cloudfront.net/generalUploads/Blog/260514_YouTube_07_Accessibility-Tips-for-Visual-Content_Examples-1.png?mode=fit&pos=center-center&w=55&h=43&c=7d5e57bc&v=fa9c42dacef1ae32757430bda42c3e098e6686fe62d2e4a05d87b68fa83e5f35)    These examples show a couple ways secondary differentiators like shape and pattern can be used along with color to make different elements distinguishable.

 

   

### Inclusive character design

Inclusivity goes hand-in-hand with accessibility, and one area where inclusive design especially matters is character illustration. Inclusive representation breaks down barriers to understanding by helping people see themselves reflected in your content.

Below are a few examples of character design using different styles. Throughout our work, we strive to illustrate characters with a variety of body types, skin tones, disabilities, ages, genders, racial and ethnic backgrounds, and more.

     ![Character illustration examples depicting a broad range of identities and backgrounds](https://d2xoo2expjpog9.cloudfront.net/generalUploads/Blog/260514_YouTube_07_Accessibility-Tips-for-Visual-Content_Examples-2.png?mode=fit&pos=center-center&w=55&h=43&c=2cf6c079&v=2d11c927dfb8b9847829bfc84e806ac43da92d2b966ee744525cce6a8b391b7c)    Here's a sample of what inclusive character illustration can look like, depicting characters with a broad range of identities.

 

   

When designing characters, go beyond boilerplate solutions for inclusivity and representation. For example, rather than just changing skin tones, be mindful of hair textures, hairstyles, and facial features when the illustration style leans more detailed. Another common example is overusing depictions of a generic manual wheelchair — consider that many daily wheelchair users have more custom or electric wheelchairs. There are lots of other ways to incorporate thoughtful details in your character design for more inclusive representation.

     ![Character illustration examples showing Black characters with different hairstyles and textures and a second illustration showing a wheelchair user with an electric wheelchair](https://d2xoo2expjpog9.cloudfront.net/generalUploads/Blog/260514_YouTube_07_Accessibility-Tips-for-Visual-Content_Examples-3.png?mode=fit&pos=center-center&w=55&h=43&c=61ca4740&v=b339f6e0487639605c8635084a91bd0b6ff1f9f566f94e9316d9354cc6bdad0c)   

Remember: No group of people is all the same, so no set of characters should be all the same, either.

We also work with clients to make sure we’re incorporating any key audiences or communities that are important to them. During the project kickoff and throughout the design phase, we check in to make sure our character design is inclusive, authentic, and representative of their goals.

Since we specialize in illustration, we’ve talked about inclusive character design through an illustration lens, but the same principles apply when selecting photography: Try to incorporate a broad range of identities that accurately reflects your audience and community. We know stock photography can be pretty limiting when trying to find specific representation, so if you’re struggling to find the right fit, consider custom character illustration as a great alternative.

**Accessibility in design is about making intentional choices. By thoughtfully considering the details of your design, you can make sure more people are able to enjoy your content.**

## Best practices for accessible publishing

Whatever type of content you’re creating, it’s going to be consumed digitally, so the way you publish your content online is integral to its accessibility.

### Infographics

The most important thing when publishing an infographic is to make sure the infographic text is accessible somewhere on the web page outside of the image. This matters because many infographics are images of text — meaning the text has been rasterized in an image file (like a JPG) or flattened in an SVG. That rasterized or flattened text isn’t machine-readable in the same way that live text on a web page is. So our goal is to make that text accessible on the web page — and that’s great for both accessibility and SEO.

There are different ways to do this depending on your website, your skills, and the type of infographic you have. In most cases, I recommend using what we call a “content sandwich”:

- It starts with some intro content before the infographic — this could be anything from a couple sentences to a few paragraphs that establish context and describe what the infographic is about. That’s the first part of your sandwich.
- Then comes the infographic, which is probably a JPG, an SVG, or even HTML. That’s the meat of your sandwich.
- After the infographic, include the full infographic text in an accordion. That way, the text is machine-readable and users can expand the full text if they want to, but your page design stays clean with your infographic as the main character.

Implementing a content sandwich and accessible infographic text outside of the image makes your web page friendlier to both assistive technology and web crawlers like search engines and LLMs.

   Content Sandwich Diagram     

 

  

 

 Accessible text  

 

 

 

 

 

Intro content

Set the scene before the visual

 A sentence or two establishing context. Live text — readable by screen readers, search engines, and AI.

 

 

 

Your visual

The infographic, chart, or video

 The main visual asset. May contain rasterized text or complex graphics that assistive technology can't read on its own. Needs the layers around it to be truly accessible.

 

 

 

Accessible text

Full content, expandable

 The visual's full content as live text — readable by everything, without cluttering the page design.

 

 

 

 

 

  

### Videos

The most important ingredient for video accessibility is captions. They make videos consumable for people with deafness or hearing impairments or any users who are scrolling with their sound off. Captions also make translating video content easy and scalable for reaching a global audience.

If you’re uploading video to a platform like YouTube or Vimeo, automatic captions might come built-in. But for the best quality and crawlability for SEO, we recommend uploading custom captions using an SRT file. Services like [Rev.com](http://rev.com/) make it cheap and easy to get perfect captions for your video.

When embedding a video on a web page, our “content sandwich” applies here as well:

- Start with some intro content that describes the video.
- Then comes the embedded video (with captions, of course).
- Include the video transcript in an accordion or as text on the page (hint: the page you're reading right now is an example of this)

Publishing with accessibility in mind means that the hard work you put in during content writing and design doesn’t go to waste. Optimizing for accessibility requires collaboration and attention to detail at each part of the process, so work with your team to make sure everyone has the knowledge, skills, and tools they need to make the best work possible.

## Accessibility is a team effort, from content and design to implementation

So that’s accessibility for visual content in a nutshell. We covered key principles and best practices across content writing, design, and publishing so your content can be enjoyed by as many people as possible.

Remember: Accessibility is a key consideration at every stage of your project. If you have questions about making your content more accessible, or if you’re looking for an agency partner to help guide you through it, we’d love to talk — just [drop us a note](https://www.lemonly.com/contact).

## Share

- [  ](http://www.facebook.com/sharer.php?u=https://www.lemonly.com/blog/accessibility-tips-for-visual-content&p%5Btitle%5D=Accessibility%20tips%20for%20visual%20content%3A%20Guidelines%20for%20copywriting%2C%20design%2C%20%26%20publishing)
- [  ](https://www.linkedin.com/shareArticle?mini=true&url=https://www.lemonly.com/blog/accessibility-tips-for-visual-content&title=Accessibility%20tips%20for%20visual%20content%3A%20Guidelines%20for%20copywriting%2C%20design%2C%20%26%20publishing)
- [  ](https://www.pinterest.com/pin/create/button/?url=https://www.lemonly.com/blog/accessibility-tips-for-visual-content&media=https://www.lemonly.com/general-uploads/Blog/260513_Lemonly_AccessibilityTips_Thumbnail-Nick_1920x850.png&description=Accessibility%20tips%20for%20visual%20content%3A%20Guidelines%20for%20copywriting%2C%20design%2C%20%26%20publishing)
- [  ](mailto:?body=Check%20this%20out!%20https://www.lemonly.com/blog/accessibility-tips-for-visual-content&subject=Accessibility%20tips%20for%20visual%20content:%20Guidelines%20for%20copywriting,%20design,%20&%20publishing)