How to set the colours on your website (Jane Integration)

Your Jane Websites 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 colours 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

Jane Websites 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 Jane Websites  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 

If you want different colours on your Jane Websites 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 Jane Websites website colour.
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 Jane Websites, 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 Jane Websites. 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!