Breadcrumbs

Colours

We use the the official University of Waikato colours and other colours which complement them. Our colours create visual identity and help structure the look of the website.

Official web colours

Light Red
HEX:
#D40100
RGB: (212, 1, 0)

Used in header as colour of menu bar.

Medium Red
HEX:
#BE0403
RGB: (190, 4, 3)

Used in header as top colour above menu bar. Use in side-menu for menu heading.

Dark Red
HEX:
#AA0000
RGB (170, 0, 0)

Used in page footer.

Light Yellow
HEX:
#FAA61A
RGB: (250, 166, 26)

Official yellow colour.

Darker Yellow
HEX:
#E79000
RGB: (231, 144, 0)

Used as a shadow accent and for fine lines and borders where the lighter yellow is not strong enough.

Dark Grey
HEX:
#353535
RGB: (53, 53, 53)

Used in page footer. Used for text colour.

Blue Grey
HEX:
#32373D
RGB: (50, 55, 61)

Used as background colour in menu for selected menu item.

Light Grey
HEX:
#F2F2F2
RGB: (242, 242, 242)

Used as background colour in menu for unselected menu items.


Accessibility

To comply with accessibility standards, sufficient contrast ratios must be maintained between foreground and background colours. The following are examples of colour combinations which either pass or fail depending on those standards.

WCAG 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.

To test colour contrasts, please visit webaim.org or contrast-ratio.com

Larger text (greater than 18px)

Click on each example to see the official WebAIM result.




Smaller text (less than 18px)

Click on each example to see the official WebAIM result.





Secondary Colours