Accessibility: how and why to be careful with the colors to use

In the previous articles, of the series “Why typographically thinking ruins your site” we already talked about taking in consideration the possible personalization of a website from the user and the standard font , leaving out although a very important issue: the colors.

If you’re one of those people that approaches web graphics without a minimum bases, surely every time that you had to set a document on whatever type of  graphic software, you’ve found yourself facing the “dilemma of the colours”: CYMK OR RGB?

On the other hand , if you’re a graphic with experience in publishing, you probably had to fight against your usual habits and against your head that works in pantons

Colors

RGB colors are used on the web, that  can be selected through the CSS language in many ways: key words, hexadecimal codes, percentage and RGB values.

Key words

For key word we intend the definition of the color through its name, in English.

For example: “black”, “white”, “red”, “green”… The specifications of  the HTML 4.01 standard indicate 16 colors recognized by their name, but mostly all the  modern browsers (released after 2005) recognize a larger list of colors, part of the standard SVG 1.0 . From this list called X11, there’re 145 colors with names like “gold”, “snow”, “tomato”…
This method is the one I recommend you less as it is easy to make spelling mistakes, considering that we’re dealing with words that sometimes are long and compound (like “lightgoldenrodyellow”).  There’re ways much more easier, so better take advantage of it!

Hexadecimal code

The hex code is a combination of three pairs of characters from the  00  pair to the FF pair, from black to white (or rather: from the absence of light to the presence of it in the channel), where the first pair indicates the red color, the second green and the third blue, preceded by the #symbol (hash): for example  #000000 is black, #FFFFFF is white, #0000FF is blue and #FF0000 is red. If the three pairs are formed each by two identical values they can summed up in three characters, for example:  #FF99AA is equal to #F9A: different is the case of the pairs that are identical, like #5F5f%f or #0C0C0C: these can’t be summarized   (but they both indicate a shade of gray). I think that this is the best method as it is easier and faster to write.

Percentage

The percentage asks us to specify the value as a percentage of red,  green and blue according to this syntax rgb(100%,100%,100%). Like for the hex code the 0% indicates the absence of light in the channel and 100%  the maximum light, therefore all the values of 0% show the black color and on the contrary all the values of 100% white.

RGB values

Similar to the percentage, the RGB values are written according to the syntax rgb(255,255,255), the possible values are from 0 to 255 and also in this case the 0 is black and  the 255 is white.

How to use colors

According to the guidelines WCAG 2.0 (punto 1.4.1) of W3C, you must  use combinations of colors that are accessible even for color-blind people. W3C also shows some  specific techniques to respond to the recommendations:

  • ensure that the information identified  through the use of colors is identifiable also with an alternative text;
  • if the color is the only method used for the differences between focus on links or controls and the surrounding text  you must use a contrast of 3:1 between the elements (examples), to choose the pairs of colors I recommend you this tool;
  • use the CSS to change the presentation of an element when these receive the focus.

Colour-blindness is much more widespread than you think, unfortunately focalizing our attention on this is useless: many sites are hard to consult even for those who have a perfect sight, let’s see why.

Matches, contrasts and readability

esempio di testo rosso su sfondo nero

There are many ways to make mistakes, for example writing in “negative”, using a dark background and a bright color for the text, one of the worst combinations is red on black.

Things like this are suitable only for very short paragraphs (otherwise eyes get tired), while if a long text is the most important thing in your site, it’s better if it’s in positive… even if, according to an experimental research (Hill & Scharf 1999), the glossy white of the screen isn’t a good background like it is for the printed paper, unless it is accompanied by letters not too subtle: it’s better to use a grey color or another light color for the background; for the record, the most immediate response was given by the combination green text on a yellow background.

Other results of this study recommend not to use pairs of  saturated complementary colors such as yellow/purple, orange/blue and especially green/red, for the question of color-blindness and also because these colors have the same frequency (alias little contrast) therefore the eye has difficulty in distinguishing them. Hill also suggests to avoid combining more than two colors.

Esempio di testo grigio chiaro su grigio scuro

The combinations that we have branded so far as negative, are also a bit anti-aesthetic, so you probably never thought to use them, but perhaps you think that a light gray on a white background is elegant… or a medium gray on a darker gray background? Or any other color on a lighter/darker version of itself?

Surely you’ve seen sites of web designers with these combinations, at first sight they surely make their “awesome figure”: elegant, light, with that smooth contrast between text and background, not at all clear. But did you ever tried to read? Or better …did you managed to do it? I must say that sometimes I really had to strain, often giving up, wondering who could hire a web designer like that… for no other reason, just for the difficulty in reading his number or his e-mail!

The web-safe myth

There’s a limited palette of  colors, called web-safe and made of  216 colors and there are rumours saying that these are the colors used in the same way by all the computers (especially by win/mac): this isn’t true. This palette, so reduced, was standard when the computers/monitors at 256 colors were the norm (or at least fairly common): according to the W3schools statistics up to 2000 they were 12% widespread, while in 2010 there was a 0% against 97% of the 16 millions of colors  and  3% of the 65.000 (to be clear, the screens of some of the smartphones in 2003). W3schools also states that the standard web-safe color is no longer important, since most all computers support millions of colors.

Moreover the screen visualization of the colors, between a monitor and another, differs starting from the device settings, from the installed operating system (with its settings), from the brand and model, therefore it’s almost impossible that every user sees the color you want.

Conclusions

We saw several ways to set colors and some tips to choose the best  combinations and above all we saw the worst ones in order to avoid them. Like me, you well know that every project is unique, but you surely have a favourite pair of colors or shades, which one is your favourite?  And what method do you use to select the color in CSS, why?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Passionate and professional web-designer, she knows deeply (x)HTML/CSS, loves to experiment PHP & js scripts and is always ready to learn new practices and techniques. She prefers a sober design for web-sites, with particular attention on usability and accessibility, moreover on what is under the shell: the code, strictly standard.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

Trackback e pingback

  1. Tweets that mention Accessibility: how and why to be careful with the colors to use | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News and V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: …
  2. Accessibility: how and why to be careful with the colors to use | WebDevKungfu
    [...] Accessibility: How and Why to be Careful with the Colors to Use [...]
  3. Tweet-Parade (no.10 Mar 2011) | gonzoblog.nl
    [...] Accessibility: how and why to be careful with the colors to use – In the previous articles, of the …

Leave a Reply

Current month ye@r day *