Colour scheme
In WFP Design System it includes a primary colour (WFP Blue), a secondary colour (Dark Blue) and neutral colours (Neutral).
Guidelines for their usage help to maintain visual harmony and aid in conveying information effectively.
WFP colour palette
The three main colours come with a lighter and darker shade to give a little variety in the visual composition.
Visual hierarchy
Primary UI colour (WFP Blue) is the dominant colour used for key elements and actions in the user interface, providing hierarchy and emphasis. Secondary UI colour (Dark Blue) complements the primary colour, used for less prominent elements and to provide visual variety.
When to use it:
- Primary UI colour:
- For primary buttons and calls to action.
- To highlight important information or key features.
- Secondary UI colour:
- For secondary buttons or less prominent actions.
- To differentiate between elements within the interface.
When designing an interface keep in mind an ideal 60-30-10 proportion between colours.
Examples of usage
WFP Design System adopt a Material Design approach to visual composition with a flat usage of the colour scheme avoiding shadows and elevations.
Accessibility
According to the Web Content Accessibility Guidelines (WCAG), there are specific contrast ratios that should be met between text and its background for readability. The minimum required contrast ratios are:
- AA Level: This is the minimum level of contrast required for readability by WCAG. It ensures that text is reasonably accessible to most users. It includes:
- AA Large: Applies to large text (18 point or 14 point bold and larger), requiring a contrast ratio of at least 3:1.
- AA Normal: Applies to normal text (smaller than 18 point or 14 point bold), requiring a contrast ratio of at least 4.5:1.
- AAA Level: This is a higher level of contrast required for enhanced accessibility. It ensures that text is more accessible to users with low vision or other visual impairments. It includes:
- AAA Large: Applies to large text, requiring a contrast ratio of at least 4.5:1.
- AAA Normal: Applies to normal text, requiring a contrast ratio of at least 7:1.
Meeting AA standards is mandatory for WFP digital products.
