Updating my site colors

Theme colors are used to infuse your brand into Benevity’s products to help it feel familiar. Your theme colors appear in your program site and your system notification emails. They’ll also show on your Community Impact (CI) Portal and the Benevity app, if you have those products enabled.

You can change the theme colors of your program site by going to Manage > Site Settings > Theme Colors.

Permissions

Spark users with the theme manager role can change the theme colors.

Accessibility requirements

Selecting the right colors is crucial for ensuring your website is accessible and user-friendly for everyone. Ensure that your theme colors adhere to the minimum color contrast standards set by the Web Content Accessibility Guidelines (WCAG) 2.0 AA, as this plays a significant role in making your site meaningful for all users.

Updating your theme colors

You can change your site’s Brand and Action colors. You’ll need the 6-digit HEX code for both.

The Brand color is used to highlight interactive elements such as text links. It should be a dark color to meet the color contrast minimums. 

The Action color is used for primary action buttons. It can be any color except red, paired with Black or White text, to meet the color contrast minimums.

Color guidelines: 

  • Don’t use the same color for Action and Brand so that it’s clear where a user can take action.
  • Brand: don’t use black or red as it results in usability issues.
  • Action: don’t use red as it results in usability issues. 

To update the theme colors:

  1. Sign in to your Spark site.
  2. Select Manage in the top-right corner of the screen.

    menu-bar-marked.png

  3. Go to Site Settings > Theme Colors.

    spark-sitesettings-themecolors.png

  4. Enter the 6-digit HEX code for your Brand and Action colors.

    If the colors don't comply with WCAG standards, a warning will appear, indicating that the current colors are not suitable. Additionally, you'll receive recommendations for similar colors that meet the requirements. In the below example, the pink action color fails to meet standards; alternatives are provided for similar shades that are compliant.

    spark-bad-theme-colors.png

  5. Select Save Colors when you're happy with your changes. Your new colors will immediately update across your site.

Below is an example of how the colors appear on a giving opportunity. Notice the dark green Brand color in the navigation bar background. The lighter green is used for primary Action buttons like Donate Now.

Attachment

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

We're enhancing B-Hive!
Take a quick survey and tell us what you think of the new experience.
Announcements
Stay up-to-date on what's happening at Benevity.