Inclusive Graphic Design Principles

The principles of inclusive graphic design, including website design, are based on creating patterns which are as clear as possible. It is helpful to understand this when implementing the long-established rules on accessible design in practice – for example, those found in the W3C AAA website accessibility standard and the NHS Accessible Information Standard. All communications by text and image depend on pattern recognition – on matching the information presented on screen or on the page to the viewer’s existing learned memories of the alphabet and vocabulary. (NB: to communicate with the general public, a reading age of no more than 11 should be used within the text; search ‘Readability’ for online checking tools.)

For some activity organisers, such as people organising raves, pattern recognition difficulties are created deliberately within their graphics, in order to target only their market audience and then to force them to engage actively with the material. For these service providers, the difficulty in understanding their patterns is actually an intrinsic part of their audience’s pattern recognition. For everyone who is targeting a general audience with multiple demands on their time, and who needs their information to be widely read and understood – and for everyone whose work is covered by the Equality Act 2010 and/or the NHS Accessible Information Standard – read on.

People who may have more difficulty recognising the patterns made by letters and words include:

  • People with low or no qualifications. They have the poorest learned memories of the patterns that make up letters and words.
  • People over the age of 40. The ability to focus and to distinguish between light and dark areas of patterns declines with age.
  • People with visual impairments. Visual impairments impact on the ability to focus and to distinguish between light and dark areas.
  • People with visual processing difficulties. This includes people with dyslexia and some people with other learning difficulties. It also includes people whose eyes react more slowly to lighting changes due to their medication or medical condition.
  • People who are accessing information in a language other than their mother tongue. The patterns that they are most familiar with are different, and can also become confused with the patterns they are seeing on the page or screen as their brains try to make sense of them.

Pattern recognition is a very complex task. Anyone who has tried to scan a document using Optical Character Recognition (OCR) software will have seen how even computers struggle with recognising the patterns made by letters and words, particularly unfamiliar ones. Pattern recognition is affected by:

  • The shape of the individual letters. Pattern recognition is reduced to the point where it is impossible for groups with difficulties to read by squashing the shape of a letter through using a ‘condensed’ font; by reducing the size of any spaces in the letter through using a ‘bold’ font; by distorting the shape of the letter through using an ‘italic’ font; or by making unnecessary additions to the shape of the letter through using a ‘serif’ font. The patterns of lower-case letters are also clearer than capital letters, particularly when it comes to reading more than a few words at once, and capital letters are now also associated with shouting and aggression on social media. This is why the use of a sans-serif font such as Arial or Helvetica is recommended, with no use of italic or condensed fonts, and minimal use of bold and capitals.
  • The size of the individual letters. The smaller that a pattern is, the harder it is to see it, and for people who have difficulties in recognising patterns it will be impossible. This is why the minimum font size recommended for use for communicating with the general public is 12pt.
  • The consistency of the individual letters. It is easier to recognise the patterns made by words if all of the components are the same. This is why it is not recommended to mix fonts on the same page or screen. 
  • The way in which letters are put together to make words. Too much space between letters (kerning) reduces pattern recognition, as does too much (or not enough) spacing between lines (leading), and not keeping all of the letters on exactly the same baseline (the x-height must be consistent). This is why standard default font settings are recommended for general use.
  • The position in which letters follow each other. It is much easier for Western readers to recognise patterns if words read from left to right, not from top to bottom. This is why it is not recommended to use vertical type.
  • The placement of words on the page or screen.  Some positions are more powerful than others, and viewers recognise these as such based on their previous experience. This is why it is recommended that designers place headings etc in the places that they would be expected.
  • The numbers of columns of information on a page or screen. The more columns, the more difficult it is to understand the pattern, because in the West we are brought up to read from left to right all the way across the page. This is why no more than 2 columns are recommended for A4 publications, and why website designers are recommended to keep side menus and columns to a minimum. 
  • The contrast between the letters and the background. Pale grey text on a white background is invisible to older people and people with visual impairments. It is also much easier to distinguish a pattern if it is in a dark colour against a light background than if it is in a light colour against a dark background. This is why the World Wide Web Consortium (W3C) and the NHS Accessible Information Standard set contrast standards, and strongly recommend always using black text on a white background. NB: Many templates for products such as Mailchimp, WordPress and Eventbrite are not compliant with these standards and with UK and international law on accessibility. It is the user’s responsibility to ensure that the design they are using is fit for purpose, not, unfortunately, the software manufacturer’s.
  • The clarity of the background. Any screens, images, logos or watermarks behind the text reduces pattern recognition. This is why the recommendations are NOT to include screens, images and watermarks behind text.
  • The glare of the background, which makes it harder to focus. This is why the recommendations are NOT to print information on shiny (‘glossy’) paper. However, online it is best to leave people to turn down their monitors to meet individual preferences and focus on providing the highest possible contrast within the design.

How can images help? Image-based information can supplement, reinforce or replace information in words. If images do not function in this way, they will distract and should not be included.

  • The main functions of most images will be to attract the viewer’s attention, to encourage them to read words, and to help to explain these, so use these functions as criteria when selecting images for use within graphic design.
  • Pattern recognition is important here too, so remember that stylised illustrations will be harder to understand.
  • Outdated images will also reduce pattern recognition. For example, many people will not recognise an illustration of a landline phone as a phone, so won’t understand that the number next to it is a contact telephone number.

This page is currently under construction. Keep visiting for updates.