For ‘Nederlandse Rode kruis’, I worked on improving the digital accessibility of their branding and website.
My approach focused on implementing WCAG guidelines to make the website more inclusive for all users.
Additionally, I optimized the existing brand guide to align better with these accessibility standards.
SCOPE
Optimizing digital accessibility
TOOLS
Figma
ROLE
UX/ UI Designer
Duration
Week
BRANDGUIDE
In the past, we created a brand guide for the Nederlandse Rode Kruis. We made adjustments to the brand guide to improve its digital accessibility.
Hierarchy in Titles
To improve structure and clarity for both visual users and those relying on assistive technologies like screen readers, clear and well-structured titles are essential.
Buttons
Buttons were optimized for usability and accessibility by increasing the clickable area to 48px, removing text shadows for clarity, ensuring sufficient contrast, enhancing hover state contrast with a 3:1 ratio, and adding a visible focus indicator for better navigation.
Color shades
additional shades were added to enhance contrast, visual hierarchy, and design consistency. Dark shades emphasize titles, while light shades differentiate backgrounds or secondary information, improving accessibility and maintaining a cohesive design.
WEBSITE
How do the adjustments made to the brand guide reflect on the website
Mobile – Menu
The following adjustments were made: the base font size was increased to 16px, and additional spacing was added between the menu items and the search bar to distinguish them as separate elements. Lastly, the clickable area of the buttons was enlarged, and the buttons were rearranged, with red now being the primary color to emphasize the most important action.
Text element
Key words were emphasized for better visibility, making it easier for users to scan the text. Additionally, space between buttons was increased to enlarge clickable targets and improve usability.
Focus block
The label of the button has been adjusted: “Ik help mee” (I help) was confusing for the user as the action after clicking this button was unclear. The updated label now provides more clarity on the user’s action. Additionally, extra spacing was added between the buttons to improve usability and visual clarity.
For more in-depth details about the project, feel free to email me 🙂