User Guide Navigation

Customize the Style Colors for the Current Element (Basic)

With the Colors - Basic tool, you can adjust the background and text color of the current element. The same color picker is also available when working with Borders tool and the Colors for Banner Theme tool. You can also use the Customize Color Palette tool to adjust the available color swatches.

Interface

basic colors interface color picker input

Note: The WCAG 2.0 Rating table at the top of the panel changes to let you know if the current colors match WCAG 2.0 guidelines. Achieving an AA rating is sufficient. If your selected color results in a Fail rating, you can use the Lighten or Darken buttons to make slight adjustments to the color until it moves into the AA range. When you change the background color, the text color will change to white or black for best contrast.

Turning on the Colors Tool

This is an Intermediate level Design Tool

To turn on this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Intermediate from the Select a Comfort Level area
2. Manually turn on a specific tool by clicking the switch below the Colors - Basic tool name
Close the Design Tools Settings

Note: If you switch from the Colors - Advanced picker, you will need to reload the page for the Colors - Basic tool to function.

Change Colors

To change the colors of an element, follow these steps:

Open the page for editing.
Click Launch Design Tools.
In the Design Tools menu, click Customize the Style.
Click Current Element Style.
Click the Colors tool to expand tool if needed.
Place your cursor within the element to which you want to adjust a color.
Use the Apply To controls if you want to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
Adjust the color as desired.
On the content page, click Save.

To reset colors to default, follow the instructions above to identify the element you want to reset and then click the Remove Custom Colors button.

Tip: You can click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel and Current Element Style section.