The colors
Main colors
The primary color is burgundy.
#870930
The primary color is always accompanied by one of the secondary colors
#ff6600
#addfe4
Next to these colors, a complementary gray (85% black) is used exclusively for text.
#4d4d4d
Background colors
#ffffff
#f4f4f4
#e2eaec
Accessibility guidelines on colors
to respect accessibility standards as defined in succes criterion 1.4.3 of WCAG 2.1, solid contrast ratios are required and defined for following elements:
- regular text: font-size less than 18pt and font-weight normal.
- large text: font-size 14pt or more and font-weight bold or font-size 18pt or more and font-weight normal.
- interface elements: icons, border, buttons or other elements that are part of the user interface.
- decorative elements: icons, visuals, logo's, that only have a decorative function. Meaning that if these elements should not be present, there would be no impact on the usability of the application or website.
Next you can find if standards are met for above elements in the given color combination.
Be aware that switching background- and foregroundcolor has no influence on the contrast-ratio.
Colour combinations not included in the overview below may not be used at all.
Even though the following overview shows all possible colour combinations allowed by the WCAG, each basic element and component has its own style characteristics determined by the styleguide, which can set additional restrictions on colour use.
Color combinations with no limitations
Color combinations with some limitations
Color combinations with the most limitations
As can be seen in next overview, these combinations can only be used for decorative items!