CHSS Online Teaching Initiative

Fonts, Colors, Images, and Background Images

Choose clear, legible fonts, such as Arial, Helvetica, Times New Roman, or Calibri, for the text in the documents uploaded to the course site and for course instruction areas and content folders. Arial and Helvetica fonts are easier for most people to read online, especially for people with vision problems. Make sure that font sizes are large enough to read comfortably.

Black text on a white or light background is the most legible as it supplies the highest contrast of text to background. Patterns and images placed behind text should be avoided in most cases as it makes content more difficult to read; color and/or pattern may be useful in banners or headlines but is distracting when overused. When used, color should be deployed strategically. The effective use of a color-coded system for different kinds of content requires giving students the key to the code and using the system consistently.

Some courses will require the use of images, sometimes extensively. When using images online, such as in instructions, assessments, or images banks, save them at a reasonable size and resolution (as .jpg) so that they will remain entirely visible on a computer screen without the necessity of using arrows to navigate the image. If pulling images from the Internet, select the largest, clearest image available and then decrease the size and/or resolution as necessary. It is a waste of time to try to increase the size or resolution of a small image pulled from the Internet. Instructors may consider keeping an archival-sized image on their computer and also making a smaller one for use in their class site.

See the W3C Web Accessibility Initiative website for designing content for the web. 

Visit Adobe Color interactive color wheel to preview potential color contrast options and find color blind safe options. This tool is free to use.