-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathday_12_using_color_safely.html
executable file
·178 lines (128 loc) · 9.53 KB
/
day_12_using_color_safely.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Mirrored from diveintoaccessibility.info/day_12_using_color_safely.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:30 GMT -->
<head>
<title>Day 12: Using color safely - Dive Into Accessibility</title>
<link rel="start" title="Home page" href="index.html" />
<link rel="contents" title="Table of contents" href="table_of_contents.html" />
<link rel="search" title="Search this site" href="mt/mt-search.html" />
<link rel="help" title="Access features of this site" href="accessibility_statement.html" />
<link rel="author" title="Send feedback to the author" href="mailto:[email protected]" />
<link rel="copyright" title="Terms of use" href="terms_of_use.html" />
<link rel="up" title="Table of contents" href="table_of_contents.html" />
<link rel="first" title="Day 1: Jackie" href="day_1_jackie.html" />
<link rel="last" title="Accessibility statement" href="accessibility_statement.html" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/aural.css" type="text/css" media="aural" />
<link rel="prev" href="day_11_skipping_over_navigation_links.html" title="Day 11: Skipping over navigation links" />
<link rel="next" href="day_13_using_real_links.html" title="Day 13: Using real links" />
<script>_gaq=[['_setAccount','UA-7434570-7'],['_trackPageview']];(function(){var g=document.createElement('script');g.src='../www.google-analytics.com/ga.js';g.setAttribute('async','true');document.documentElement.firstChild.appendChild(g);})();</script>
</head>
<body>
<div id="logo"><div class="inner">
<h1 class="title">
<a href="index.html" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="day_12_using_color_safely.html#startnavigation">Skip to navigation</a>
<span class="divider"> </span>
</div></div>
<p></p>
<div id="main"><div class="inner">
<div class="entry">
<h2 class="entrysubject">Day 12: Using color safely</h2>
<p class="firstparagraph">This tip is a general rule that applies to many areas of web design, but I will focus on a specific example that is common among weblogs: link text.</p>
<p>There are two potential problems related to color. First, your link text may not contrast sufficiently with your background color. Any very light color on a white background is trouble; the link text may simply disappear into the background. Similarly, a dark color on a black background is trouble. This actually applies to all text, not just links, but it's fairly common on weblogs for text to be readable and links to be made unintentionally unreadable, which is why I mention links in particular.</p>
<p>The second potential problem is the link decoration. If your <acronym title="cascading style sheet">CSS</acronym> redefines a rule to make your links a different color, you need to make sure that the links are also distinguishable in some other way, like bold, italic, or underline. Otherwise, the link text might be perfectly readable, but colorblind people won't be able to tell that it's a link. This is illustrated below.</p>
<h3>Who benefits?</h3>
<ol>
<li><p><a href="day_2_michael.html">Michael</a> benefits. Here is a sample screenshot of three different decoration schemes for links.</p>
<p><img alt="Picture of three links using various color schemes, description follows" src="images/linkcolor.gif" width="325" height="90" /></p>
<p>As shown, the link in the first sentence uses the default scheme, and displays blue/purple and underlined in visual browsers. The second link has two forms of text decoration applied, and displays bold and red (but not underlined). The third link has only one form of text decoration applied, and displays only as red.</p>
<p>Now here are the same three links, as Michael sees them.</p>
<p><img alt="Picture of same three links as Michael sees them, description follows" src="images/linkcolorblind.gif" width="325" height="90" /></p>
<p>As shown, the first link is still visible; Michael's colorblindness is not affected by the color blue. In the second sentence, the redness of the link fades, almost to black, but the link still appears bold, so Michael can still distinguish it. The problem occurs in the third link, which was previously only distinguished by its redness; now that the redness has faded to black, it is virtually impossible to tell which word is a link and which words are normal text.</p>
</li>
</ol>
<h3>How to do it</h3>
<p>To check for "sufficient contrast" between your text color and background color, use <a href="http://www.vischeck.com/vischeck/">VisCheck</a> to simulate what your web page looks like to a colorblind reader.</p>
<p>To check for link decoration problems, look at your <acronym title="cascading style sheets">CSS</acronym> rules for "<code>a</code>" tags. For example, if you have a rule like this in your <acronym title="cascading style sheets">CSS</acronym>, then your links are <em>only</em> distinguished by their redness, which is no good:</p>
<blockquote>
<pre><code>a {
text-decoration: none;
color: red;
}</code></pre>
</blockquote>
<p>You can keep your links red, but you need to make sure that the links are <em>also</em> bold, or underlined, or italicized. To make them bold as well as red, add one line:</p>
<blockquote>
<pre><code>a {
text-decoration: none;
color: red;
font-weight: bold; /* add this line */
}</code></pre>
</blockquote>
<h3>Further reading</h3>
<ul>
<li><a href="http://www.vischeck.com/vischeck/">VisCheck</a> simulates colorblindness and allows you to see what colorblind people see. You can check a single image or an entire web page.</li>
<li><cite>Cal Henderson</cite>: <a href="http://www.iamcal.com/toys/colors/">Color Vision</a>. Shows the color spectrum as seen by people with various types of colorblindness.</li>
<li><a href="http://www.toledo-bend.com/colorblind/Ishihara.html">Ishihara Test for Color Blindness</a> contains a series of images that people with red-green colorblindness see differently, or don't see at all.</li>
</ul>
<p></p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_11_skipping_over_navigation_links.html"><< Day 11: Skipping over navigation links</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_13_using_real_links.html">Day 13: Using real links >></a>
<span class="divider"> </span>
</div></div> <!--pageturn-->
</div></div> <!--main-->
<div id="menu">
<a class="skip" name="startnavigation" id="startnavigation"></a>
<form action="http://www.google.com/cse"><p>Search this site:</p><p><input type="hidden" name="cx" value="014021643941856155761:j2rsjqy6z6g"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="20" placeholder="powered by Google™"></p><p><input type="submit" name="sa" value="Search"></p></form>
</form>
<div class="menusection"><div class="inner">
<h2 class="invisibletitle">Site links</h2>
<a class="skip" href="day_12_using_color_safely.html#endinternal">Skip over site links</a>
<ul>
<li><a title="accessibility features of this site" href="accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
<li><a href="mt/mt-search.html" accesskey="4">Advanced search</a></li>
<li><a href="table_of_contents.html" accesskey="3">Table of contents</a></li>
<li><a href="by_person.html">Tips by person</a></li>
<li><a href="by_disability.html">Tips by disability</a></li>
<li><a href="by_design_principle.html">Tips by design principle</a></li>
<li><a href="by_web_browser.html">Tips by web browser</a></li>
<li><a href="by_publishing_tool.html">Tips by publishing tool</a></li>
<li><a title="send email to the author" href="mailto:[email protected]" accesskey="9">Feedback</a></li>
<li><a title="Copyright and licensing information" href="terms_of_use.html" accesskey="8">Terms of use</a></li>
</ul>
<a class="skip" id="endinternal"></a>
</div></div> <!--.menusection-->
<div id="footer"><div class="inner">
<address>Copyright © 2002 Mark Pilgrim</address>
</div></div> <!--footer-->
</div> <!--menu-->
<div id="navigation">
<p class="breadcrumb">You are here:
<a href="index.html">Home</a> >
<a href="table_of_contents.html">Table of contents</a> >
<span class="currentpage">Day 12: Using color safely</span>
</p>
</div><!--navigation-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36045340-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
<!-- Mirrored from diveintoaccessibility.info/day_12_using_color_safely.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:30 GMT -->
</html>