There are many different color options within CourseArc so that content can be set up to reflect an organization's branding or customized for multi-branding when delivering content to multiple organizations. Below is a list of all the configurable color fields located in the Themes configuration settings followed by examples of how each color field applies to page content.
Test all background-foreground color pairings using the WebAim Contrast Checker to ensure that the contrast between colors meets WCAG 2.1 AA.
Header/Banner Background and Header/Banner Foreground Colors
The Header/Banner Background and Header/Banner Foreground colors must have sufficient contrast to each other. These color settings also apply to the navigation arrows at the bottom of each page.
Icon Color
Icons must have sufficient contrast with a white background.
Headings 1, 2, and 3
Heading 1 must have a white background if the glossary is enabled to ensure that it has sufficient contrast with the glossary icon and text. Headings 2 and 3 must have sufficient contrast with the chosen background color.
All three heading levels as well as the glossary icon and text element contrast well with the white background.
Because there is not a glossary in use, Heading 1 uses a black background with contrasting white text. Headings 2 and 3 use contrasting colors to white.
Button Background and Foreground Color
The Button Background and Button Foreground colors must have sufficient contrast with each other. These settings also control the choices in drag and drop activities.
Accent Color 1
Accent Color 1 controls the header background and text for the glossary as well as the Accordions, Tabs, and Flashcards blocks. This color must have sufficient contrast with a white background.
Accent Color 2
Accent Color 2 configures the search icon background, scrollbars, and rollover color in the glossary. This color must have sufficient contrast with a white background.
Table Colors
The Table Heading Background and Table Heading Foreground colors must have sufficient contrast with each other. The Table Even Row Background and Table Odd Row Background colors must have sufficient contrast with the font color.
Table colors also control the table headers and descriptions in drag and drop activities. The left-hand side of a drag and drop activity is a shade of this color.
Footer Colors
The Footer Background and Footer Foreground colors must have sufficient contrast with each other.
