How to Set the Colours on Your Website (Jane Integration)

Your Clinic Sites website automatically syncs your branding colours from your Jane account. This makes it easy to keep your branding consistent across both platforms. You can also turn off this sync setting if you want your website to use different colors than what’s set in Jane. 

In this guide, you’ll learn how to change your colours, adjust syncing preferences, and ensure your selections meet accessibility standards.

 

How to Set Your Colours if Your Website is Integrated with Jane

Your Clinic Sites website will automatically pull in the primary and secondary colours set in your Jane Branding settings. The step-by-step below will show you how to change those colours in Jane.

1. Log in to your Jane account.
2. Click Settings > Branding.
3. Under the Theme section in Jane, set your Primary and Secondary colours. We recommend you choose darker, saturated colours so white text remains readable.
4. Click the Save Colours button to save your changes. 
5. Your Clinic Sites website will update with these colours in 24 hours, or if you manually refresh your information using the Jane Sync button .

How to Set Custom Colours in Clinic Sites

If you want different colours on your Clinic Sites website than what’s set in Jane, you’ll need to disable syncing. The steps below will walk you through how to do that:

1. Click Admin > Settings in the top right-hand corner of your page. 
2. Click Jane Integration from the left-hand menu.
3. Under General, toggle Synchronize Theme off.
4. Click the Save Settings button.
5. You'll now be able to change your Clinic Sites website colours. 
6. Go to Admin > Design > Colours to make those changes.
7. Choose your Primary, Secondary, and Tertiary colours using the colour picker or hex codes.
8. Adjust contrast settings under the Show/hide contrast button if needed.
9. Click the Save Colours button to apply your new custom colours.

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’ve successfully set your website colours, whether syncing from Jane or customising them in Clinic Sites. You’ve also taken the extra step to ensure your choices are accessible and compliant with web standards. Your site now looks great and performs better for every visitor. Nice job!


 

Next steps

Now that your site colours are set, here are more ways to improve your website's design:

• How to add a video or image to your header‍ 
• How to set your image crop focus‍ 
• Best Practices for Page Content Length‍