Darken @gray-light to meet accessibility guidelines

`@gray-light` darkens from #999 to #777, which puts `.text-muted` at the
threshold for the 4.5:1 WCAG minimum contrast[1]. #777:#fff is 4.48:1.

The “Example” headers in docs become #959595, which is contrast ratio
3:1, the minimum for larger text. Since the headers are less important
than the surrounding text, 3:1 is fine and an improvement on the
previous #bbb:#fff (1.92:1).

Fixes issue #13847.

[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

diff --git a/docs/assets/css/_src/docs.css b/docs/assets/css/_src/docs.css
index e13ca35b81585695a50bfb385142d690a9a4a94d..1bb81405d1ce8c8730b53547f6ee94e43e9f2875 100644 (file)
--- a/docs/assets/css/_src/docs.css
+++ b/docs/assets/css/_src/docs.css
@@ -857,7 +857,7 @@ h1[id] {
   left: 15px;
   font-size: 12px;
   font-weight: bold;
-  color: #bbb;
+  color: #959595;
   text-transform: uppercase;
   letter-spacing: 1px;
   content: "Example";

diff --git a/less/variables.less b/less/variables.less
index a2e464b6ee3e30e94852ca04259280c1ee274534..c6edad147c851ada534806389ca47dc640a08b22 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -10,7 +10,7 @@
 @gray-darker:            lighten(#000, 13.5%); // #222
 @gray-dark:              lighten(#000, 20%);   // #333
 @gray:                   lighten(#000, 33.5%); // #555
-@gray-light:             lighten(#000, 60%);   // #999
+@gray-light:             lighten(#000, 46.7%); // #777
 @gray-lighter:           lighten(#000, 93.5%); // #eee
 
 @brand-primary:         #428bca;