Color scheme
In WFP Design System it includes a primary color (WFP Blue), a secondary color (Dark Blue) and neutral colors (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 color (WFP Blue) is the dominant color used for key elements and actions in the user interface, providing hierarchy and emphasis. Secondary UI color (Dark Blue) complements the primary color, used for less prominent elements and to provide visual variety.
When to use it:
- Primary UI Color:
- For primary buttons and calls to action.
- To highlight important information or key features.
- Secondary UI Color:
- 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.
