How to Manually Change Your Website Colours

Updating your website’s colours is one of the best ways to align your website with your clinic's brand. Whether you have custom hex codes from a designer or just want to choose from our preset colour options, this guide will walk you through how to manually change the colours on your Clinic Sites website and ensure your selections meet accessibility standards.

How to Manually Change Your Website Colours

In the steps below, you’ll learn how to choose new colours for your website and adjust contrast settings for accessibility.
 

1. Click Admin > Design in the top right-hand corner of your page. 
2. By default, you’ll be in the Colours section.
3. From here, you'll be able to see preset template colours or colours that were synced from Jane (if previously connected).
4. To manually adjust colours, enter a hex code (e.g., #003366), use the colour selector tool, or choose from the pre-existing colour options.
5. Edit your Primary, Secondary, and Tertiary colours. These colours apply sitewide, to all headers, buttons, and text.
6. To adjust colour contrast, click Show/hide contrasting colours. For example, if your Primary Colour is a light tone, you may want to change the contrast colour to a darker shade so the text remains readable.
7. Once you're happy with your changes, click the Save Colours button to apply your new colour scheme across your Clinic Sites website. 
   
   

How to Check Your Colours for Accessibility

To ensure your colours meet accessibility standards and provide a great experience for all patients, especially those with vision impairments, use a colour contrast checker. The steps and the video below will walk you through how to make those changes. 

1. Open in WebAIM Contrast Checker in a separate window. 
2. In Clinic Sites, go to Admin > Design > Colours and copy your colour hex codes.
3. In WebAIM, paste one colour into the Foreground field and another into the Background field.
4. Review the contrast ratio. A contrast ratio of 4.5:1 or higher is recommended for normal text. If your contrast fails, try darker tones or switching text to black/white.
5. Repeat the test for each button or text colour you use on your site.

You're all set! Your website now reflects your updated colours, giving your clinic's website a consistent look. These changes update immediately and also appear as new style options when editing blocks. 

 

Next steps

Now that your colours are set, here are a few things you can explore next:

• How to edit your logo and favicon‍ 
• How to change the design of your main menu‍ 
• How to add a block‍