Colour Palette

purple acorn
Purple
#D4B1CF
orange acorn
Orange
#F7802B
green acorn
Dark Green
#3E655D
black acorn
Black
#1A1D1A
bone acorn
Bone
#ECE2D0
blue acorn
Blue
#74B4C6
Orange

The orange colour serves as a complementary accent to our dark green colour, adding a distinctive touch to capture users' attention. It is predominantly utilized as the primary button color, as well as for select icons such as the badge book, edit profile, and camera. Additionally, it functions as an indicator for the currently selected page within the navigation bar

Purple

This shade of purple complements our colour palette smoothly. It is used as a background colour within pages such as the scavenger hunt, and within certain cards like the quick links on the homepage to help distinguish categories.

Dark Green

We selected this dark green hue for its symbolic association with nature and trees, aligning with the theme of our webpage. Its rich depth offers a nice contrast against our primary background colour, while also complementing the palette of accent colours utilized throughout the interface. Primarily used in our header and bottom navigation bar, as well as within the vector graphics. This colour selection enhances our design and aligns with our purpose.

Black

Black was used to enhance legibility, provide solid contrast, and add sophistication to the overall design. Black is primarily used for all text elements to ensure optimal readability; while also serving as the colour for most icons, conveying a sense of clarity and visual hierarchy.

Bone

The colour bone was selected as the background for the web app to create a calming and welcoming atmosphere. Its soft and neutral tone provides a subtle backdrop for other elements to stand out while maintaining visual harmony throughout the interface.

Blue

This blue was chosen because it is a symbol of water, nature and tranquillity which aligns with our web app’s theme. It is used within our quiz feature and select cards to differentiate content effectively. This blue contributes to a cohesive and visually appealing design aesthetic.

Colour Use Examples
orange button with black text4 quick linksevent card
Contrast Checker
black on blue background
The contrast ratio between black text on a blue background scored 9.09, indicating a strong level of contrast. According to accessibility guidelines, a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text is recommended to meet accessibility standards. This combination exceeds these guidelines, providing excellent readability and accessibility for users.
black on bone background
With a score of 16.36, a very high level of contrast between the black text and bone background colour is achieved. The combination far exceeds accessibility guidelines, providing exceptional readability and ensuring compliance with accessibility standards.
black on light green background
A score of 10.19 indicates very good contrast between black and the light shade of our signature green colour thus passing all accessibility standards.
black on orange background
The contrast ratio of 8.08 between black text on an orange background indicates moderate contrast, meeting basic accessibility guidelines. It scored four out of five stars, “Very good!”
black on peach background
The contrast ratio of 14.36 between black text on peach indicates strong contrast. This combination is often used as a graphich decoration in the background of most pages, exceeding basic accessibility standards. This high contrast ensures good readability for most users, aligning well with accessibility guidelines.
white on dark green background
The contrast ratio of 9.91 between white text on a dark green background indicates strong contrast, exceeding basic accessibility standards. This combination is used when buttons in the web app are being pressed on for visual feedback. This high level of contrast ensures excellent readability for most users and aligns well with accessibility guidelines.
black on purple background
The contrast ratio of 10.99 between black text on a light purple background signifies good contrast, surpassing basic accessibility requirements. This high contrast enhances readability for most users, aligning effectively with accessibility standards.
black on gray background
The contrast ratio of 15.91 between black text on a light gray background indicates exceptional contrast, far exceeding basic accessibility guidelines. This strong contrast ensures optimal readability for users across various visual abilities, aligning excellently with accessibility standards.