Overview

Goldilocks-CSS is built to support a 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 185° (teal). Saturation and lightness can then be chosen to finalize that primary colour. A secondary colour (hue = 37°, warm sand) and supports the primary colour. A "call to action" colour is the complement of the primary colour (at hue = 22°, tangerine). All three of these decoration colours have light and dark variants to support backgrounds and hover states.

Note that notification colours (info, 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.2 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 in 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 a good contrast is maintained. That means that a designer can select a primary, secondary and complement hues. The designer can also choose the saturation level and lightness for these colours. All other colour variants, shadows, text colours, etc are derived from these initial choices.

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:

  • --primary-raw is the primary colour hue value (default 185°) without an alpha channel
  • --secondary-raw is the secondary colour hue value (default 37°) without an alpha channel
  • --complement-raw is the secondary colour hue value (default 22°) without an alpha channel

Note that you do not need to use this complementary theme method. You can directly set --primary, --secondary and / or --complement 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.