Learn more about user experience, web development and digital marketingView training courses

Accessibility

Making sure that text colours in your digital interface are accessible for your users is a really important aspect of a well executed visual design.

If you’ve ever been asked “I assume all the colours are accessible?” by your client and were unsure of what to answer, then this post is for you. The tips below will help you to comply with the W3C guidelines for text and colour so that you’ll always be able to make a confident response of “Of course!”.

Visual design plays a large role in communicating the business’ proposition and personality. When this works well, the design is appealing and appropriate in tone for the audience. Equally important though is making sure that what you’ve designed works for the broadest possible audience. For the subject of this post we’ll consider people with colour-blindness.

Colour blindness – colour and accessibility

Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it, such as a device’s screen and the surrounding environment.

Being inexact we need to select colours that will perform well within a range of environments, e.g. bright or dark lighting environments, and that can be perceived by those with vision perception deficiencies. This should not be under-estimated as roughly 8% of men and 0.5% of women worldwide live some form of colour blindness.

In practice, colourblind people confuse certain ranges of colours, the main challenge being able to detect the difference between certain colours. The colours depend upon the type of colour blindness, however the most common form is the perception of difference between red and green.

The image below shows 2 mugs, one green, the other red. Left: standard vision. Right: how the image is perceived with a form of colour blindness – red and green are almost indestinquishable.

red-green-example

Design with additional visual cues to support meaning

Colour is commonly used to convey information in interfaces. For example:

  • Graphs and charts often rely on colour to differentiate entries
  • Websites are often colour-coded to differentiate sections
  • The active item of a menu is often signified with a stand-out colour
  • Buttons are often coloured to attract attention, or indicate their purpose
  • Forms elements use colour to show focus, correct entry or errors

As demonstrated above, the problem here is that colour alone can not be relied upon to convey difference. If we used the colours alone to indicate something important such as ‘stop’ or ‘go’ – the meaning would be lost as the perceived colour contrast is too low.

The example below show the colours red and green used to indicate meaning: positive and negative percentages and success and error states for forms.

colour forms

Now the same image with Photoshop Colour Blindness filter applied, you can see that it’s the additional visual cues of the up and down arrow for percentages, and the form’s tick and cross supply a second route to convey meaning when colour alone wouldn’t be enough.

colour-forms-filtered

Designing for sufficient colour contrast

The next thing to crack is ensuring that the foreground (text) and background colours you use provide enough contrast to allow colour blind users or those using a monochrome screen to view information.

Firstly: Identify if the text needs to be compliant

Text with meaning will account for most, if not all, of the text on your screen, such as headings, body text, labels, tag, buttons etc. These all convey useful information and need sufficient contrast.

Text as decoration e.g. text that is not intended to be ‘read’ and logotypes (the text that is part of a logo or brand name). These have no minimum contrast requirement. But why would you set your logo with colours that make it unreadable for some of your customers?

Secondly: Define the minimum contrast for each type of text

There are 2 contrast ratios to remember:

  1. 4.5 – 1: For regular weight text under 18pt in size
  2. 3 – 1: For regular text size of 18pt or over and bold weight text under 18pt in size

As you can see the weight of the font you use influences it’s legibility. So also bear in mind that if you like to use lighter weights you should check that your contrast ratio a little higher than 4.5 – 1, to be on the safe size

The image below demonstrates a variety of foreground and background colour combinations. The last 2 examples are particularly hard to read.

Colour-contrast-exampes

Colours can be deceptive

Checking your design in grey scale can be very revealing. Below: The previous image converted to greyscale. Notice how the bottom 2 examples of become completely unreadable.

Colour-contrast-exampes-grey

For further explanation please refer to the W3C guidelines on minimum contrast.

A simple process to guide your visual design decisions

Here’s a whistle-stop journey through a made-up design project.

1. Design in greyscale

The simplest place to start is to design in greyscale, as this focuses the designer to consider layout and visual balance before tackling the subjectiveness of colour. The design should be clear and easy to read, with a thought through text hierarchy in terms of position on the page, size, weight and shade.

Site-A

2. Add colour to your design

