Color Scheme

The theme includes a WCAG-compliant color scheme that switches between a light and a dark mode when the OS environment does.

Four base colors

The color scheme design is based on four colors with a clear purpose:

Red

marks a current or intended navigational state.

Blue

emphasizes internal links.

Green

emphasizes external links.

Yellow

highlights page- or element-specific navigational elements.

The specific color variations of these base colors follow the Hugo logo. The color scheme provides many color variations to structure the content and the navigation.

WCAG compliance

The minimal contrast ratios between foreground and background colors of the default color scheme follow the recommendations of the Web Content Accessibility Guidelines. They are an international standard of the World Wide Web Consortium (W3C).

Information colors

The pure colors red, yellow, blue, and green are also used to highlight annotations in boxes or headings. Their shade differs notably from the theme colors and they have a well-known different meaning.

In case we create a custom color scheme for this theme, these information colors should not change.

Custom color scheme

The file assets/css/color-default.css in the theme folder holds the default color scheme. In case you would like to use another color scheme you can create the file assets/css/color.css in your project root. Then, the theme will include this file instead of the default in the main stylesheet. This file needs to define all color variables and you may want to start with a copy of the default.

Creating a WCAG-compliant color scheme for this theme is non-trivial. There is no easy way to calculate all the correct shades of the four base colors automatically – as far as I know. To achieve sufficient contrast ratios for all combinations manual adjustments are necessary because the luminosity is a function of the color.

Code highlighting

The color variables for highlighting code blocks with Chroma follow the light and dark theme from GitHub which are (mostly) WCAG compliant.