Fossil SCM
Deepened the dark gray body text color enough to allow us to simultaneously hit the two targets specified by the WCAG 2 accessibility standard: the 4.5:1 minimum contrast ratio betwen the background and the link, and the 3:1 ratio between the link and the surrounding body text. We've been [forum:/forumpost/aafb17a981df416 | called out on accessibility grounds] for our prior "#444" background color before, so this change is not merely placating the calculator. We believe the WCAG standards are based on solid human factors research, and this is a good time to address that.
Commit
2267249c6da7857545586618c5315b04e8f9163a92a79500e79f8f8a5a05a303
Parent
cb038b48c0624cb…
1 file changed
+13
-2
+13
-2
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -6,11 +6,22 @@ | ||
| 6 | 6 | background-color: white; |
| 7 | 7 | font-family: sans-serif; |
| 8 | 8 | } |
| 9 | 9 | |
| 10 | 10 | a { |
| 11 | - color: #59C; | |
| 11 | + /* Unvisited links are a lightness-adjusted version of this skin's | |
| 12 | + * header blue, balancing contrast between the body text and the | |
| 13 | + * background in order to meet the goals specified by the WCAG 2 | |
| 14 | + * accessbility standard, earning us an "AA" grade according to | |
| 15 | + * the calculator result here: | |
| 16 | + * | |
| 17 | + * https://webaim.org/resources/linkcontrastchecker/?fcolor=2E2E2E&bcolor=FFFFFF&lcolor=3779BF | |
| 18 | + * | |
| 19 | + * It is for this same reason that our not-quite-black body text | |
| 20 | + * color is the shade of dark gray that it is. It can't be any | |
| 21 | + * lighter and still allow us to meet both targets. */ | |
| 22 | + color: #3779BF; | |
| 12 | 23 | text-decoration: none; |
| 13 | 24 | } |
| 14 | 25 | a:hover { |
| 15 | 26 | color: #4183C4; |
| 16 | 27 | text-decoration: underline; |
| @@ -105,11 +116,11 @@ | ||
| 105 | 116 | |
| 106 | 117 | /* Main document area; elements common to most pages. */ |
| 107 | 118 | |
| 108 | 119 | .content { |
| 109 | 120 | padding: 1ex; |
| 110 | - color: #444; | |
| 121 | + color: #2e2e2e; /* justified above in "WCAG 2" comment */ | |
| 111 | 122 | } |
| 112 | 123 | .content h1 { font-size: 1.60em; } |
| 113 | 124 | .content h2 { font-size: 1.45em; } |
| 114 | 125 | .content h3 { font-size: 1.15em; } |
| 115 | 126 | .content h4 { font-size: 1.05em; } |
| 116 | 127 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -6,11 +6,22 @@ | |
| 6 | background-color: white; |
| 7 | font-family: sans-serif; |
| 8 | } |
| 9 | |
| 10 | a { |
| 11 | color: #59C; |
| 12 | text-decoration: none; |
| 13 | } |
| 14 | a:hover { |
| 15 | color: #4183C4; |
| 16 | text-decoration: underline; |
| @@ -105,11 +116,11 @@ | |
| 105 | |
| 106 | /* Main document area; elements common to most pages. */ |
| 107 | |
| 108 | .content { |
| 109 | padding: 1ex; |
| 110 | color: #444; |
| 111 | } |
| 112 | .content h1 { font-size: 1.60em; } |
| 113 | .content h2 { font-size: 1.45em; } |
| 114 | .content h3 { font-size: 1.15em; } |
| 115 | .content h4 { font-size: 1.05em; } |
| 116 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -6,11 +6,22 @@ | |
| 6 | background-color: white; |
| 7 | font-family: sans-serif; |
| 8 | } |
| 9 | |
| 10 | a { |
| 11 | /* Unvisited links are a lightness-adjusted version of this skin's |
| 12 | * header blue, balancing contrast between the body text and the |
| 13 | * background in order to meet the goals specified by the WCAG 2 |
| 14 | * accessbility standard, earning us an "AA" grade according to |
| 15 | * the calculator result here: |
| 16 | * |
| 17 | * https://webaim.org/resources/linkcontrastchecker/?fcolor=2E2E2E&bcolor=FFFFFF&lcolor=3779BF |
| 18 | * |
| 19 | * It is for this same reason that our not-quite-black body text |
| 20 | * color is the shade of dark gray that it is. It can't be any |
| 21 | * lighter and still allow us to meet both targets. */ |
| 22 | color: #3779BF; |
| 23 | text-decoration: none; |
| 24 | } |
| 25 | a:hover { |
| 26 | color: #4183C4; |
| 27 | text-decoration: underline; |
| @@ -105,11 +116,11 @@ | |
| 116 | |
| 117 | /* Main document area; elements common to most pages. */ |
| 118 | |
| 119 | .content { |
| 120 | padding: 1ex; |
| 121 | color: #2e2e2e; /* justified above in "WCAG 2" comment */ |
| 122 | } |
| 123 | .content h1 { font-size: 1.60em; } |
| 124 | .content h2 { font-size: 1.45em; } |
| 125 | .content h3 { font-size: 1.15em; } |
| 126 | .content h4 { font-size: 1.05em; } |
| 127 |