1. Colour Theory Looking at Design & its use in Accessibility Issues Group Members: Rashik Rashik Andy Andy Lee Lee Paul Paul Gareth Gareth

2. My Topic for Discussion What are Primary Colours? What are Primary Colours? What can Primary Colours be used for? What can Primary Colours be used for? What Happens when you mix Primary Colours together? What Happens when you mix Primary Colours together? What are Secondary Colours? What are Secondary Colours? What are Secondary Colours used for? What are Secondary Colours used for?

3. What are Primary Colours? Primary Colours are made out of three main colours which are: Primary Colours are made out of three main colours which are: Red (Magenta), Red (Magenta), Blue (Cyan), Blue (Cyan), Yellow. Yellow. Ref:www.winslow.uk.com/UofA/colsite/prim1.gif

4. What can Primary Colours be used for? Red, blue and yellow are the base colours used for creating secondary colours. They are named primary colours because they cannot be mixed using combinations of other colours. Red, blue and yellow are the base colours used for creating secondary colours. They are named primary colours because they cannot be mixed using combinations of other colours. Ref: www.moonlight-whispers.com/english/tutorials/colors_101.html

5. What Happens when you mix Primary Colours together? When you mix the three of the primary colours together the out come you get is the colour Black. When you mix the three of the primary colours together the out come you get is the colour Black. When you mix an equal amount of Red and Yellow the out come you get is the colour orange. When you mix an equal amount of Red and Yellow the out come you get is the colour orange. When you mix an equal amount of Yellow and Blue the out come you get is the colour green. When you mix an equal amount of Yellow and Blue the out come you get is the colour green. When you mix an equal amount of Blue and Red the out come you get is the colour Purple. When you mix an equal amount of Blue and Red the out come you get is the colour Purple. Orange Equal parts of Red and Yellow Green Equal parts of Yellow and Blue Purple Equal parts of Blue and Red Ref: www.beadville.com/information/tutorials/Basic%20Color/basics.htm

6. What are Secondary Colours? Secondary Colours are an out come of mixing primary colours together. Secondary Colours are an out come of mixing primary colours together. Secondary Colours consume of three main colours: Secondary Colours consume of three main colours: Orange, Green and Purple. Orange, Green and Purple. Orange Equal parts of Red and Yellow Green Equal parts of Yellow and Blue Purple Equal parts of Blue and Red Ref: www.beadville.com/information/tutorials/Basic%20Color/basics.htm

7. What are Secondary Colours used for? Painters and artist use secondary colours by mixing the three main primary colours. Painters and artist use secondary colours by mixing the three main primary colours. Ref: www.webthang.co.uk/Tuts/tuts_graphics/graphics1/1159_Sample_files/image004.jpg

8. Accessibility and Usability Hue, Saturation and Light Hue, Saturation and Light Colour deficiencies Colour deficiencies Usability Usability

9. Hue Hue enables you to identufy basic colours. Hue enables you to identufy basic colours. Most people with colour deficiencies are unable to recognise basic colours. Most people with colour deficiencies are unable to recognise basic colours.

10. Lightness Corresponds to how much light appears to be reflected from a surface in relation to nearby surfaces Corresponds to how much light appears to be reflected from a surface in relation to nearby surfaces An important attribute in making contrast more effective. An important attribute in making contrast more effective. People with colour deficiencies may be unable to recognise the different lightness of colours. People with colour deficiencies may be unable to recognise the different lightness of colours.

11. Saturation The degree of colour intensity associated with colour’s perceptual difference from a white, black or grey of equal lightness. The degree of colour intensity associated with colour’s perceptual difference from a white, black or grey of equal lightness. It is difficult for people with colour deficiencies to distinguish between different saturations of colour. It is difficult for people with colour deficiencies to distinguish between different saturations of colour.

12. Colour deficiencies Colour deficiencies and partial sight result in changes in perception, which reduces the effectiveness of certain colour combinations. Colour deficiencies and partial sight result in changes in perception, which reduces the effectiveness of certain colour combinations. Colours that people with normal vision may see can be significantly different from what people with colour deficiencies may see. Colours that people with normal vision may see can be significantly different from what people with colour deficiencies may see.

