Accessible fonts, color, and alt text for visual images are very important and must be factored into the design of your content. The information on this page will help ensure your text and images are accessible to all users.

Quick Links

How To Choose Accessible Fonts

These fonts are recommended because they are most likely to be accessible to all users. Combine a sans-serif font with a serif font in your document or website to create a more appealing design.

ACCEPTABLE FONT TYPES

Sans-serif

Sans-serif fonts are recommended because they have a slightly higher readability than serif fonts. Their appearance is more block-like and less decorative than serif fonts.

Serif

In serif fonts, the tops and bottoms of the letters contain decorative edges called “serifs,” which some say bear a resemblance to little feet. There are many accessible serif fonts, but in general, some are slightly less readable because they contain those decorative elements that sans-serif fonts do not.

OTHER FACTORS TO CONSIDER

Good accessible font types have a certain level of legibility, including good height, width, and thickness. Font availability is also very important. Ideally, it’s best to use a font that is fairly popular and available to most users. Fonts on the “Highly Recommended” list are considered among the highest-rated with regard to readability, legibility, and availability.

Fonts on the “Other Acceptable Accessible Fonts” list are accessible and acceptable, but may be slightly less readable, legible, and/or available for some users.

HIGHLY RECOMMENDED FONTS

OTHER ACCEPTABLE ACCESSIBLE FONTS

How to Check for Color contrast

WHAT WILL BE LEARNED?

Learn to detect problematic color contrast and make adjustments to improve color contrast to the required 4:5:1 ratio for text and 3:1 ratio for images.

WHY IS IT IMPORTANT?

Adequate color contrast enables learners to process visual information in text and images by distinguishing items from one another. Good color contrast reduces cognitive strain and confusion and makes designs easier to understand. Poor color contrast can make text hard or impossible to read.

WHO BENEFITS?

Appropriate color contrast helps everyone, and it especially supports people who have low vision, color blindness, visual stress, dyslexia, presbyopia (changes to vision that normally accompany aging), and other conditions

Checking for Color Contrast: How-To Guide

Use a color picker tool to identify the hex codes (6 numbers or letters) of the text and background colors.

Recommended Tools:

black text reading "example text" on white background

Text hex code is #000000
Background hex code is #FFFFFF

pink text reading "example text" on yellow background

Text hex code is #D958EF
Background hex code is #FFFD72

Note

Font larger than 18pt (24px) requires a 3:1 ratio. Items exempt from color contrast standard:

  • Decorative images
  • Inactive buttons
  • Logos
Example of font larger than 18pt (24px)

BIG FONT

Decorative image example
decorative image horizontal line
Inactive button example
inactive submit button grayed out
Logo example
UNCG logo

Paste the color codes into a contrast checker tool.

Recommended tools:

Example of Passed Contrast Check

screenshot from webaim.org showing black text on white background passes at a 21.00:1 ratio

Example of Failed Contrast Check

screenshot from webaim.org showing pink text on yellow background fails at a 2.96:1 ratio

If color contrast meets standards of 4:5:1 for text and 3:1 for images, you’re all set!

If color contrast fails standards, change the colors to meet standards.

The next sections show how to change colors in Microsoft Office programs and Adobe Acrobat PDFs.

Microsoft Office Colors

The Microsoft Office Accessibility Checker does not check for color contrast.

Change text colors, and highlight colors and page color using the icons in the toolbar.

Icons for text and highlighting
highlight and text color icons for Microsoft office
Icon for page background
icon for page color to select page background color
Color options
Microsoft Office color options available to select

Adobe Acrobat PDF Colors

Color contrast needs a manual check even with Adobe Accessibility Checker.

If text color contrast is poor, under Tools, select Accessibility, then Adobe Acrobat Accessibility Setup Assistant. Check “Use high contrast colors for document text.”

Adobe Accessibility Setup Assistant screenshot showing high color contrast not checked

If this does not fix contrast issues, edit the document in its original format, such as Word.

Accessibility standards require that color never be used as the only visual means of conveying information.

