Theming guidance for designers

Jump to:

• Create a custom theme.
• Component-specific theming.
• Theme accessibility.
• Automatic colour token logic.

Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.

Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.

When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.

We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.

We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.

To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.

Create a custom theme

Ripple has been designed with a primary and accent colour. These inform the colour framework.

A link colour, focus colour and optional gradient are also required when theming.

The primary, accent and focus colours can be either light or dark:

• 'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).
• ‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).

To classify your colour as light or dark, we recommend the use WebAim Colour Contrast Checker or the Figma plugin, A11y - Colour Contrast Checker to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.

Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.

It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.

Guidance for creating your own theme can be found on the Theming page of the Ripple 2.0 Design System Figma file.

If you don’t have access, you can request access to view the Ripple 2.0 Design System.

Component-specific theming

The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.

There are 2 options for component-specific styling:

• neutral
• custom.

Neutral

Neutral can be applied to the following components:

• buttons
• header (only reverse and image variants)
• footer.

The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.

Custom

Custom component theming can only be applied to the footer.

The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.

To learn more about custom styling please see the Theming page of the Ripple 2.0 Design System Figma file.

Theme accessibility

Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: Brand Victoria guidelines for more information).

Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.

Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.

1.4.3 Contrast Minimum (Level AA) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Text that is part of a logo or brand name has no contrast requirement.

Accessibility testing requirements

When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a minimum contrast ratio of 4:5:1 for normal text contrast, 3:1 for large text and non-text elements must be met.

Links are required to meet a ratio of 4.5:1 colour contrast.

In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:

• dark type / rpl-clr-dark / #1A1A1A
• light type / rpl-clr-light / #FFFFFF.

The link colour is tested against 3 colours:

• light type / rpl-clr-light / #FFFFFF
• rpl-clr-neutral-100 / #F5F5F5
• rpl-clr-accent-alt / #E6F5FD (example hex only).

Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the Figma plugin 'Color Blind'.

Colour token automatic logic

Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.

Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements. For example, if the primary colour is classified as dark:

• rpl-clr-type-primary-contrast will automatically be rpl-clr-light
• rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.

Core

Typography colour tokens

Footer-specific (optional)

See: component-specific theming.

Automatic Colour Token Logic

Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.

• ‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).
• ‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).

Primary, Access, Focus and Link

Primary

Accent

Focus

Link

Gradient

Including a gradient is optional for theming.

If a gradient is not used, 'rpl-clr-accent' will be used in its place.

Gradient