“Accessibility means that we want to have a website that is barrier free.”
This article is 763 words and a three-minute read.
On the road towards realising the European Cancer Info Portal we are currently developing its future “look and feel”. This is a crucial step to build an accessible portal without barriers. An early sense of the portal’s look can be seen in a restyled EU-CiP project website that uses the new font in the body text and colours in the logo, headings and images.
This style concept was developed by the design agency VALID in collaboration with our project partner DKFZ. Listen to a conversation between Susanne Weg-Remers (DKFZ) and Christina Rösler (VALID) who discuss the meaning of colour and font for an accessible, barrier free, website as part of our “How to build a portal” series.
Behind the visuals
Presenting information on the final, digital portal as accessible as possible, is one of our main priorities and strongly influences the design choices for the website. Communicating accessible content works on multiple levels. The foundation are texts written in easy-to-understand language accompanied by graphics and videos that break down complex processes.
A second layer addresses the visual presentation of the content. Picking colour combinations that are pleasing to the eye is not enough. For easy and inclusive access, colours and fonts are carefully chosen to achieve high readability, as Susanne explains:
“Colours and fonts are basically the main tools to communicate clearly and to have a modern look and feel. We needed to carefully think which colours and fonts best transport our messages and information.”
Colour combinations, e.g., for texts and background colour need to be tested for sufficient contrast to not impair readability (image below). Having a large set of possible combination gives more flexibility for displaying texts and generating multimedia content (e.g. explanatory videos and graphics).
The same is true for fonts and font combinations. Font characteristics like character height or spacing between characters can strongly influence how easily words can be read and distinguished by the human eye.
Fonts for language
In addition, many fonts have limited special characters they can display properly. This is important as the portal will display content in multiple European languages. Lithuanian – the language of our pilot country where the first portal will be going online – demonstrates why this is a crucial aspect.
Lithuanian contains unique characters that are not present in other alphabets. Lithuanian Ą, Č, Ė, Ę, Į, Š, Ų, Ū and Ž represent vowel lengths and consonant sounds essential for the meaning of a word. If these characters cannot be displayed properly on the portal, it could change the meaning of the carefully written medical information. This could have severe consequences for patients and their families who rely on the accuracy of the medical information on the portal.
The new colours and font of EU-CiP
In the EU-CiP project, we are currently building the first prototype of the portal to test and validate how sample content can be added and displayed. During this process, the design agency VALID collaborated with the DKFZ cancer information service team to develop a style guide for the future portal. To create a consistent look and feel, we now updated our project brand colours to match the style of the coming portal.
The design agency used the colours of the current website as a basis but reduced the grey tones to make the colours fresher and more distinguishable. An additional new highlight colour (bright purple) allows for colour accents in the design of the portal. All brand colour combinations were tested for contrast (coloured text on coloured background) to check which combinations provide enough contrast to be accessible and which need to be avoided.
In addition to the colours, a new font was chosen for the portal: Inter. A Sans-Serif font, Inter is highly legible, versatile and contains a very broad character set. As Inter covers all Western European, Central European and Southeastern European languages, including Lithuanian, Maltese and Romanian, this ensures that characters in these languages are displayed properly. In total, Inter covers more than 140 languages.
Finding a style that ensures accessibility is one more important step towards the portal. Stay tuned for more project updates here on our website and on our socials (@cancerinforportal).
More information
The “How to build a portal” playlist.
