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.



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.


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.


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.



How to Check for Color contrast


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.


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.


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


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)


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 showing black text on white background passes at a 21.00:1 ratio

Example of Failed Contrast Check

screenshot from 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

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

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


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.


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


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.


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 Format. Then select Alt Text.

picture format 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

Select Add Block and click the Image option. If no Image option appears, simply type “image” into the search bar.

WordPress block options drop down menu

You can upload an image from your computer, add one from your site’s media library, or add one using an external URL.

Select your image. A block formatting menu will appear on the right side of the page.

UNCG logo

Enter your description in the Alternative Text field (located in the Settings section of your block formatting menu).

Alternative Text field with the description "UNCG logo"

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.