Instructions: The content on this page is for faculty use only. The directions and the HTML to learn how to create Canvas buttons, links, and pop-up boxes are included on the page.

Adding Custom Colors to Boxes

You can customize button colors to match LSSC branding if you want a more creative approach. The hex codes for all LSSC colors are on page 10 of the LSSC Branding Guidelines. Remember to include the "#" symbol before the code when you input it into your code. Another resource for finding hex codes is the website "Google Color Picker."

Add the yellow-highlighted hex # to the background-color area to customize a button's background. This hex # represents LSSC's light blue.

The two examples below use the font colors #ffffff and #1251A4 (color of the word "Home") and #6EADF3 (background color of the button). Unfortunately, the background and font colors in both examples lack sufficient contrast and are not ADA-compliant, making them challenging for people to read. To enhance readability, you'll need to choose a font color that stands out more against the blue backgrounds.

Button Text Color

Non-Compliant Button Text Color

Choosing Colors and Maintaining Contrast for Readability

To choose colors that are readable and comply with accessibility standards, use the Adobe Color Accessibility Tool. Replace the hex # for both the text and background colors, and the tool will analyze the colors depending on the font size. The tool will also help you pick colors that provide better contrast.

The example below uses a darker font color recommended by the Adobe Color Accessibility Tool.

Use this code to create a large HTML button: <a class="btn btn-large" style="background-color:#6EADF3; color:#093672;" href="ADD YOUR COURSE LINK">Home</a>

Compliant Button Text Color