Your choice of colours will depend on the look & feel of your brand’s visual identity. This is time for experimentation to get the overall look you want – in this case, bright and vibrant background colours.

Site-B

3. Check your design for contrast

Now it’s time to check if your design meets the mark. You can do this several ways. I tend to look at the design in greyscale once again and see what effect the Photoshop Colour Blindness filter has on the overall design.

Below is the design in greyscale and with the Colour Blindness filter applied.

Site-C-grey-CB-filter

As you can see below – the main offenders are the coloured text boxes and blue link text at the bottom of the layout.

Whereas the 2 buttons (top right) passed the AA compliance test in the Snook Colour Checker, this was because their larger type size required a lower contrast ratio of (3 – 1).

Site-C

4. Adjust your colours

So now you know where the problems lie, it’s time to correct them by optimising your colour choices. We recommend the Snook Colour Contrast Checker Tool. To use it:

  • Enter your text HEX colour reference into the field at the top field of the Foreground Colour box
  • Enter the background colour HEX colour reference into the Background Colour box
  • The contrast ratio and compliance rating is displayed on in the Results box on the right hand
  • If you’re getting ‘NO’ it means that your contrast ratio too low
  • To adjust the colours and find a compliant colour combination, the easiest thing to do adjust the Saturation and Value sliders
  • When you get a ‘YES’ on the line WCAG 2 AA Compliant field you know that you’re on to a winner
  • Copy the HEX values and paste them back into Photoshop to adjust the colours of your elements

snook

After going through the design and making corrections to the non-conforming colour combinations, we arrive at a design which we can confidently state as colour contrast accessible.

Site-D

In summary

It’s not difficult to arrive at an accessible visual design, it just takes a bit of extra time as you refine your design and colour palette. The satisfaction gained from designing inclusively for the widest audience is very rewarding and will put you in a position for when you the client asks that question “Are the colours accessible?”. The answer will be a very confident “Yes!”

Further reading

Types of colour Disabilities

W3C: Contrast (Minimum): Understanding SC 1.4.3

Having immersed myself in the wonderful world of acronyms for a project that I’m working on at the moment, I must say I’ve never felt so passionate about the user experience of using acronyms.

I’ve been asking myself questions and answering them:

1)      What are acronyms?

  • Do they usually just take the first letter of each word it represents? I don’t think so, because some acronyms are invented to make something sound ‘better’ which means letters are thrown into the mix (or omitted) and some are purely the first letters of the words involved.  Also, I realised that acronyms derived from a foreign language wouldn’t follow this rule after you translate them into a different language. For example, CURIA for Court of Justice for the European Union

2)      Why use acronyms?

  • Well that is simple. You don’t have to remember the usually long name that the acronym stands for. I don’t blame anyone for resorting to acronyms (as I realised I have started doing so myself 2 months into the project), but like a double edged sword, acronyms can both help and hinder the communication and understanding of a subject matter.

The use of acronyms is very common in certain disciplines – medicine, law, finance, and engineering just to name a few. In fact, just scouring Google Scholar for a few minutes returned several academic papers criticising the use of acronyms and taught me some new words – ‘acronymania’ and ‘acronymophilia’ to describe the manic use of acronyms; ‘acronymesis’ to emphasise the shortcomings of misusing acronyms.

One of my favourite quotes was from a paper criticising a medical paper which contained 27 acronyms. It nicely sums up why acronyms can sometimes hinder rather than help the communication and understanding of a subject matter:

“Although each acronym is defined when introduced (in the paper), few readers of this article will manage to remember the meaning of each while following the logic of the authors’ discussion. To do so would require immediate comprehension of 27 new terms, each used repeatedly but defined only once before its first use in a detailed, complex argument.”

Apply this scenario to a real conversational context – say a board room meeting with a group of multidisciplinary professionals (gathered together to create a better world). Will the communication during the meeting be as effective as it could have been if everyone actually conveyed exactly what they meant instead of using acronyms? Something to ponder upon perhaps?

Solutions to acronyms?

Surely there are ways to get around the manic use of acronyms where one can still cater for those who are ‘in the know’ as well as people who are ‘new to the field’?

  • Know your audience – if you know you’re speaking to/writing for/communicating with people who wouldn’t necessarily understand the acronyms that you’re using, then use them wisely (e.g. by consciously providing explanations), or if possible, don’t use them at all
  • Utilise the wonders of technology – a potential design solution in helping one to understand/learn acronyms is by displaying the explanations of the acronyms in context
  • Minimise the use of acronyms in general – I believe that using acronyms is the same as using jargon – it implies a closed group of people would only understand those words. It is good to feel like one belongs to a group, but sometimes letting in new ideas can spark innovation.

Next time you’re tempted to use an acronym, try this little exercise and ask yourself how much you have learnt after finding out that:

  • ‘LASER’ stands for Light Amplification by Stimulated Emission of Radiation; or
  • ‘SONAR’ for SOund Navigation And Ranging

and my favourite so far

  • CAPTCHAfor Completely Automated Public Turing test to tell Computers and Humans Apart

Last but not least, an acronym can also mean different things to different people, for example:

  •  A friend of a friend eventually found out that most people understood ‘LOL’ as Laugh Out Loud (not Lots Of Love) after he noticed unusual behaviour whenever he used LOL in his correspondences

The mobile and smartphone markets in the UK are huge, as they are worldwide. In the UK we have more phones than people and of those phones over half are smartphones.

As such, it is no surprise that brands, big and small, have taken particular interest in mCommerce. However a conundrum which has proved a stumbling block for some is:  Should we develop a mobile app, a mobile website or both?

Why do consumers care?

In an article I read recently it was claimed that consumers simply do not care if you have a mobile app or website and that they don’t know the difference anyway, or so it was claimed. I disagree.

Even if the consumer does not know the difference, the choice of whether to download your app or browse the mobile web for your services is a conscious one. In a recent study we carried out to better understand mCommerce we discovered that Apps were great for repeat purposes, checking social media or train timetables. However, if a user was looking for pure information on the spur of the moment, in the majority of cases they would use the mobile web to browse for what they were looking for. Even if the consumer were to download your app for their one off purpose if it does not fit into a routine our study showed that it was soon forgotten and subsequently deleted.

Essentially, you need to decide what you want to offer; what can you supply by way of  service? If your offering is not invaluable to a users daily routine, then a mobile app is not ideal (an exception to this rule might be using apps for one off spurts of brand awareness). If you can’t or don’t want to supply such a service via native apps make sure you have a  website optimised for the mobile web, try responsive design. When it comes to mobile the customer is king – “We no longer get to be the tail that wags the dog”.

Looking to the future

Recently there has been growing debate surrounding the future of native apps and whether HTML5 and responsively designed websites might be their downfall. Indeed, HTML5 can offer app like functionality  in a web browser and best of all their is nothing to download. Skeptical?ft-app1

Some big brands have already taken this step, the Financial Times for example. After developing their web app it quickly overtook their native iOS app in popularity.  It became so popular they no longer offer a native equivalent. Whatever their grievances with Apple would they have made this step if it were not for HTML5? Probably not.

However FT’s approach is in no way indicative of the future of native apps. Will manufacturers like Apple, whose success was arguably founded upon native apps, let them disappear? Nevertheless, I believe there will be a shift towards web apps. According to research from IDC by 2013 there will be more than 1 billion HTML5-capable browsers in use throughout the world. Applications for those HTML5 browsers will be created by 2 million HTML Web developers. The future looks bright for HTML5.

To conclude

Research, a clear idea of what you want to offer, and an in-depth understanding of your target audience are integral to your decision concerning mobile websites and native apps. But, as a general rule, apps repeat purposes, mobile sites single purposes.

As far as the future of native apps is concerned, will they even be around in 5 years? If i were to give any advice it would be not to second guess the mobile market. By all means consider HTML5 and definitely look into responsive design but the mobile market moves too fast to predict, and there can certainly be an element of serendipity in developing your mobile offering.

If you are interested in this topic we are releasing the aforementioned mCommerce report in the coming months, so please keep an eye on Twitter and our website!

