Colour Palette
#D4B1CF
#F7802B
#3E655D
#1A1D1A
#ECE2D0
#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
Contrast Checker
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.
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.
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.
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!”
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.
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.
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.
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.