Color Contrast & Images

Color Contrast

Use of color should be limited, especially with text. Your safest bet is always black text on a white background. Colors must meet contrast ratio requirements. (There are free color contrast checkers available online if you must use color.) People with low vision or color blindness may not be able to read text on a colored background or even red or orange text on a white background may not meet contrast requirements.

Generally speaking, color contrast for text should be at least 4.5:1. There are some differences if the text is very large (contrast can be 3:1) or if the text is in a logo or is purely decoration. View WCAG Color Contrast success criteria.

Additionally, colors should never be the only way information is conveyed. (Different colored text or different colored lines should never be the only way to discern different information or datasets.)

Review our Design Standards for some tips on how to utilize Manatee County colors in a way that meets color contrast requirements.

Color Contrast Checkers 

Images & Charts

All images and charts should have alternative text. In Microsoft Office products, you can add “Alt Text” by right-clicking the image. (Select either Edit Alt Text or Format Picture and choose the Alt Text tab.)

Someone accessing the document with a screen reader will hear "Image: [Your alt text description.]" when the screen reader gets to that point in the document. Make sure your alt text gives a good description for why the image is there and what it represents. You do not need to include text like "A picture of..."

Some alt text tips:

  • Is the image important to the context of the document? Add a few words or sentence describing the image in the Alt Text box.
  • Is there text on the image? Add that text in the Alt Text box. If there is a lot of text in the image, it should also be in the body of the content. Images with a lot of text are strongly discouraged.
  • Is the image a chart? Describe the meaning the chart is conveying in the Alt Text box. (Ex: Chart shows rates have increased 10% from 2008 to 2018)
  • Is the image unimportant to the context of the document? Check the “Mark as decorative” box.