Is there anything worse than turning on the captions while watching a movie or TV show and not being able to see them? Or looking at a website and needing to squint to read the copy? Whether you’re just trying to watch something in a loud room or you genuinely need visual assistance to understand online content, on-screen text that you can’t see isn’t really any help at all.

On the other side of the screen, if you spend your talents and time making a video, website, or social channel, you want the widest possible audience to be able to understand and enjoy it, right? Choosing the right font color for your copy, captions, and subtitles can dramatically increase your project’s accessibility and broaden your audience. This is why choosing the right colors for text on screen makes a huge difference.

The Importance of Accessible Text

Accessibility is important for obvious reasons; you want the most possible people to be able to view and understand your project. But there’s actual data regarding accessibility, too.

The CDC states that 6.1% of U.S. adults are deaf or have serious difficulty hearing. They expand on that to say that 4.8% of U.S. adults have a vision disability with blindness or serious difficulty seeing even when wearing glasses. That means that more than one in ten people might have trouble engaging with your video content without the right color contrast.

If you want to be accessible to the widest range of people and avoid getting in trouble with the ADA, here are a few ways you can make your on-screen text pop. We’ll cover proper text colors, text background colors, the best color for subtitles, and more.

Web Accessibility Rules

While appealing to the broadest possible audience is your main goal, abiding by online digital accessibility rules and regulations can save you headaches and money.

Creating accessible content means that anyone can engage with and understand your content. Online accessibility in the U.S. is dictated by the Americans with Disabilities Act (ADA), though we have an ADA checklist to help you stay compliant. Just as such laws mandate that public spaces must be accessible to wheelchairs, they dictate that online content must be accessible to anyone, regardless of ability.

The ADA outlines some of the accessibility barriers to avoid:

1. Poor color contrast.
   1. People with limited vision or color blindness cannot read text if there is not enough contrast between the text and background (for example, light gray text on a light-colored background).
2. Use of color alone to give information.
   1. People who are color-blind may not have access to information when that information is conveyed using only color cues because they cannot distinguish certain colors from others. Also, screen readers do not tell the user the color of text on a screen, so a person who is blind would not be able to know that color is meant to convey certain information (for example, using red text alone to show which fields are required on a form).
3. Lack of text alternatives (“alt text”) on images.
   1. People who are blind (as well as screen readers) will not be able to understand the content and purpose of images, such as pictures, illustrations, and charts when no text alternative is provided.
4. No captions on videos.
   1. People with hearing disabilities may not be able to understand information communicated in a video if the video does not have captions.

If your website or video is deemed inaccessible to those with disabilities by the ADA, you could be required to redesign your website or face fines.

Best Color Combinations for Readability

Simply put, the best color combination for captions or subtitles is white on black. If your background is dark, choose white text with a thin, dark outline. Select a sans-serif font that’s not too bulky. This might seem like the “safe” option, and you’d be right. You aren’t necessarily going for a font aesthetic here; you want your captions and subtitles to be readable regardless of the background color. When in doubt, make sure that the font and outline contrast.

What Is the Best Color for Reading Text on Screen?

The best color for reading text on screen is a white font with a dark background. Yellow on a dark background is a good second option, as it rarely blends into the background colors. Don’t get too fancy with background color. Black or dark blue are the best choices.

Worst Subtitle Color Combinations

The worst subtitle color combinations for captions and subtitles are usually colors that conflict with one another, contrast-wise. Orange and green, pink and green, and red and blue are jarring and physically stressful to the eye. At the same time, colors that are too similar to each other should be avoided. Light blue on dark blue, yellow on green, and the like. You want your letters to stand out from the background, but you don’t want to strain the readers’ eyes.

Light text on a dark background — think dark mode on your phone — should also be avoided if you have a lot of text, because it causes eye strain. If you’re using it for headlines or cutlines on your website, they can work just fine, but for captions, subtitles, or long-form text, avoid this combo.

Avoid any sort of color gradient or texture, as well. When in doubt, keep it simple!

Other Web Colors to Consider

A general rule of thumb is that dark text on a light background is the way to go when choosing the best colors for web pages. The best color combinations for readability almost always fit into this category. Black text on white, dark blue text on white, even brown on white are good combinations for color captions or web copy.

Accessibility Tips To Make Your Content Stand Out

There’s more to readability and accessibility than font and background colors, however. Here are a few other things you can do to make sure your content is accessible to the widest possible audience:

• Insert alt text on your images. Alt text helps everyone understand what your images are trying to convey. (It also helps your SEO!)
• Add captions to your videos. Including captions ensures that any users with hearing impairments or who need support with English can experience video content in real time. Rev makes captioning your videos simple and affordable.
• Make your captions available in multiple languages. This expands accessibility to non-English-speaking users. Rev can help with translated subtitles, too!
• Don’t rely on auto-captioning features. Allowing a streaming service to choose how your captions look is usually a bad idea. If you want to ensure that you have good colors for text on streaming (or any other medium), customize them yourself and choose a permanent option like Rev’s “burned-in” captions.
• Pay attention to font size. For a 16:9 video, an 18-point font is the best option for font size. For more vertical formats, you want to be able to fit about 40 — 45 characters on the screen at once.
• Choose your font wisely. The best fonts for captions and subtitles are Lucida Grande, Arial, and STIXGeneral.

Onscreen Text That Sings

Whether you’re creating a website, a full-length film, or just some video for social media, you want your audience to be able to fully appreciate it. You also want your project to look good and be compliant with the law. Luckily, all these things go hand-in-hand. If you have any doubts about your video’s online accessibility, Rev captions and subtitles are built to help you meet compliance standards.

CAPTION YOUR CONTENT