Skip to main content

Version: 20.05 (EOL)

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 do need to make is to choose the primary color used by your Workspaces portal. The primary color is used as the basis for deriving a palette of complimentary tones that illuminate the 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​

​ You can use an online color checker to find a shade of your brand color that satisfies the WCAG 2.0 level AA contrast requirement. Here's how to do that.

  1. Determine the hex value for the brand color that you want to base your Workspaces primary color on. For example, #999999 or #FF0000.
  2. Open your web browser and go to the Web AIM Contrast Online Checker.
  3. Enter the brand hex color value from the first step 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 while adjusting the Lightness slider in the Foreground Color section. You're trying to find the lightest color that has a "Pass" result for WCAG AA.
    • If the initial result for WCAG AA is "Fail", darken your brand color by moving the slider to the left.
    • Once the result is "Pass", start moving the slider to the right, lightening your brand color, until the WCAG AA result is "Fail".
    • Nudge the slider back to the left until the WCAG AA result is "Pass" again. Note the value in the Foreground Color field.
  5. Copy the Foreground Color value from the previous step to your Workspaces configuration file.