Creating accessible color schemes for Canvas pages
A color scheme is a collection of colors, sometimes known as a color palette. When we incorporate color schemes into our Canvas courses, we can create interesting elements that are visually appealing to our students.
Canvas has very basic colors that are central around dark and light shades. These shades are important for consistency and accessibility (contrast), but when we use the default colors or reduce our content to text on a page, we miss opportunities to engage our students and personalize the course material in a way that is meaningful and interesting.
This video explores the science and practices behind web-based color schemes, how to create and implement color into your Canvas course, and how to ensure that our colors are accessible and appropriate.
For an example of an accessible color scheme on a Canvas page, refer to the sandbox page for this week’s webinar.
https://canvas.instructure.com/courses/2560052/pages/accessible-color-schemes-option-1
Grab the sample code below to begin creating your own colorful <div>s and <hr>s.
<div> example #1
<div class="border border-trbl border-round" style="float: right; max-width: 400px; width: 30%; background-color: #517673; padding: 10px; text-align: center; color: #eef6fc; font-size: large; margin-left: 15px; margin-bottom: 15px;"> <h3>Did you know</h3> <p>Succulents paleo pop-up mlkshk banjo salvia vice cold-pressed knausgaard schlitz helvetica normcore man braid la croix pinterest.</p> </div>
<div> example #2
<div class="border border-trbl border-round" style="width: 100%; background-color: #517673; padding: 10px; text-align: center; color: #eef6fc; font-size: large; margin: 10px 0px;"> <h3 style="text-align: center;">Putting it together</h3> <p>Succulents paleo pop-up mlkshk banjo salvia vice cold-pressed knausgaard schlitz helvetica normcore man braid la croix pinterest. Poutine viral master cleanse vape four loko, tbh kombucha street art deep v lomo aesthetic shabby chic.</p> </div>
<hr> example
<hr style="color: #c00; background-color: #dbe6e2; height: 10px; width: 100%; border: 1px solid #AEC3C2;" />
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas