Accessibility: how and why to be careful with the colors to use
12/05/2010
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 syntaxrgb(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
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.
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?