Skip to Main Content

Web Accessible Color Scheme 1: Home

To Use This Color Scheme

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

To Use a Different Color Scheme

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:

To Use Different Box Header Colors in the Same Guide

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;
</p><p><style type="text/css">.s-lib-box-title {
color: #ZZZZZZ !important;