Contrast negotiations – How our digital product designers are tackling web accessibility

Web accessibility is the practice of removing barriers that prevent interaction with websites by people with disabilities. If sites are correctly designed, all users should have equal access to information and functionality. We caught up with Daniel Riemer, head of our Digital Corporate Design team, to discuss how trivago is working towards full accessibility on all of our GUIs (Graphical User Interfaces).

Life at trivago: Hi Daniel! The term accessibility is a very hot topic in the design world. To the uninformed, what does it mean exactly?

Daniel Riemer: Indeed it is a hot topic. Finally, web accessibility seems to be taken seriously in the industry, and that’s a big deal! Simply put, web accessibility allows people with disabilities to use, or more specifically, lets them perceive, understand, navigate and interact with the web and contribute to it. It ensures that everybody can use the internet, which is of course in our own best interest.

Lat: Well that seems a pretty important topic! What kinds of disabilities have to be taken into account?

DR: Highly important, because, what disabilities do we as digital designers actually have to cater for? It’s way more than you would assume. Aside from severe disabilities, think of people with “temporary disabilities” that could be physical or environmental; a broken arm, a slow internet connection, a noisy environment, or decreasing abilities caused by ageing. All this can affect an individual’s experience of interacting with a website or app.

Lat: The trivago site seems quite minimal and clean, what were the issues affecting accessibility, and how did you locate and determine what needed to change?

DR: To ensure the trivago website is perfectly usable under any of these circumstances, we conducted a comprehensive accessibility audit at the beginning of this year to identify potential issues. It turned out, we are doing quite good, but there was still room for improvement: We found insufficient colour contrasts, as well as some missing keyboard navigation.

Lat: Wow, sounds like a very deep audit. How did you then tackle these issues?

DR: So, in order to comply with the Web Content Accessibility Guidelines (WCAG) we initiated some major changes on both design and frontend side to improve the accessibility and help people with difficulties to see, hear, control or process information enjoy our products as much as anyone else does.

Lat: Any one particular example?

DR: One exemplary issue we found during the audit was the insufficient colour contrast of our ‘View Deal’ button. As this button enables our users to proceed towards a booking with one of our partners, it is probably the most critical interaction on our hotel search. With its white text and light-green background, visually impaired web users might struggle to read the label. That’s why we decided to update our primary brand colour palette, and more specifically the green shades of it. After defining our objectives we explored several potential alternatives before arriving at our goal of keeping the same warm and friendly character of the colour, whilst still complying with WCAG standards. In reaching at least neutral a/b-test results for our main KPIs, we could again make one more step towards improving our digital products and communication channels with a user-centric approach.

Lat: Thanks for the insights Daniel. Fascinating stuff and glad to hear we’re doing our part in making the web a more accessible place for all!

Lee Jones
Lee Jones

Lee Jones is a Conceptual Copywriter and Employer Branding Specialist at trivago.

Related posts