The standard settings provide a selection of preset colour themes and a basic custom colour picker.
 Preset colour themes
There are 8 preset colour themes to choose from:
A right royal todo
Fresh and Light
To apply one to your site, select it by clicking on the panel it is displayed within, and click 'Save and apply'.
 Custom colours
The Custom colour scheme settings provides configuration options for 11 features within the site. These settings cover all visual elements of the site appearance. For each colour configuration option, users can configure the background colour and text colour, apart from the 'Page background' colour setting, which only provides the option to edit the background colour.
For more granular colour customisation use the Advanced colour settings.
Advanced colour management enables users to choose their own foreground/background colour pairings for a range of site elements. Elements are grouped by category and may have several colour-configurable areas or states. Each colour selection has a schematic diagram of the relevant page element with the affected area highlighted in orange.
Once you have selected an element to configure, you can select a colour from the preset palette (1) or define your custom colour by inputting a hexadecimal value (2). Note whether the background colour-text colour combination meets accessibility standards (3). When you are satisfied with the colour selection and the minimum (AA) accessibility standard is met, click Select (4).
Most elements possess foreground/background pairs of colour settings; some elements such as page background only have a single configurable colour.
All foreground/background colour pairings are checked for suitable contrast against accessibility guidelines. All pairing contrasts must at least meet AA level contrast, with values below AAA standard triggering a warning. This is an important mechanism in making Mosaic websites as accessible as possible, in line with rules for University websites.
Less than AA standard
Meets AA standard, but does not meet AAA standard
Manually checking colour contrast
Contrast checking works by comparing text’s colour to the colour of the background it is placed on. Where text sits over an image, there is no way to make this comparison because:
The background colour is determined by the image, not a specified colour value
The text will be positioned over different portions of the image depending on the responsive positioning of the text relative to the background image
In circumstances like these, it is up to content creators to ensure that there is sufficient contrast between the text and the background image to be readable in all circumstances (bearing in mind that the text will sit on different portions of the image depending on screen width, font size and character length of the title, position of the image).