HTML and CSS Reference
In-Depth Information
Color Use
Web content must be accessible without the ability of sensory perception required for recognizing locations, shapes,
sizes, or sounds.
Justified text aligned to both the left and right margins can be hard to read for people with certain cognitive
disabilities. Consequently, text aligned to one side only contributes to the highest level of accessibility. If it is not
feasible due to layout purposes, a mechanism may be added to remove full justification upon request.
If users are allowed to use the default colors of their browsers, that is, no background color, text color, or text
background color is specified by CSS rules, users with vision disabilities can override certain colors that they have
trouble seeing. This technique guarantees text readability presented over a background. It is allowed to specify
container layout and border colors, though.
A cross-browser color selector solution may be applied that allows users to change the foreground and
background colors of text sections.
The text-background contrast ratio should be 4.5:1 to achieve AA conformance (3:1 for large text) and may be a
minimum of 7:1 (4.5 for large text) for AAA conformance (including images of text). A high-contrast control should
always be provided that allows users to switch to a presentation with sufficient contrast. You can easily calculate the
contrast ratio between arbitrarily selected colors by considering the differences in luminosity.
The relative luminance is defined by the WCAG 2.0 specification as “the relative brightness of any point in a
colorspace, normalized to 0 for darkest black and 1 for lightest white.” In case of the sRGB color space, the relative
luminance of a color is defined as L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where the R, G, and B components are
defined as follows [29]:
24
.
R
R sRGB
R sRGB
0 055
1 055
+
.
æ
ç
ö
÷
R
=
255 If R sRGB £ 0 03928
8
bit
.
then R
= 12 92
else R
=
sRGB
.
.
24
.
G
G sRGB
G sRGB
0 055
1 055
+
.
æ
ç
ö
÷
G
=
255 If G sRGB £ 0 03928
8
bit
.
then G
= 12 92
else G
=
sRGB
.
.
24
.
B
B sRGB
B sRGB
0 055
1 055
+
.
æ
ç
ö
÷
B
=
255 If B sRGB £ 0 03928
8
bit
.
then B
= 12 92
else B
=
sRGB
.
.
If you don't want to calculate the color contrast, there are many useful tools that can check it for you, for example
the WebAIM Color Contrast Checker [30], the Luminosity Colour Contrast Ratio Analyser of Juicy Studio [31], or the
Luminosity Contrast Ratio Analyser 1.1 of WAT-C [32].
Information expressed in colors must also be available and perceivable without colors. Additional visual cues
must be available when text color differences are used to convey information. Semantic markup must be added
whenever color cues are used to convey information.
An optional multicolor selection tool added to pages to change the foreground and background colors arbitrarily
allows users to specify colors according to their personal preference (Figure 10-4 ).
 
 
Search WWH ::




Custom Search