Overview

Goldilocks-CSS is built to support a split complementary colour scheme for the main web page decoration. By using HSL values, the hue can be rotated around 360° to select a primary colour by using the variable --main-color. The default is 140°. Saturation and lightness can then be chosen to finalize that primary colour. A variable —main-color-offset controls the complementary colours. The default is 30 degrees. Setting this to 120° produces a triadic colour scheme. All three of these decoration colours have light and dark variants to support backgrounds and hover states.

Note that notification colours (success, warning, danger) have fixed HSL variables as they are more standard and have specific meaning. Also the link colour and shades of grey are also provided and have fixed HSL fixed variables. You can, of course, adjust these variables to suit your needs.

There is a dark mode over-ride file that adjusts these colours to meet the needs of contrast in this mode. Typically the decoration and notification colours are lightened to provide better contrast on a dark background.

Accessibility

Web colour accessibility is a complex area. WCAG 2.1 provides a detailed discussion on the need to meet web accessibility and provides commentary on proper use of colour. WebAim (the Institute for Disability Research, Policy, and Practice) has a detailed discussion on designing in accessible contrast.

In general, these are complex calculations that you can usually find an on-line tool or contrast ratio calculator to help with colour contrast selection. The WCAG recommendation is to ensure that the contrast between two colours is at least 4.5:1.

Where the challenges occur is around selecting a background element colour that has text. For example, a yellow background with white text has a low contrast ratio unless the yellow background is very dark. This is usually not desired or interesting. This also applies to colours adjacent to yellow such as green and orange. Consequently, black text on these backgrounds has high contrast rather than white text that usually fails the contrast test. This is often where designers stumble.

The reverse is true for blue or red. White text on red or blue backgrounds has high contrast. Black text on these backgrounds often fails accessibility unless these backgrounds are very light.

So What Does this Mean for Us?

With Goldilocks-CSS we try to help the designer to select a colour scheme and then to derive supporting colours to ensure that good contrast is maintained. That means that a designer can select a primary hue and a split complementary angle that will produce three colours. The designer can also choose the saturation level and lightness for these colours.

The aforementioned calculator tools are highly recommended to try and test various hue, saturation and lightness settings to ensure that the website has the colours it needs as well as meeting accessibility requirements.

Key Variables

The file initial-theme-colors.css has all of the colour definitions. The following variables define the theme’s three colours:

  • --main-color is the primary colour hue value (default 140°)
  • --main-color-offset is the complementary colours +,- degree offset from main + 180° (default 30°. Note that a setting of 0° sets secondary = tertiary and yields a two colour theme. A setting of 120° produces a triadic colour theme.
  • --main-color-complement-low sets the secondary complementary colour
  • --main-color-complement-high sets the tertiary complementary colour
  • --main-color-sl-light sets the colour lightening for saturation and lightness
  • --main-color-sl-dark sets the colour darkening for saturation and lightness
  • --primary is the resulting main theme colour
  • --secondary is the resulting secondary theme colour
  • --tertiary is the resulting tertiary theme colour

Note that you do not need to use this split complementary theme method. You can directly set --primary, --secondary and / or —tertiary colours with any custom values that you wish to use. Also, any variable can be overridden by a subsequent custom css file or by Javascript code running on the browser.