Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Web Accessibility

Quick tips that everyone can use to make their websites and pages more accessible.

Color & Contrast

Federal regulations require a contrast ratio of at least 4.5:1 for normal text under 18px, and 3:1 for headlines that are 18px and larger. This ensures your text is legible for individuals with color-blindness or low-vision as well as bright screens or monitors with poor color rendering.

In most cases, the university websites and social media platforms take care of this for you. When you have an option to change the font color or background color, use a contrast checker first. 

DO: DON'T:
  • Use color alone for emphasis. Use color plus bold text, italics, or a larger font size to help your text stand out. 
  • Use underlines plus color for emphasis - underlines typically denote a hyperlink, and can cause confusion when they're not clickable.
  • Rely on the color pickers in Word or Google Docs. Only about a third of the colors available have enough contrast to be used with white or black text.

Beware the color picker!

Both Microsoft Office's and Google Docs' color pickers provide around 70 colors, but only a third provide sufficient contrast at the font-sizes most often used in websites or documents. 

If you want to use a color for your text, these are the default options that provide enough contrast on a white background:

Colors in Microsoft Office Color Picker: Accessible Colors:

Grid of 70 color tiles available in the Microsoft Office color picker

70 colors available

Grid showing the 26 colors out of 70 that are accessible for text on a white background.

26 usable for text on a white background

 

Need better options?

The following tools let you build accessible color palettes without having to guess at hex codes: