Why Does Low Contrast Text Suck?
Much of the information we glean from a website is in the form of letters, words, sentences and paragraphs carefully crafted to communicate how the site can help visitors complete a task or achieve a goal.
This is normally assisted by the use of high contrast fonts and typefaces that make the text clear and legible. However, sometimes for various reasons designers use more complex and/or dark backgrounds with non-white fonts which are more difficult to read. Low contrast designs are certainly popular in certain sectors such as gaming.
Disrupts User Flow:
Psychologists have noticed that making copy more difficult to read disrupts the mental flow that characterizes most of our thinking. To understand if this affects how people think and behave the psychologist Daniel Kahneman conducted an experiment using brain teasers that form the Cognitive Reflection Test. The questions are designed to encourage an immediate but incorrect answer that appeals to our fast, intuitive brain that we rely on for most of our daily decisions.
One of the questions is the bat and ball question below.
Don’t try and calculate the answer, just say what first comes to mind.
A bat and a ball cost $1.10 in total. The bat costs $1 more than the ball? How much does the ball cost?
The intuitive answer that the majority of people respond with is 10 cents, but this is wrong as that would make the total cost $1.20, not $1.10 as outlined in the question. The correct answer is 5 cents, but a majority of us arrive at 10 cents because we use our fast, intuitive brain most of the time as this conserves mental resources for more complex and difficult decisions. Indeed, over 50% of students at MIT, Princeton and other top US universities also incorrectly answered the question with 5 cents as their response.
What Kahneman found was that when the questions were printed in a less fluent small, italicised, and grey font only a third of people got at least one question wrong compared to 90% of those who were given the test paper in a normal fluent print. The psychologist Adam Alter replicated these findings and found the same affect with complex logic problems. People were again more likely to accurately answer logic questions when they were printed in a disfluent font.
“Complex fonts that populate modern environments function like an alarm, signalling that we need to recruit additional mental resources to overcome that sense of difficulty.” Adam Alter. Assistant Professor of Marketing and Psychology at New York University’s Stern School of Business
Alarm Bells Ring:
As well as making us think more deeply, less fluent copy leads
to more conservative behaviour as it warns our brain that the environment is potentially risky and dangerous. This conclusion was supported by analysis of posts submitted to the website Grouphug.us. The site allows visitors to share anonymous confessions with people and obtain feedback from other visitors to the site.
Up to August 2008 the website was quite disfluent with grey text and a dark saturated background. However, in August 2008 a decision was made to change the colour scheme of the site to the more fluent black text on a white background. Cognitive psychologist Danny Oppenheimer and Adam Alter discovered that following the change visitors were submitting increasingly more frank and revealing confessions.
Other studies that Alter has undertaken have confirmed the same phenomenon. What this suggests is that the same cognitive alarms that dissuade people from being honest about past transgressions also raise concerns about immorality. People are more judgemental and critical of offensive or immoral behaviour when communicated using disfluent formats. When identical behaviour was described
using fluent copy people rated such incidents as much less morally offensive.
Usability research supports these findings as they have demonstrated that people don’t read they scan text on websites. To scan quickly people rely on recognising word and character shapes rather than consciously processing each letter and the order in which it appears. Low contrast text disrupts this strategy and creates cognitive strain by forcing people to slow down and analyse each letter as the shape may not be instantly recognisable. Low
contrasts sites therefore suffer because:
Legibility is sub-optimal: Visitors experience eye strain as they try to process the words and as we have already discovered people are less trusting of copy that is hard to read. You can test your website for contrast using a Google plug-in.
Try reading this promotional page on the PokerStars.com app and it will give you a headache.
Source: PokerStars.com mobile app.
Conversion suffers: If an asset is difficult to see, especially if it is positioned in an unconventional location on the page, users are going to struggle to notice it and therefore will not interact with the
element. This is a known conversion killer.
When people struggle to notice or read text on a website this can reduce their confidence about the site and hinder their chances of completing tasks they set out to achieve. Lack of confidence in a site though will increase the chance that a user will abandon your site and go to a competitor’s site instead.
Accessibility is reduced:
Poor contrast text severely affects visitors with low vision or
cognitive impairments. Our vision declines with age and many people have some kind of vision impairment. Further, cognitive conditions that affect short-term memory (e.g. dyslexia) and our ability to focus our attention (e.g. ADHD) also make low contrast text very difficult to process.
Mobile visitors get frustrated: When a user is on the move even high-contrast text can be difficult to read on a mobile device when the sun is shining, but with low contrast-text it can become practically impossible. Here is a page from the Betfairpoker app which has a progress indicator that has such poor contrast it is difficult to tell whether it is working or if no progress has been made.
Increasing cognitive strain:
When we are unsure about how to interpret a web page this creates
uncertainty and anxiety which slows down decision making. As inactive features are by convention greyed out or dimmed, low-contrast colour schemes can give users the wrong message about the availability of a feature.
Don’t let low contrast designs kill conversion:
The evidence is pretty conclusive, low contrast environments
may create a mysterious and dark atmosphere, but they also interfere with the brain’s natural processing strategies and influence our behaviour to the detriment of many website’s goals. If you
have inherited a low-contrast site try A/B testing high-contrast designs to see if engagement and conversion improves.
Challenge inane excuses such as ‘it conforms to our brand values’ and use evidence instead to improve the user experience and conversion. Don’t accept the status-quo as all too often it has no scientific basis and is frequently the result of copying the competition.
Thank you for reading my post. If you have found it useful please share using the social media icons below or at the top of this post.
You can view my full Digital Marketing and Optimization Toolbox here.
To browse links to all my posts on one page please click here.
- About the author: Neal provides digital optimisation consultancy services and has worked for brands such as Deezer.com, Foxybingo.com, Very.co.uk and partypoker.com. He identifies areas for improvement using a combination of approaches including web analytics, heuristic analysis, customer journey mapping, usability testing, and Voice of Customer feedback. By aligning each stage of the customer journey with the organisation’s business goals this helps to improve conversion rates and revenues significantly as almost all websites benefit from a review of customer touch points and user journeys.
- Neal has had articles published on website optimisation on Usabilla.com and as an ex-research and insight manager on the GreenBook Blog research website. If you wish to contact Neal please send an email to email@example.com. You can follow Neal on Twitter @northresearch and view his LinkedIn profile.