Theme color

Workspaces has been designed to give you a great user experience. Much consideration has been given to many visual design decisions resulting in a modern user interface that is beautiful, consistent, and easy to use, and which minimises the decisions that you need to make about how Workspaces should look and feel, leaving you more time to focus on building a solution that meets your functional requirements.

Contrast guideline for primary color selection

One of the few UI-related configuration decisions you need to make is the choice of primary color. The primary color is used as the basis for deriving a palette of complimentary tones that are applied to various Workspaces components. Often, this choice is relatively simple, driven by a company or product brand. However, because Workspaces derives other colors from the primary color, you may need to adjust the tone of your primary color selection to maintain that great look and feel and to meet accessibility guidelines.

In particular, it is recommended that the primary color meets the WCAG 2.0 level AA contrast guideline which requires a contrast ratio of at least 4.5:1 for normal text against a white background.

Selecting a primary color

It's easy to find a shade of your brand color that complies with the WCAG 2.0 level AA contrast requirement using an online color checker. Follow these steps.

1. Determine the hex value of the color (your brand color) that you want to use as the basis for your Workspaces primary color. For example, #808080 (Gray, Grey) or #FF0000 (Red).
2. Open your web browser and go to the Web AIM Contrast Online Checker.
3. Enter the color hex value (from Step 1) in Foreground Color and tab out of the field. Ensure the Background Color is white (#FFFFFF).
4. Examine the result for WCAG AA in the Normal Text section. If the result is "Pass" then your brand color is compliant and you can use it as the primary color; go to the last step. However, if the result is "Fail", continue to the next step.
5. Adjust the Lightness slider in the Foreground Color section to find the lightest color that has a "Pass" result for WCAG AA in the Normal Text section. Here's one way to do this.
   1. Start by darkening your brand color by moving the Lightness slider to the left until the result is "Pass".
   2. Next, move the slider back to the right, lightening your color until the WCAG AA result is "Fail".
   3. Finally, nudge the slider back to the left until the WCAG AA result is "Pass" again. Note the value in the Foreground Color field; this is your primary color.
6. Insert the primary color, as determined in the previous steps, as the value for theme.primary.main in your global configuration file.