Web Accessible Color Scheme 1: Home

Welcome LibGuide Authors!

This page shows an example of dark gray tabs and navy blue box headers that are compliant in terms of contrast between the background colors and the fonts.  

If you want to use these colors in your LibGuide, select Tab & Box Options from the drop-down menu in the upper right corner of the edit screen, then plug in the color codes listed below.

Tab Color Codes

• Active background (light gray): #e0e0e0
• Active font (dark gray): #282828
• Inactive background (dark gray): #494949
• Inactive font (white): #ffffff

Box Color Codes

• Box header background (navy blue): #003366
• Box header font (white): #ffffff

Here are other accessible color scheme options:

Scheme 1: Currently selected: Dark Gray Tabs & Navy Blue Boxes
Scheme 2: Navy Blue Tabs & Dark Gray Boxes
Scheme 3: Royal Blue Tabs & Navy Blue Boxes
Scheme 4: Dark Blue Tabs & Light Gray Boxes
Scheme 5: Dark Purple Tabs & Lavender Boxes

You're free to use other colors, but you must make sure there is sufficient contrast between backgrounds and fonts. Here are some tools you can use to find and test colors:

• Find color codes using this HTML Color Picker.
• If you see a color you like on the web and want to find its color code, try the ColorZilla extension for Chrome or Firefox.
• Once you know the codes for the colors you want to use, test them for contrast using WebAIM's Color Contrast Checker.
• If you've already created a guide and want to test the color contrast, use WebAIM's Wave Tool. Installing its browser extension will make it easy to check your guides.

If you want to use a different box header color for each page in your guide, there is a way, but you have to be comfortable with using source code.

Step 1: Find the color codes for the box header and font colors you want to use for the page, and make sure you've tested the contrast for ADA compliance. 

Step 2. Copy the entire code below and paste it into the source code of a rich text box on the page.

Step 3. Replace the YYYYYY with the color code you've chosen for the background.

Step 4. Replace the ZZZZZZ with the color code you've chosen for the font.

Step 5. Repeat for each page in your guide.

<p><style type="text/css">.s-lib-box-title {
background-color: #YYYYYY !important;
}
</style>
</p><p><style type="text/css">.s-lib-box-title {
color: #ZZZZZZ !important;
}
</style></p>