Theme Colours

The theme uses bootstrap variables to override the colour suite provided by bootstrap, and gives access to a range of helper classes.

Dark and Primary colours can have backgrounds set using helper classes. The rest of the colours can be applied using variables in place of colour values.
For all examples, replace [colour] with the colour name, for example bg-[colour] becomes bg-primary for the PDH primary blue

Dark: .bg-[colour]-dark
Standard: .btn-[colour] for buttons or .text-bg-[colour] for background colours on any other element
Light: var(--bs-[colour]-border-subtle)
Subtle: var(--bs-[colour]-bg-subtle)

dark

primary

light

subtle

secondary

success

leaf

info

danger

warning

purple

muted

Accessibility

Accessibility Considerations

A comparison here of contrast ratios, when using plain background classes bg-[colour] with body text default colour, and when using the helper classes text-bg-[colour] for the most visually pleasing text colour with the specified background colour.

In some cases, the most visually pleasing combination, is not necessarily the most accessible combination, so take the following table into account!

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

When using these colours it is recommended to use larger text on buttons to allow colour combinations to at a minimum, meet WCAG 2.1

HEX	Required pass	#1b7bbc	#0dcaf0	#20c997	#9df856	#ffcd39	#dc3545	#fd7e14	#8c68cd	#6c757d
		4.55	10.83	2.12	15.99	14.04	4.52	2.57	4.21	4.47
WCAG AA Small	4.5	✅	✅	❌	✅	✅	✅	❌	⚠️	⚠️
WCAG AAA Small	7	❌	✅	❌	✅	✅	❌	❌	❌	❌
WCAG AA Large	3	✅	✅	❌	✅	✅	✅	⚠️	✅	✅
WCAG AAA Large	4.5	✅	✅	❌	✅	✅	✅	❌	❌	❌
		3.56	7.96	9.86	11.75	10.4	3.52	8.17	4.97	3.28
WCAG AA Small	4.5	❌	✅	✅	✅	✅	❌	✅	✅	❌
WCAG AAA Small	7	❌	✅	✅	✅	✅	❌	✅	❌	❌
WCAG AA Large	3	✅	✅	✅	✅	✅	✅	✅	✅	✅
WCAG AAA Large	4.5	❌	✅	✅	✅	✅	❌	✅	✅	❌

To improve accessibility, we recommend always using coloured buttons with the btn-lg class to increase font-sizes into the Large category, which improves readability.

Here are some handpicked buttons that meet accessibility for both AA and AAA

Primary Button Large

Secondary Button Large

Info Button Large

Danger Button Large

Success Button Large Dark Text

Coal Gradient Button Large

Borders & Accents

Border: var(--bs-[colour]-border-subtle)
Accent: var(--bs-[colour]-text-emphasis)

Named Colours

Generally speaking, you want to stick to the theme colours above, but we have also set various other bootstrap variables to some useful colour values here. These are not available via helper classes, but are available as variables:

Named colour: var(--bs-[colour])

It is recommended to add "text-white" or "text-black" classes to improve contrast ratios for accessibility

blue

purple

red

orange

yellow

leaf

green

cyan

black

white

gray

gray-dark

Gradients

A selection of gradients are available using helper classes that will set them as background colours.
Swap out [gradient-name] for the name of the gradient

Gradient: .gradient-[gradient-name]

tropical

blue

dawn

sky

dusk

baby-sky

leaf

sunset

sunrise

crete

coal

spectrum

Example usage of gradient

Gradient example in action