13. Three rules for making effective colour choices are: 1. Exaggerate the differences between the lightness of the foreground and background colours. 1. Exaggerate the differences between the lightness of the foreground and background colours. Avoid using colours of similar lightness. Avoid using colours of similar lightness. Visual accessibility will be increased if you make light colours lighter and dark colours darker. Visual accessibility will be increased if you make light colours lighter and dark colours darker.

14. 2. When choosing two colours avoid picking two light colours or two dark colours. 2. When choosing two colours avoid picking two light colours or two dark colours. Avoid picking light colours from the bottom half of the circle against dark colours of the top half. Avoid picking light colours from the bottom half of the circle against dark colours of the top half. For the best effect choose dark colours from the bottom half of the circle against light colours from the top half of the circle. For the best effect choose dark colours from the bottom half of the circle against light colours from the top half of the circle. People with colour deficiencies may not be able to distinguish the lightness of colours in the bottom half of the circle. People with colour deficiencies may not be able to distinguish the lightness of colours in the bottom half of the circle.

15. 3. Avoid using colours next to each other on the colour circle, especially if the colours do not contrast in lightness. 3. Avoid using colours next to each other on the colour circle, especially if the colours do not contrast in lightness. People with colour deficiencies find it difficult to distinguish between similar colours. People with colour deficiencies find it difficult to distinguish between similar colours.

16. Usability Users have come to associate specific colours with certain emotions. Users have come to associate specific colours with certain emotions. Some colours have the same effects on people from all cultures, such as: Some colours have the same effects on people from all cultures, such as: RED – associated with danger, passion and excitement. RED – associated with danger, passion and excitement. YELLOW AND BLACK – suggest danger. YELLOW AND BLACK – suggest danger. Other colours have different meanings in different cultures. In western Europe white is regarded as the colour of purity, cleanliness and innocence. Whereas in China, white is seen as an unlucky colour. Other colours have different meanings in different cultures. In western Europe white is regarded as the colour of purity, cleanliness and innocence. Whereas in China, white is seen as an unlucky colour.

17. Users have also come to associate specific colours with certain actions. Users have also come to associate specific colours with certain actions. Hyperlinks Hyperlinks If you change certain colours that people have come to recognise, you compromise the usability of the web page. If you change certain colours that people have come to recognise, you compromise the usability of the web page.

18. Visually impaired users may not be able to distinguish certain colours. Visually impaired users may not be able to distinguish certain colours. Screen tips - describes images and links etc. Screen tips - describes images and links etc. Asterisks - highlights key information. Asterisks - highlights key information. People who are colour blind will not be able to recognise that the stop sign is green, so will not understand the purpose of the image. People who are colour blind will not be able to recognise that the stop sign is green, so will not understand the purpose of the image.

19. Text needs to be clear and easily readable for most users. Text needs to be clear and easily readable for most users. So using a readable font style, a legible font size and contrasting colours will improve usability. So using a readable font style, a legible font size and contrasting colours will improve usability.

20. Web designs using colour Why colours are used in design. Why colours are used in design. How colours enhance web design. How colours enhance web design.

21. Why colours are used in design Colour communicates. Colour communicates. Makes a website more attractive to view and enhances its popularity. Makes a website more attractive to view and enhances its popularity. Corporate colours used within websites are used to identify them to the public or clients. Corporate colours used within websites are used to identify them to the public or clients. Plain white background with black text isn’t ‘cool’. Plain white background with black text isn’t ‘cool’.

22. Colour Communicates Colour is everywhere, and thus we recognise significant colours more than others. Colour is everywhere, and thus we recognise significant colours more than others. Colours trigger pleasant memories or encounters. Colours trigger pleasant memories or encounters. Red is warm, blue is cool, green is fresh (grassy meadows). Red is warm, blue is cool, green is fresh (grassy meadows).

23. How colours enhance websites Effective use of colour in the design of websites has grown with time and now we are seeing more and more websites trying to encapsulate their target audience with the correct use of colour. Effective use of colour in the design of websites has grown with time and now we are seeing more and more websites trying to encapsulate their target audience with the correct use of colour. Text based sites don’t have the appeal that a colourful display has on the eye eg test based sites can cause the user to strain more to read and understand, whereas colours are recognised internally by ourselves to the point where we are attracted to certain sites more than others due to their colour. Text based sites don’t have the appeal that a colourful display has on the eye eg test based sites can cause the user to strain more to read and understand, whereas colours are recognised internally by ourselves to the point where we are attracted to certain sites more than others due to their colour.

