Menu

Jeth Ordeniza

Interaction Designer

The user-driven development of RNIB's yellow mode

Related post categories Innovation Digital products Research & design Charity & non-profit
3 mins read

In 2022 we launched the Royal National Institute of Blind People’s (RNIB) new website on Wagtail CMS. As a champion of accessibility, RNIB wanted to ensure that it’s own website was as accessible as possible to people with sight loss. In the first release, we included a “dark mode” version of the site, as our user research had identified this would make the website more accessible to more people with sight loss.

As part of our ongoing collaboration, we recently introduced a new yellow mode to add to the existing light and dark modes. This high-contrast, reduced-glare background significantly improves legibility and accessibility for people with certain types of sight conditions.

This blog provides insights into our journey of creative challenges and extensive user testing.

Screenshots of the RNIB website showing its main sections, in the yellow mode. The page includes their logo, navigation menu, and key sections about helping people with sight loss. Content includes a 'Be Helpful guide' download option, campaign information about seeing beyond sight loss, and three main support categories: cost of living, community connection, and living with sight loss.

Screenshots of the RNIB website displaying its yellow mode on both mobile and desktop versions.

Our initial exploration into yellow mode was inspired by RNIB's earlier work with Google and The Guardian on the accessible storytelling site Auditorial, which features a number of different colour modes to suit different people's needs. We felt this was a great opportunity for experimentation to see if we could learn from that work, and make the RNIB site even more accessible.

Firstly, we had questions that we needed to answer to meet our end goal of making the new display mode genuinely beneficial such as:

“What are the most common colour combinations that will help make the website more readable?”

“What are the guidelines for creating an effective yellow mode?”

“What shades of yellow are best for eye comfort?”

“How can we ensure that yellow mode seamlessly integrates with the website’s existing elements?”

Since information on how to design in yellow mode was hard to come by, it was essential to test the prototype with real audiences with sight loss.

User feedback uncovered issues with our initial selection of yellow tints as background colours. The transitions between lighter and darker tints were causing eye strain for many test participants.

After presenting more options to the RNIB team and further user testing, we settled on a desaturated, subtle yellow tint, informed by critical user feedback.

A side-by-side comparison of the old and current tinted backgrounds, the text reads: We are leading the creation of an accessible world. A world where everyone can participate equally is a better world for everyone.

A side-by-side comparison of the old and current tinted backgrounds: the upper left image shows the old, lighter background, while the lower right image displays the darker, desaturated background we chose.

From this experience, there were a few key learnings:

  • Go beyond compliance
    Should you aim to meet WCAG accessibility guidelines? Absolutely—but that doesn’t mean we should stop there. Our research demonstrated the importance of exceeding basic standards to truly meet users' needs.

  • Value user testing and expert insight
    User feedback and the guidance of the accessibility experts from Torchbox and RNIB were key to the success of this project. Every insight helped refine the design process and enhance the effectiveness of yellow mode.

  • Design is a continual process
    Our work doesn’t end when a project is completed. Design will always need to be revisited and updated as technology advances, accessibility guidelines evolve, and aesthetics shift. That’s why we’re committed to an iterative, human-centred design approach to ensure our websites are usable and accessible for everyone.

Our collaboration with RNIB resulted in an innovative yellow mode, which further enhances website accessibility and inclusivity. This unique feature reflects RNIB’s commitment to constant improvement, a vision we’re proud to share and support.

For more details and to see yellow mode in action, visit RNIB’s website.

We can help you to ensure that your website is accessible to all users and that your message reaches everyone who needs it.

Get in touch

More