Selecting Accessible Font Sizes and Colors

Objective

Using Headings

What is it?

Headings and Subheadings in Canvas provide an outline of the page content or assignments. In Microsoft products, the headings (called styles) create an outline for the document, or create the outline for the PowerPoint. 

PRO TIP: Generally, the layout of a page and assignment should be simple, clean, and uncluttered; using headers helps to make it clear for students. Navigation should be clear and consistent throughout the course. When adding information, keep content organized and chunked together in short paragraphs so users can scan your content easily.


Why do it?

Using Headings and Styles allows students who are using a screenreader to easily navigate the content and can see how the course is structured. Headings and Subheadings allow students to easily find the information they are looking for.

 

Using Color

What is it?

When it comes to using color in an online class, it is ideal to use it in sparingly and in meaningful ways. No more than 3 colors should be used in a course; colors used should be consistent and have purpose (not just for decoration). In addition, make sure there is a 4.5:1 contrast between the background and the foreground (words).

Refrain From using

  • color erratically because it is distracting and confusing
  • bright, neon colors (even in images)
  • red/green, blue/yellow yellow/white color combinations

Why do it?

Poor color contrast examples for colorblindness

Using color sparingly and meaningful ways can improve the learning experience of your student. Students who are colorblind, may experience the course differently based on the colors being used. For example, in the image to the right, individuals who are colorblind would not be able to see the numbers within the mosaic tiles; they would only see the circles as mosaic tiles. If the numbers were important to the learning experience, students would miss out on the information, or would not see it as being important (depending on the circumstance)

Users

  • Faculty
  • Staff

Steps

Using Headings

Headings should be used consistently throughout courses and documents to make everything clear and easy to understand. Headings and subheadings should be used when a new topic is being talked about. Examples of headings to use in different areas of the course include:

  • Assignment categories (overview of assignment, task/directions, grading, formatting/submission directions, examples)
  • Discussion categories (overview of discussion, task/directions, post and peer reply expectations, submission directions, grading, examples)
  • Content pages to divide up readings, videos, and additional resources.
  • Syllabus topics to divide up basic course information, course policies, grading policy and details, campus policies and student resources.
  • Home page (welcome introduction, how to get started, instructor information)
  • Overview pages (introduction to content, module objectives, to do list)

Adding Styles in Microsoft Word


Adding Headings Canvas

Headings should always include descriptive section headings. Section headings allow for a quick scan of the content for sighted and non-sighted users and make your course content more accessible for screen readers. You can find headers by clicking on "paragraph" in the tool bar above the text box (see image below). It is important when using headers that you don't skip header sizes. If you start with Heading 3, you would then use Heading 4 as the sub-header.


Adding Horizontal Lines

Consider adding horizontal lines to break up the different sections and headings. You can do this my going to insert, and selecting "horizontal line" (see image below)

 

Using Color

The resources listed below are great tools to help ensure your course is accessible color-wise. Always remember to use the Canvas Accessibility Checker, in addition to adding the Browser Extensions below to check course or website content.

Websites to Use

The websites and browser extensions below are great tools to help ensure there is a high enough color contrast and to check if there are accessibility issues on your course pages.