Use a second form of emphasis such as bolding text, adding an icon or message, or other techniques.

  • The Color section of Getting Started with Accessibility provides additional information on alternative ways to emphasize text.

Example #1 from WebAIM.org

The first image relies on color only to show an assignment is missing or late. This is inaccessible to a blind student as well as confusing to a sighted student.

Adding a column explains the purpose of the color, as shown in the second image.

spreadsheet uses red and yellow colors but doesn't specify what they mean
first column shows red and yellow in list of assignments and second column explains that means missing or late assignments and no color means complete

Example #2 from WebAIM.org

Use an icon or additional message as shown in the second image instead of using only red.

form field with red outline is a poor use of color
form field with alert icon and "email address required" message in addition to red outline

How to Create Alt Text

DESCRIPTION

In this How-To, users will learn how to create alt text for images in PowerPoint and Google Slides. PowerPoint and Google have many features built-in that help people with different abilities to read and author documents and presentations. In this short set of slides, learn how to check images and graphics in your slides, making sure they are designed for all students and users of your course content.

WHAT WILL BE LEARNED?

Participants will learn how to create alternate text (also known as alt text) to describe images.

WHY IS IT IMPORTANT?

This is an important skill to know because we often have slides and presentations in our online courses, and knowing they are fully accessible is needed for all student success.

WHO BENEFITS?

This benefits students who are differently abled (specifically those with visual impairments) but also benefits all students through universal design.

Creating Alt Text for Images: How-To Guide

What Is Alt Text?

Alt text (i.e., alternative text) is the text equivalent of the image. It’s particularly important for presentations and documents in an online course or website viewed with a screen reader. Alt text describes the image to the user.

The Alternative Text section of Getting Started with Accessibility guide has more information on how to create alt text for different types of images.

PowerPoint: How-To Guide

Open a PowerPoint presentation that has images in it. You can add in alt text for images two different ways.

Select Picture Tools. Then select Alt Text.

picture tools and alt text for adding alt text to an image in PowerPoint

Microsoft PowerPoint will open a screen to add 1–2 sentences for alt text on the right side of the screen. If the image is simply decorative, define or describe it as such.

options for adding alt text when you right click on an image in MS PowerPoint

Right click on the image.

Click on Edit Alt Text.

The same screen will pop up on the right side of screen.

Good news! Adding alt text for other MS Office products (Word, Excel, etc.) is done exactly as it’s done in PowerPoint.

Google Slides: How-To Guide

Open a Google Slides presentation with images.

Right click on image. Options will pop up.

Google Slides right click to access alt text feature

Click on Alt Text. A window will open. Type in 1–2 sentences describing the image.

Googles Slides alt text box to enter short description

More good news! Adding alt text for other Google products (Docs, Sheets, etc.) is done exactly as it’s done in Google Slides.

WordPress: How-To Guide

Option 1: From Media Library

You can add alt text when you select items from your Media Library. You can do this as you’re uploading an item to the Media Library, or for items already saved in the Media Library.

Go to Media Library and select your image.

selecting an image from WordPress media library

When you select your image, the Attachment Details box appears on the right side of your screen.

Enter your short description in the Alt Text field.

attachment details box showing location of alt text field

Select the Insert into Page button located at the bottom of the Attachment Details box.

attachment details box showing location of insert into page button
Option 2: For Previously Inserted Items

You can also add alt text to items that have already been inserted on your page.

Select your image. A formatting box of icons will appear just above your image—click the Edit icon.

formatting box with Edit icon

The Image Details box will appear after clicking the Edit button. Enter your description in the Alternative Text field (located under the Caption field).

alternative text field in the image details box

Click the Update button.

update button at bottom right of screen

What if You Have a Complex Image?

Are Your Images Accessible?

Have you gone through the listed steps in this how-to guide?

Have you adequately described each of your images as explained in the Alternative Text section of Getting Started with Accessibility?

Have you typed in alt text for all of your images?

If the answer is “yes” to each of the above questions, then your images should be accessible and ready to use in an online class setting or webpage.