Use HTML attributes, or CSS to set web page colours, but don’t use both
Published: October 23, 2014
Use HTML attributes, or CSS to set web page colors, but don’t use a mixture of both.
For example, if you set the background colour in a table cell to black using an HTML attribute (e.g. bgcolor=”#000000″), and used CSS to create contrasting white text (style =”color: #FFFFFF”).
Your page will look fine and you will be happy until you get emails from users surfing with style sheets off (or those using browsers that don’t support style sheets). Those visitors won’t be able to read your text.
I haven’t come across anyone yet who can read black text on a black background.
Check colour contrast by creating a greyscale image of your web page
Published: August 19, 2014
This very simple tip will help you to check whether the colours you have chosen for your web pages have adequate contrast.
Take a screen shot of one of your web pages, and open it up in an image editing program (e.g., Photoshop). Desaturate the image to remove all colour so that you end up with a greyscale image.
Viewing the page as a set of contrasting grey areas makes it much easier to see whether, for example, there is sufficient contrast between the background colour and text. I was reminded of this tip while reading the Techdis article Colour and Contrast Accessibility Issues: for the design of e-learning materials by EA Draffan and Peter Rainger.
Don’t rely on colour alone to provide important information
When creating a web form don’t write, ‘the fields with a red dot next to them are compulsory, those with a green dot are optional.’ This statement will be of no use to people who are colour blind, or those using grey-scale monitors, or those using screen readers.
Requiring users to differentiate between colours to access important information can lead to problems. An example would be a navigation button that has red text on a green background, as people who have difficulty differentiating between red and green (the most common kind of colour blindness) will have a hard time trying to navigate the site.
The main colour combinations to avoid for people who are colour blind:
Red/green combinations (memory aid: red berries against green leaves on a tree)
Blue yellow combinations (memory aid: yellow daffodils against a blue sky)
‘The Institute for Dynamic Educational Advancement (IDEA) and Brandeis University’ provide some useful information about colour blindness.
The Institute for Dynamic Educational Advancement (IDEA).
Understanding colour contrast and accessibility
Published: August 8, 2014
Colour – in terms of accessibility – is one of the areas I find hardest to understand; I can read a sentence like,
‘avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.’ (from https://www.lighthouseguild.org/)
And be as confused after I’ve read it as I was before.
I guess that is because – not having done a course on colour theory – I’m thrown by the jargon. In this weeks tip, I will define the words hue, lightness and saturation, and, having figured out what they mean – try to understand the above tip. Bear in mind that with these definitions I am simplifying as much as I can.
This is the easy one – just substitute the word ‘colour’ for the word hue and you have the meaning.
How much light does the colour reflect: black doesn’t reflect much, white reflects lots. Colours thus appear light or dark; how light or dark they are – tells you their ‘lightness’.
The purity of the colour – saturated colours contain no white, grey, black or complementary colours.
Ok – so now I’ll put the tip from the Lighthouse website into words I understand:
Even when using different colours next to one another (e.g. text and a background colour), if they are similarly light or similarly dark there will still be accessibility issues for some users.
Phew – perhaps this ‘colour business’ is not as impenetrable as I thought.