This topic is slightly more technical, but it will allow you to enhance your Canvas content in ways that might capture students’ attention better. This will require a little familiarity with HTML coding.
- If you don’t want to learn HTML coding, that’s OK! You can still use Canvas proficiently without learning HTML! You can ignore this page.
- If you’d like to learn HTML basics, we recommend that you start with this video. Start experimenting with the Canvas HTML editor a little at a time when you feel ready.
- If you are already an HTML expert, please note that Canvas does not support the full realm of all possible HTML tags. You can check out the current list of supported tags and attributes here.
How to HTML in Canvas
All Canvas tools that use the Rich Content Editor (RCE) allow you to edit the HTML code. To turn on the HTML editor, click the </> button located under the RCE window, at the right side. When you are done with the HTML editor, click that button again (still located in the same place) to return to the RCE. Don’t forget to save your work as normal.
HTML Colors
This week, we are explaining how to use Hex Codes to select colors for your Canvas content.
Hex Codes are a way to represent color using a hash mark (#) followed by a combination of 6 letters and/or numbers. Each code defines the amount of red, green, and blue light needed to display a particular color (RRGGBB). Values for each pair range from 00 (minimum intensity) to FF (full intensity). For example, pure red is represented by #FF0000 because the intensity of red light is at the maximum and green and blue light is at the minimum. Similarly, pure green is #00FF00 and pure blue is #0000FF. White is #FFFFFF and black is #000000.
UMass Dartmouth’s Branding Colors:
- UMassD Blue: #003764
- UMassD Gold: #FEC24D
How do you know what the hex code is for the color you want? Simple, you look it up! Here are a few favorites:
Important!
Even if a color palette is visually attractive, it won’t be appropriate for course content if it doesn’t meet accessibility requirements. In other words, the background color and the text color must have enough contrast for students with vision concerns to read it.
WCAG guidelines for accessibility require a contrast ratio of 4.5 or higher. You can check the contrast through the Yuja Panorama accessibility checker that is integrated into Canvas or you can use a site such as the Color Contrast Checker for Accessibility.
Code Snippet to Try
Add a background color in Canvas:
<div style=”background-color: #CCFFFF;”> Here is my text on a colorful background.</div>
To change the background of a whole page, place the opening <div> code at the top of the code editor, before any other content, and place the closing </div> code at the very end, after all other content.