24. Get ready for some colour! www.motiongraphiks.com www.motiongraphiks.com www.motiongraphiks.com www.allmediastudios.com www.allmediastudios.com www.allmediastudios.com www.disney.co.uk www.disney.co.uk www.disney.co.uk

25. Using colour Using colour Colour combinations Colour combinations

26. Using colour How is it used? How is it used? How do we interpret it? – Culturally, age wise, gender. How do we interpret it? – Culturally, age wise, gender. How does it influence us? – Mood and attitude. How does it influence us? – Mood and attitude.

27. Colour in our lives Colour is an integral part of our every day lives. Colour is an integral part of our every day lives. The colours we see during the day play a big part in determining how we feel, and how we communicate with those around us. The colours we see during the day play a big part in determining how we feel, and how we communicate with those around us.

28. How does colour effect us? The different colours used have hidden meanings:- The different colours used have hidden meanings:- Sun flower yellow may reinforce the warmth and cheerfulness of a tropical resort’s site or destroy a law firm’s site by suggesting cowardice. Sun flower yellow may reinforce the warmth and cheerfulness of a tropical resort’s site or destroy a law firm’s site by suggesting cowardice. Red is the colour of fire and blood not associated with serenity or dependability. Red is the colour of fire and blood not associated with serenity or dependability.

29. How does colour effect us? When you look at a website, a bulletin board or a magazine. Your brain firstly reads the colours used, the text and images. When you look at a website, a bulletin board or a magazine. Your brain firstly reads the colours used, the text and images. The colour plays a huge part in determining how you perceive and understand them. The colour plays a huge part in determining how you perceive and understand them. www.wired4success.com/colorsymbolism.htm

30. Colour combinations Use 3 – 5 colour different colours, when planning your website. Use 3 – 5 colour different colours, when planning your website. Background colour – white Background colour – white Body text colour – black or blue Body text colour – black or blue Dominant contrast colour – blue or black. headings borders, deep or soft colours depending on the theme of the website. Dominant contrast colour – blue or black. headings borders, deep or soft colours depending on the theme of the website. www.kestrel-designs.com/articles/colors_websafe.html

31. Colour combinations Use the colours to draw the eyes towards where you want them. Give them a direction using different tones. Use the colours to draw the eyes towards where you want them. Give them a direction using different tones. Remember the “Signal detection” theory. Don’t overload the website with different colours. Remember the “Signal detection” theory. Don’t overload the website with different colours.

32. Colour combinations Colours commonly used by banks:- www.rbs.co.ukwww.rbs.co.uk (Royal bank of Scotland) www.rbs.co.uk www.halifax.co.ukwww.halifax.co.uk (Halifax bank) www.halifax.co.uk www.natwest.comwww.natwest.com (Natwest bank) www.natwest.com

33. Conclusion The subject of colour theory with regards to design, and it’s use in accessibility issues, is quite a large subject to cover. The subject of colour theory with regards to design, and it’s use in accessibility issues, is quite a large subject to cover. What we’ve hoped to have done for you today is give an insight into colour theory, accessibility, and the use of colour in website design. What we’ve hoped to have done for you today is give an insight into colour theory, accessibility, and the use of colour in website design.

34. Bibliography Websites:- www.colourmatters.com www.cox-internet.com www.kestrel-designs.com www.wired4success.com www.rbs.co.uk www.halifax.co.uk www.natwest.com Book – Colour by Edith Anderson Feinser

35. Bibliography www.colormatters.com www.colormatters.com www.colormatters.com www.benefit-from-it.com www.benefit-from-it.com www.benefit-from-it.com www.mcu.org.uk www.mcu.org.uk www.mcu.org.uk www.lighthouse.org www.lighthouse.org www.lighthouse.org www.lois.co.uk www.lois.co.uk www.lois.co.uk www.disney.co.uk www.disney.co.uk www.disney.co.uk www.motiongraphiks.com www.motiongraphiks.com www.motiongraphiks.com www.allmediastudios.com www.allmediastudios.com www.allmediastudios.com www.coolhomepages.com www.coolhomepages.com www.coolhomepages.com www.sitepoint.com www.sitepoint.com www.sitepoint.com