Color and Meaning
Using Color in Canvas
Basics of Color & Accessibility
Most of us design content visually. Color is one way to spruce things up and can sometimes be used to make certain headings, words, or text stand out on the page.However, color should not serve as the only indicator of emphasis or meaning. Learners who are blind, low-vision, or colorblind will not have equitable access to this method of indicating meaning because they likely cannot differentiate between the content you are trying to emphasize or highlight and the rest of the content on the page if color alone is used.
Examples
- Using text highlighting to indicate the required fields in forms
- Directing students to "Pay special attention to the learning concepts in blue"
- Sharing a pie chart graphic sectioned by color
Accessibility guidelines are clear that when designing materials, color alone should not be used to indicate meaning, but this does not mean your course must be drab and use no color in order to meet accessibility standards! It is okay to use color as a part of design where it does not convey specific meaning. You can also use it to convey meaning as long as that meaning is indicated in some other way as well (italics, bold, a symbol, etc.). This page offers some recommended ways to supplement color with other formatting so that these cues benefit all students.
Font Color & Background
It is tempting to adjust the font color to make information beautiful, or for emphasis when something is really, really, important, but too much formatting for emphasis often has the opposite effect.
Color attracts attention (which is good if the information is important), but too much color is distracting (even if just subliminally) creating a busy page with many places crying for attention. Combine this with the cognitive and visual differences that create a wide range of abilities to perceive and filter colors, and this can introduce problems unnecessarily. If points are not getting across, adding lots of emphasis is not the best design approach to help students catch what is important. It may be time to review the content to see if it can be chunked, shortened, or organized in ways that support better comprehension. For the adventurous, consider providing the most important content in video or graphical formats that can support the main takeaways.
Use colored text sparingly and in ways that support a consistent design.
Color/Formatting Combos to Express Meaning
One way to supplement color is to use other common formatting that makes text stand out: bold, italics, or underlining. Tools in the Rich Content Editor (RCE) allow font to easily be modified with these options. As with color, other formatting used for emphasis should be used sparingly, whether used with color or alone.
A Few Formatting Rules: Bold, Italics, Underlining
- Use bold and/or italics for emphasis.
- Apply these sparingly. Too much bold and/or italics will lose its effectiveness. Overuse trains students to ignore this formatting. In addition, excessive formatting may disrupt the application of personal styles that some assistive technologies allow students to create, such as increased text size or special formatting.
- Avoid underlining (unless it's a hyperlink).
- In web design, underlines mean hyperlinks. Traditionally these are also blue in color, but for someone who cannot easily see the color, underlines are often the cue for a link.
- Canvas "high contrast" settings automatically underline links contained in text fields for those who may have difficulty seeing the links based on color alone.
- Headings can use bold and/or color so long as heading styles also help students with vision limitations identify and navigate headings. See guidance on the Headings in Canvas page for more info.)
Formatting Rules: Font Sizing
- Canvas lets you change font sizes but as a rule, don't use font size for emphasis. Fun fact about web-based text: font size is relative. Zooming and screen settings allow font size to be controlled. The user has options and will determine the font size most comfortable for them. Changing the font size of headings or paragraph text adds time-consuming steps to maintain consistency but doesn't add much in the way of better emphasis.
- So, why even include font size on the toolbar, you ask? You can make some text larger- in context - than the rest of the text on the page, for emphasis.
Color Contrast
Changing colors for text and background (highlighting) in Canvas is done using the Text Color and Background Color icons in the Rich Content Editor.
If you stick to the darkest colors on a white background you're always within the guidelines.
It is discouraged to use large blocks of light text against a black/dark background. It tires the eye quickly and can produce a shimmering effect that's hard to read. However this can be very nice for headings.
Color Checking in Cidi Labs
Cidi Labs Design tools have multiple color contrast aids and checking built in. Here are four pages in Cidi Labs help that explain how to manage color in Banners, use the Basic and Intermediate Color tools, and customize the color palette. Color tools will automatically adjust the text color to black or white to achieve the best color contrast with the selected background.