Home Layout and colour paradigms
Layout and colour paradigms
Accessibility
It is important that a website or mobile app can be used by as many people as
[Link] is a wide range of impairments that might make it difficult to access
content, such as:
visual impairment
motor difficulties
cognitive impairments or learning disabilities
deafness or impaired hearing
Creators of content, and in particular the user interface, need to ensure that it can be
accessed by people who may have particular needs. The World Wide Web Consortium
publishes Web Content Accessibility Guidelines — a specification of how this should be
achieved for web content. In the UK, public sector and public-funded organisations are
required to ensure that their websites and apps comply with the Public Sector Bodies
(Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. Charities are
also covered by the legislation, so Isaac Computer Science also conforms to these
guidelines!
Cultural implications
Different cultures have different expectations of digital content. For example, in the UK we
are used to web pages being laid out in a 'left to right' style because English is read from
left to right. However, in countries where language is read in a different direction, this
might require the layout of a web page to look entirely different. Take a look at this
screenshot of a Wikipedia page in Hebrew. To an English-language speaker, the layout
may appear to be mirrored, compared to web pages written in English.
Figure 1: Wikipedia page in Hebrew
Hidro CC-BY-SA 3.0 via Wikimedia commons
Colour can also have other meanings and implications across different cultures. In
western countries, red often signifies danger or warning. However, in China and other
South East Asian countries, red is a symbol of good luck; red envelopes containing
money are distributed on holidays and special occasions. So if you use the colour red in
your GUI to signify a warning message, this could be confusing depending on who is
using the software.
Figure 2: Red envelope containing money
Jpquidores CC BY-SA via Wikimedia commons
Colour palettes
Using colour to convey meaning on a user interface is inadvisable. It can cause difficulties
for users with colour vision deficiency (sometimes called colour blindness) who find it
difficult to distinguish between certain colours.
Figure 3: Many people with colour vision deficiency cannot find the number 74 in this
image
Unknown author / Public domain (via Wikimedia commons )
Developers are encouraged to choose a colour palette that is accessible to all users. This
usually means that there must be sufficient contrast between the colours so that most
users will be able to tell the difference between colours. Anywhere that colour is used to
convey meaning, such as a button on the interface or within a diagram, should also use
another means to distinguish that meaning. For example, a button could also have text or
an icon, and an image could use patterns as well as colours to allow users with colour
vision deficiency to tell the difference.
Figure 4: An image conveying meaning that uses both colour and pattern
Some people, for example those with dyslexia or limited vision, may also find it easier to
use a computer system or website if it is possible to alter the colours in which it is
displayed. For this reason, applications and websites can offer an alternate high contrast
colour scheme, or allow the user to modify the colours directly to their own preference.
All teaching materials on this site are available under the Open Government Licence v3.0, except where otherwise stated.