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. 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
  • Colour Contrast Chrome plugin/website
  • Adobe Color contrast checker
  • EightShapes contrast grid - Our favorite tool for checking contrast across an entire color palette at once.
• WAVE evaluation tool - We use this Chrome plugin for checking website accessibility.
• Colorblindly - This Chrome plug-in simulates different types of color blindness in your browser.
• 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 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.

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.

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 to create charts like the one above and to ensure our color combinations are readable for folks with color blindness and other visual impairments. 

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.

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.

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.

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.

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 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.