Color settings

In this theme section you'll find all settings you need to make your website unique, using your choice of color.

Tab: »Color«

Step by step

Click the Color tab.
At Background Colors use HTML code to set the background color of your website. You can select the color in the background color area using the cursor in the color field or by entering the hex value.
The hex system represents the RGB value in a six-digit combination of letters or numbers. It is suitable if you already know the exact color. You can find countless color charts on the Internet for hex values.
Click on the Save button above the workspace.

You can also set the font color of your website. Therefore you can define a base value as well as a light and a dark variant in the respective font color area.
To select the color, you can use the cursor in the color field or enter the hex value.
Click on the Save button above the workspace.

For setting your primary colors of your website, you can also define a base value including a light and a dark variant.
You can use the cursor in the color field or enter the hex value to select the color.
Click on the Save button above the workspace.

As with the primary colors, you can also select the desired color codes for the secondary colors.
Here, too, there are three options: base, light and dark alternative, which you define using the cursor in the color field and by entering the hex value.
Click on the Save button above the workspace.

Certain types of dialog and system messages can be highlighted in color, here in the entry fields Success Color, Warning Color and Error Color.
Click on the Save button above the workspace.

Here you determine which of the color sets is used for navigation on the desktop as well as on mobile devices. For Desktop Navigation the values Primary Colors, Secondary Colors and Font Colors are offered, for Mobile Navigation only Primary Colors and Secondary Colors.
Click on the Save button above the workspace.

With regard to accessibility / WCAG you can test your set colors for sufficient contrast. You can also get sample views for various use cases of the font, primary, and secondary colors.
By using the Show contrast test results button you can activate the color contrasts.
By activating the Show color preview button the sample views will be displayed.
Under Required contrast ratios for WCAG compliance, you will find additional information about the color contrasts.

After activating color contrast results, you will receive an analysis based on the background color. Results are displayed for the font color (marked here as an example), primary color, secondary color and signal colors.
Green confirms sufficient contrast in terms of accessibility / WCAG. Red indicates a need for improvement.
You can deactivate the view by clicking on the Hide contrast test results button again.

You can display sample views of the color settings you have made for various use cases on your website.
These include headlines, bullet points, link buttons, checkboxes in forms and message buttons, which you define using the signal colors.
Activate the view by clicking on the Show color previews button. Click on the Hide color previews button to deactivate the view.

Elements from the toujou element library that are connected to this tutorial.