Choosing your booking page header and background text colour

Choosing the correct header and background text colours helps your Booking Pages stay on-brand and easy to read, ensuring customers feel confident and comfortable while booking.

Learn how to choose the colours for your Booking Page header text and background colour, including best practices.

Are you new to Branding? Please read the first article in this series for an introduction to branding your booking pages.

Accessing the features mentioned in this article

Where can I find this feature using the top menu?

• Manage > Layout > Branding > Header colour
   

What more do I need to use this feature?

• Admin or restricted permissions to View all reports (or Promotions) and Export Data.
   

Which Checkfront version supports this feature - classic items, classic products, or both?

• This feature is available in both our classic version, which uses classic items (Inventory > Items), and our classic version, which uses classic products (Inventory > Products).  → Learn more about products

1. In the Header Colour section, locate the two dropdown fields:
   • Header background colour
   • Header text (foreground) colour
2. Click each dropdown to open a palette or input custom colour values.
3. As you choose, look at the SAMPLE preview box (to the right). Ensure you can clearly read the word SAMPLE over the background.
4. Once you're satisfied, click the Save button.
5. View your actual Booking Page header (desktop & mobile) to confirm the colours look good in real context.

Using your brand's colours Use your brand’s primary colours, but always test for legibility. Even a beautiful brand colour isn’t useful if the text is unreadable.

• Prioritize contrast. Dark text on a light background or light text on a dark background tends to read best.
• Avoid problematic combinations. For example, light grey on white, or yellow on pale blue, often fails readability.
• Test across devices and screens. Colours may render differently on mobile screens or different monitors.
• Keep consistency. Use consistent brand colours used elsewhere (site, email, etc.)
• Fallback and default behaviour. If you don’t override these, the system will use your default theme colours (if any).
• Preview is your friend. Use the SAMPLE box, but also view your booking page to see how it looks in place.

Next Steps

The following article explains how to configure settings for Checkfront promotional links and other content. 

< Specifying the Booking Page header logo text via Branding settings     |     Configuring settings for Checkfront promotional links and content within Branding settings >