Theming

Customise the appearance of your Aire Innovate products by updating logos, background images, and application colour palettes.

The Theming page is divided into two tabs: Images and Colours.

Images

Update the primary branding assets used throughout the application.

Actions available:

• Upload — Add a new image if none exists
• Replace — Swap the current image with a new file
• Remove — Clear the current image and revert to the default branding

Supported formats

PNG, JPEG, and WebP.

Primary Logo

Upload or replace the logo displayed in AireFrame.

The recommended logo size is dependent on your layout, but high-resolution files are preferred for crisp rendering.

Login Background Image

Customise the image shown behind the login form.

This is optional and can be used for:

• Organisational branding
• Hospital or trust imagery
• Campaign or seasonal backgrounds

The preview area shows whether an image is currently set.

Colours

Control the look and feel of AireFrame by selecting from preset themes or creating your own colour set.

Preset Themes

Choose from predefined, professionally-designed themes:

• AireFrame Theme — Default colours for Aire Innovate
• NHS Styled Theme — Based on NHS design standards
• GDS Styled Theme — Inspired by UK Government Design System colours

Each theme preview shows examples of headings, text, components, and accents so you know exactly what the palette will look like.

Selecting a preset will automatically apply the associated colour values.

Customise Theme

For full control, manually configure your colour palette:

• Primary — The dominant interface colour (buttons, highlights, links)
• Secondary — Supporting accents
• Background — Page background colour
• Primary Text — The dominant text colour (titles, headings)
• Secondary Text — Supporting text accents (subtitles)

Alert Colours

Configure the colours used for alerts across AireBlocks products such as AireForms. These colours control the appearance of contextual alerts and hightlights that communicate status information to users.

• Information — Used for informational messages and general notices
• Success — Used to confirm a successful action or positive outcome
• Warning — Used to highlight something that requires attention but is not critical
• Danger — Used for errors or critical issues that need immediate action

Each preset theme includes sensible defaults for these colours, but they can be customised individually to match your organisation's branding or accessibility requirements.

TIP

The alert colour preview shows how each alert will appear.

WCAG Accessibility Checking

When customising colours, the configurator automatically validates your palette against WCAG 2.1 contrast requirements. This helps ensure that text and UI elements remain readable for all users, including those with visual impairments.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground and background colours:

• AA Large — 3:1 ratio for large text and UI components
• AA — 4.5:1 ratio for normal-sized text (the standard target)
• AAA — 7:1 ratio for enhanced contrast

Accessibility Score

As you adjust colours, an accessibility summary appears alongside your chosen theme showing:

• A score indicating how many colour pairs pass (e.g. 8 / 10)
• The number of WCAG issues found
• A coloured border that glows green when all pairs pass, or highlights issues when failures are detected

Contrast Breakdown Table

The Accessibility section displays a full breakdown table of every colour pair that is checked. Pairs are grouped into three categories:

App Colours

Pair	What it checks
Primary / Background	Primary colour against the page background
Secondary / Background	Secondary colour against the page background
Text / Primary	Auto-selected text colour on primary surfaces
Text / Secondary	Auto-selected text colour on secondary surfaces

Text Colours

Pair	What it checks
Primary Text / Background	Main text colour against the page background
Secondary Text / Background	Supporting text colour against the page background

Alert Colours

Pair	What it checks
Text / Information Alert	Text readability on information alert backgrounds
Text / Success Alert	Text readability on success alert backgrounds
Text / Warning Alert	Text readability on warning alert backgrounds
Text / Danger Alert	Text readability on danger alert backgrounds

For each pair, the table shows the foreground and background colour swatches, the computed contrast ratio, and pass/fail indicators for AA Large, AA, and AAA levels.

Accessible Theme Suggestions

If your theme has contrast issues, click the Suggest Theme button to open a dialog with three auto-generated alternatives derived from your primary colour. All suggestions are guaranteed to meet WCAG AA (4.5:1) on every contrast pair.

Suggestion	Description
Accessible fix (recommended)	Your existing palette with only the failing colours adjusted to meet contrast requirements
Warm complement	A darker secondary creates visual separation from the primary colour, with a lighter background
High contrast	Deeper tones on a white background for maximum readability

Each suggestion includes a live preview. Select one and click Try out to apply it — you can continue to fine-tune before saving.

Saving with Accessibility Issues

When saving a theme, a confirmation dialog will appear reminding you that changes apply across all environments for the tenant. If your theme has outstanding WCAG issues, you can still save, but the accessibility score will remain visible so you can address issues later.