Colour is a vital feature in web and graphic design. It helps to enhance a website’s aesthetic appeal and convey information. But even more importantly, colour plays a key role in the usability and accessibility of a website. Colour can increase accessibility but when used incorrectly, it can create unnecessary difficulties.
Older people, and those with only partial sight or colour blindness often face difficulties accessing important information, simply because the design of the site or the graphics are not optimised for accessibility.
It is good practice to anticipate the requirements of diverse groups of users. A visual design that accommodates the broadest audience possible is always the best practice in web and graphic design.
The challenge
Designing for those with partial sight or colour deficits, particularly colour blindness, can be challenging. It’s not easy to determine what colours these users can see and how that’s different from people with normal vision.
Colour blind people generally find it hard to distinguish certain colour combinations, which may vary depending on their type of colour blindness. In other words, there are different types of colour blindness and the difference between them is what makes coming up with accessible designs all the more difficult and complex.
Prioritising the design is a good strategy I find works most of the time. The content, and how best to present it, should be the main focus of any design in these circumstances.
When it comes to web page design, fonts, typefaces and colours can actually make some content difficult to read. Therefore, optimising text (font) and colours is the best way to make your design colour-blind safe and friendlier to almost everyone.
So, what works best?
Colours and fonts with distinct contrast offer better readability. Therefore, they work best for people with colour blindness and vision deficiency.
It’s important to note that it is the contrast between colours that makes them either more or less discernible and not actually the individual colours themselves. By contrast here I mean the difference between the darkest colour (foreground e.g. text) and the lightest colour (background).
Colour blind people are less sensitive to colours that fall on either side of the spectrum. For instance, red and blue may appear darker to a colour blind user. Such a deficit can be compensated by increasing the contrast between the foreground (text) and background colours.
In other words, if you lighten the background colours and darken the foreground colours in your design, you will make the contrast between them greater, which in turn increases its visual accessibility.
For example, bright and vibrant colours like orange, yellow or white are suitable for the background, and a darker colour such as blue or black for the text.
There is no single best combination to work with and this is mainly due to the different sight conditions. While some users are comfortable with yellow text on a black or blue background, others may prefer black text with a white background.
The Web Content Accessibility Guidelines 2.0 offers a contrast ratio guideline that designers can utilise to ensure accessibility of their website content. The recommended contrast ratio between text and its background is at least 4.5:1. For large text, that is, 24px or 29px bold, this ratio should drop to 3:1.
What about font?
The choice of font is another very significant issue when it comes to web and graphic design accessibility.
A large percentage of users, especially those whose sight is less strong, have trouble reading small fonts, particularly below 14 points. While for some the barrier lies in the low contrast between text and background.
So, what’s the best approach as far as font and font size is concerned?
Light text (white or light yellow) on a dark background (e.g. black) may be more readable for older users or those who are partially sighted than the traditional dark text on a light background.
This might sound contradicting with my earlier recommendation on colour contrasting, but it’s not. The idea is still the same. That is, to attain the highest possible contrast between text and background colours.
For font size, one thing to keep in mind is that the logical resolution between platforms somewhat differ. Nonetheless, it is recommended to use larger font sizes, preferably at least 16 to 18 points.
The same applies to spacing between lines of text. The majority of partially sighted users have difficulty locating where the next line of text begins while reading. So, a good spacing should be around 25 to 30 per cent of the font size.
In addition to line spacing, text that has close letter spacing often presents difficulties for readers with partial sight. So wide monospaced letters might be legible enough for these readers.
Another thing to consider is the font family. Here, it’s ideal to employ only clear, commonly used fonts. Fonts like Standard Serif, Arial or Sans-Serif are the best, since they are quite legible and easier to read than a font like Times New Roman for instance.
Again, there is no best font type or size, it’s just a matter of striking a good balance that will give all users the best possible experience. One thing to avoid though is using absolute font sizes on your design.
Why bother?
You might wonder why web and graphic designs should be optimised for accessibility for such a small population. Well, those with normal vision are not the only online users. Colour blind, partially sighted and older people could make up to 2 in 20 online visitors.
For a regular site, that extra traffic from this group of users might not be that significant, but for an accessible well-designed website, they are worth considering as another good source of visibility.
And there are other benefits than just an increase in traffic too.
A good accessibility design when done well will also help with search engines rankings. Visually impaired people often use screen readers to read content on web sites. These screen readers function in the same manner as text browsers and most search engines rely on text browsers to review how friendly a site is to all users.
By designing an accessible web site, you make it search engine friendly and easier for search engine robots to crawl, which should lead to higher rankings and that’s an added benefit.
Building a site that’s accessible by everyone is also good practice and both designers as well as developers have a responsibility to ensure that their web and graphic designs take into account all users who wish to view their content.
On top of that, there are standards and guidelines that keeps sites accountable. One of the most crucial web compliance as far as accessibility is concerned is the Web Content Accessibility Guidelines 2.0. It defines a set of accepted international guidelines that web designers and developers should follow to make web content accessible to users with disabilities.
The WCAG has three priority levels in which compliance with the recommendations specified in each level guarantees greater accessibility of web sites. In addition to the three priority levels, there are three levels of conformance that a site must abide to for it to be considered accessible.
All in all, designing inclusively for the widest audience is much more rewarding and should not be taken lightly. It’s important that web and graphic designers realise that you don’t need to compromise the look and feel of a website in order for it to be accessible.
Call + 61 402 636 014 to find out more about our web and graphic design services. You can also get in touch via our contact page, or by sending an email to tadgraphics@t-adstudio.com