There are many different colors used within CourseArc so you can fully customize how your content is branded. Below is a list of all the color fields and examples of each one.


Note: Be sure to test all of the colors you select using the WebAim Contrast Checker to ensure the contrast meets WCAG 2.0 AA compliance.


Screenshot of color fields available in CourseArc



Header/Banner Background and Foreground Colors 


(Note: This also controls the forward/back navigation at the bottom of each page.)


The Header/Bank Background and Foreground Colors must have sufficient contrast with each other. 


Screenshot of Heading/Banner Background and Foreground colors with instiution's logo located on the top left.

Sample 1

Screenshot of Heading/Banner Background and Foreground colors with instiution's logo located on the top left.

Sample 2


Icon Color


Icons must have sufficient contrast with a white background. 


Screenshot of a sample icon

Sample 1

Screenshot of a sample icon

Sample 2


Headings 1, 2, and 3


Heading 1 must have a white background if the glossary is enabled to ensure it has sufficient contrast with the glossary icon and text. Headings 2 and 3 must have sufficient contrast with the chosen background color. 


Screenshot of Headings with instiution's logo located on the top left.

Sample 1: All three heading levels contrast well with white background and work with the Glossary Icon and Text

Screenshot of Headings with instiution's logo located on the top left.

Sample 2: Heading 1 uses a white font color that contrasts well with the black background because there is no glossary in use. However, Headings 2 and 3 are a different color to contrast well with white. 


Button Background and Foreground Color:

(Note: This also controls the choices in drag and drop activities)


The Button Background and Foreground Colors must have sufficient contrast with each other. 


screenshot of a "Submit" button

Screenshot of button colors in sorting

Sample 1

screenshot of a "Submit" button

Screenshot of button colors in sorting

Sample 2



Accent Color 1


Accent Color 1 controls the header background and font for the glossary as well as the accordion, tabs, and flashcards blocks. This color must have sufficient contrast with a white background. 

Screenshot of accent colors in the glossary search feature

Sample 1


screenshot of sample tabs
screenshot of sample flashcards

Sample 2

Screenshot of sample tabs


Screenshot of sample tabs

Sample 3


Accent Color 2


Accent Color 2 controls the search icon, scrollbars, and rollover color in the Glossary. This color must have sufficient contrast with a white background. 

Screenshot of accent colors in the glossary search feature



Table Colors 


The Table Heading Background and Foreground Colors must have sufficient contrast with each other. The Table Even and Odd row colors must have sufficient contrast with the font color. 


(Note: Table colors also control the table headers and descriptions in drag and drop activities. The lefthand side of drag and drop activities is derived from this color and is a lighter version of the chosen color.) 
screenshot of table


Screenshot of Interactive Matching block with applied accent colors

Sample 1

Table with applied accent colors


Screenshot of Interactive Matching block with applied accent colors

Sample 2


Footer Colors


The Footer Background and Foreground Colors must have sufficient contrast with each other. 


screenshot of footer

Sample 1

screenshot of footers

Sample 2