What's changed
We've updated the dark/border-alt colour to ensure that text input borders meet the 3:1 WCAG requirement for non-text contrast when used on the dark palette.
| Attribute | Previous value | New value |
|---|---|---|
| Hex code | #63B1FF Copy | #73C2FFCopy |
| Contrast ratio on #005EB8 (dark palette background) | 2.81:1 | 3.3:1 |
How to get the update
In Figma
For those connected to the QGDS libraries, open your design file and review and accept the QGDS UI Kit library updates. If you're using a local version of the UI kit, you will need to manually update the Dark/Border/Border alt colour variable in your file/s.
We’ve also updated the QGDS UI Kit Community file to reflect this change.
In code
For those using QGDS Bootstrap or QGDS Vanilla (Queensland Health) this change is now available in the latest release. We recommend updating as soon as possible to apply these changes to your website or digital service.
If you have manually hard-coded hex values in your own stylesheets, you should update the appropriate variable (e.g dark__border--alt ) to ensure your website or digital service remains accessible.
Other UI Kit file usability improvements
Since the last version release (5.0.0) we’ve also published numerous patches to the QGDS UI Kit file to improve the experience for designers and collaborators.
- Accordion - Restored missing base components.
- Text Styles - Fixed H5 variant to use appropriate Heading 5 typography style.
- Callout (Event) - We’ve deprecated the specific ‘Event’ variant as the default Callout component can be used with custom content as needed.
- Footer base component (Colour: Default, Size: sm-xs) - Reconnected boolean variable that allows social links to be turned off and on in the component properties.
- Indented text panel - Applied correct border radius XL (48px) to all rounded corners.
- Cards: No action - Removed stray top padding on horizontal rule in footer. Corrected some text alignment.
- Cards: Single-action and Cards: Multiple-action - Corrected some inconsistent card title text sizes across variants.
- Card-inner - Removed a stray underline applied to a title, added a missing base component to a variant.
- Card-title - Adjusted vertical resizing to hug contents.
- Vertical navigation button base component - Fixed closed state of button with dropdown to use the correct direction of the chevron icon (was pointing up when inactive and active).
- Horizontal navigation LG - Fixed a layout bug where the background and menu items were vertically misaligned.
- Primary-navigation bg - Applied correct property name (colour) to variants.