css: why is **color:red** deprecated?

Question

in the page http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-colors they say that stuff like color:red is deprecated? but i'm sure I've seen many websites using these styles. does anyone know what's the reason for them being deprecated?

Answer 1

The language in the WCAG 10 guidelines is misleading - named colors are not deprecated in CSS2 or CSS3.

In addition, the recommendation is not included in the latest WCAG Guidelines (2.0).

To my mind, the use of depecrated in WCAG 10 should actually be replaced with not recommended. Even then, the stated goal with this recommendation is to "Ensure that foreground and background color combinations provide sufficient contrast..", but using RGB does not help to meet this goal in any way.

There is no reason not to use the 16 color names defined in the CSS3 specification:

Color name  Hex rgb     Decimal
black   #000000     0,0,0
silver  #C0C0C0     192,192,192
gray    #808080     128,128,128
white   #FFFFFF     255,255,255
maroon  #800000     128,0,0
red         #FF0000     255,0,0
purple  #800080     128,0,128
fuchsia #FF00FF     255,0,255
green   #008000     0,128,0
lime    #00FF00     0,255,0
olive   #808000     128,128,0
yellow  #FFFF00     255,255,0
navy    #000080     0,0,128
blue    #0000FF     0,0,255
teal    #008080     0,128,128
aqua    #00FFFF     0,255,255

Interestingly, orange was available in the CSS2 specification, but is not included as one of the base colors in the CSS3 specification.

Update The SVG 1.0 specification defined an additional 147 colors in 2001 - and all major browsers adopted them and implement them consistently. These named colors have now been included in the CSS3 specification as "extended color keywords", so they are now official CSS.

Now that these named colors are official CSS, I'd say that it's definitely safe to use them and you can recommend their use to others - in practice, it's been this way for a long time.

Answer 2

Probably because the CSS named colors is inconsistent between browsers. It'd be better to use color: #F00; as it will display the same in almost every browser, whereas color: magenta; may vary widely or not work at all.