User Interface
Accessible colours and iconography are essential for usability and the brand's digital presence. It is important to choose the right colours for the call-to-action buttons and icons, to ensure they pass accessibility standards. Some of the colours that are currently being used do not pass these standards, which compromises the usability of the interface and damages the brand’s digital presence.
Using accessible colours not only improves readability for all users but also demonstrates a commitment to inclusivity and compliance with legal standards. To meet the WCAG AA accessibility standards, colour combinations need to achieve a contrast ratio score of 4.5:1 for regular text and 3:1 for larger text. These scores ensure that users with visual impairments can clearly distinguish between text and background elements.
💡 Recommendation
<aside>
Check your colour combinations meet accessibility standards using: https://colourcontrast.cc/.
</aside>
<aside> ❌
Don’t use colour combinations which don’t pass the 4.5:1 score for regular text and 3:1 for large text
</aside>
<aside> ✅
Ensure you use colour contrast which passes the 4.5:1 score for regular text and 3:1 for large text
</aside>
💡 Recommendation
<aside>
If you’re using light and dark mode, ensure that you are testing the accessibility of the colours for both modes. Also remember to check the accessibility of third part integrations.
ℹ️ See more on how to correctly apply colours using dark mode here.
</aside>
The outline thickness of icons is crucial for their visibility and accessibility, with a standard weight of 1px recommended for 16x16 pixel icons. For larger icons, such as those measuring 32px or 48px, outlines should be adjusted to 2px and 4px, respectively, to ensure clarity and recognisability across different screen sizes. You should also ensure that when using icons alongside text there is enough spacing between the text, icon and container to ensure that it is readable. The colour contrast should also pass accessibility standards.
<aside> ❌
Don’t use thinner outlines & lower colour contrast
</aside>
<aside> ❌
Don’t use colours that are not accessible, with limited spacing
</aside>
Using consistent and intuitive iconography is key to providing a seamless user experience that reinforces brand identity and familiarity. When icons are easily recognisable across platforms, users can quickly engage with features, enhancing usability and minimising confusion.
<aside> ✅
</aside>
💡 Recommendation
<aside>
</aside>