On a recent trip out of Victoria Station in the morning rush hour to visit a client, I nearly forgot that my Oyster card doesn’t take me further than the end of the zone map. No bother I thought, I’ll buy a ticket instead. I then proceeded with one of my most frustrating transactions and user experiences of recent memory.

Rail stations generally have replaced most ticket booths with automated touch-screen systems. Whilst being a familiar technology (I have an iPhone), I discovered that the basic implementation of it can have a profound impact on the user experience and should be thought of more carefully when being designed, and there are 3 distinct areas in both the design and maintenance that need to be managed:

1. Touchscreens should work when you touch them, every time.

I proceeded to the ticket machines where I had to queue since it was a busy period. Arriving at a machine I attempted to select the type of ticket I needed. The machine failed to respond at all. I stood there for a minute or more, jabbing and tapping at the screen but to no avail.

Feeling a mix of frustration and embarrassment because I couldn’t work out how to use it, I again queued for the next available machine. I fared little better with this one and began to wonder whether all machines were inoperable – except that some people seemed to be having tickets printed from theirs. A quick glance at the huge queue in the understaffed ticket office persuaded me to continue trying to obtain a ticket via machine. The clock was ticking and my train was due to leave imminently, only adding to the tension I felt.

2. Screens should be clean enough to read them properly

I tried again with another machine, which upon arrival had an additional issue. The screen was smeary, and I imagine it hadn’t been cleaned since it was installed meaning some of the information it displayed was rather difficult to read. I did wonder whether the level of dirt was attributed somehow to my inability to get any of them to work. I doubted it, but by this point I was grasping at straws. I wondered momentarily whether an explanation for my predicament would be a suitable defence for fare evasion.

3. One size doesn’t fit all

So, I crouched down to get a closer look at the screen so I could read the selection buttons for my journey. And then I made an astounding discovery: with my nose less than a few centimetres from the screen, I was able to operate it successfully. Why? Because all the ticket machines had been set at a fixed height and angle which, I presume, is determined as being accessible to everyone. But if you are over 6 foot tall, what might appear to be the correct area of the screen to press from high above actually isn’t, due to the positioning of the screen.

This was a truly ‘eureka’ moment, and one I would never have worked out if I’d possessed a pack of screen wipes. I later recalled that similar machines at Paddington Station, with which I am more familiar, are positioned much higher up (and presumably, therefore, impossible for shorter people or wheelchair users to operate).

Can you design for a standard user?

On reflection, it underlines the fact there is no such thing as a “standard user”. We are all unique, have differing and in some cases conflicting needs. Forcing customers to use automated technology which assumes everyone is the same is unlikely to provide anything other than a frustrating and ignorant customer experience.

What do you think? Have you had any great or bad customer experiences with the ‘standardisation’ of interfaces? Let us know in the comments below!

So Eurogamer Expo has come to a close. Another year, another great show. For those who don’t know, it’s the largest games exhibition in the UK, and was able to boast some very big titles this year (including a few I’m very excited about – not sure how I’m going to find time to play Elder Scrolls 5 – Skyrim, Mass Effect 3, Batman: Arkham City, Assassins Creed Revelations and more).

Headlines included:

  • The official UK launch of OnLive – a cloud based gaming service (more on this later)
  • A launch date for the Knights of the Old Republic MMO

But I should make a special mention to some people we ran into on the show floor – Special Effect (a charity dedicated to helping disabled kids enjoy video games). They were showing off some impressive kit, a vision controlled racing game. Accessibility is one of the services Webcredible offers – and it’s great to see this expanding into games. If anyone is looking for a new charity please bear these guys in mind.

If you’re interested in seeing some of the issues some players can have whilst playing games I can strongly recommend watching a blind player play Oddworld or Zelda – the small techniques used to orientate and understand what’s going on are so interesting. Also have a read of some of the issues colour blind game players encounter.

Were you there? What were your favourite new releases this year? Let us know in the comments below…

Also, we’ll be writing a more in-depth review of the latest Kinect games shown at EuroGamer Expo, discussing the merits of cloud computing, and a look into Facebook game Monstermind  – all coming soon, so keep an eye out on our twitter feed for them!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centered, efficient and delightful digital experiences.

Get in touch on 020 7423 6320