Use of color

Color palette

When working with color, you must follow the brand guidelines created by DEA (Development and External Affairs).

Sitecore features have been designed with the color palette in mind. To ensure your content meets SMU's guidelines:

• Use the features as provided. Do not use CSS to modify or override the default settings.
• Leave text in its default state. Do not copy text from another software program, such as Microsoft Word or Dreamweaver, as a way to modify colors.

Color contrast

When pairing two colors together, such as backgrounds and foregrounds, the color combination must provide adequate contrast. This includes text, buttons, and headings.

Strong color contrast makes your content more readable. People with low vision, color blindness, or other visual impairments may have a difficult time interpreting your content if there is not enough contrast between background and foreground elements. Additionally, low contrast colors may be difficult to read in certain environments, such as low or bright light.

To ensure your elements have enough contrast, certain background / foreground color combinations should not be used together.

Resources

Check the contrast between two colors with WebAIM (https://webaim.org/resources/contrastchecker/)

Read more about the important of adequate contrast (https://www.w3.org/WAI/WCAG21/Understanding/distinguishable)

Use of color to indicate status

Do not use color on its own to indicate status. For example, do not use a green icon to indicate success or a red border to indicate a warning. Color can be combined with other elements, such as iconography paired with text, to indicate status. Icons alone should not be used alone unless you are confident you have coded proper ARIA attributes with the icon.

Practical example

(image)

Resources

Read more about how the use of color impacts accessibility (https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)