Updated colors to ensure WCAG AA level contrast

kylegach · Apr 17, 2016 · f90a098 · f90a098
1 parent 02f01c7
commit f90a098
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/styles/modules/_globals.css b/styles/modules/_globals.css
@@ -89,11 +89,13 @@ a:link {
 }
 
 a:visited {
-  color: color(var(--linkColor) s(-25%));
+  color: color(var(--linkColor) s(-40%) l(-10%));
+  border-bottom-color: color(var(--linkColor) s(-40%) l(-10%) a(-50%));
 }
 
 a:hover, a:focus {
   border-bottom-color: var(--linkColor);
+  color: var(--linkColor);
 }
 
 .is-reverse {
@@ -103,12 +105,14 @@ a:hover, a:focus {
   }
 
   & a:visited {
-    color: color(var(--linkColor-reverse) s(-25%));
+    color: color(var(--linkColor-reverse) s(-40%));
+    border-bottom-color: color(var(--linkColor-reverse) s(-40%) a(-50%));
   }
 
   & a:hover,
   & a:focus {
     border-bottom-color: var(--linkColor-reverse);
+    color: var(--linkColor-reverse);
   }
 }
 

diff --git a/styles/modules/_variables.css b/styles/modules/_variables.css
@@ -59,7 +59,7 @@
   --lighter-4: rgba(255,255,255,0.5);
 
   /* Colors */
-  --cream     : hsl(39 , 25%, 96%);
+  --cream     : hsl(40 , 15%, 96%);
   --magenta   : hsl(329, 69%, 56%);
   --red       : hsl(5  , 54%, 52%);
   --orange    : hsl(18 , 73%, 52%);
@@ -70,22 +70,24 @@
   /*--teal      : hsl(176, 61%, 60%);*/
   --aqua      : hsl(198, 68%, 71%);
   --lightBlue : hsl(201, 58%, 62%);
-  --blue      : hsl(203, 47%, 55%);
+  --blue      : hsl(198, 76%, 32%);
   --navy      : hsl(212, 48%, 22%);
-  --lavender  : hsl(263, 65%, 64%);
+  --lavender  : hsl(263, 65%, 68%);
 
   --siteBkg: var(--cream);
   --textColor: var(--navy);
   --linkColor: var(--blue);
   --borderColor-light: color(var(--textColor) a(-75%));
 
-  --sectionBlockBorder-1: var(--blue);
+  /* Since this color is also used for links, which must meet AA contrast guidelines,
+     and since the border is much thicker than text, it needs adjustment to look right */
+  --sectionBlockBorder-1: color(var(--blue) l(+8%)); /* 1 */
   --sectionBlockBorder-2: var(--red);
   --sectionBlockBorder-3: var(--yellow);
   --sectionBlockBorder-4: var(--green);
 
   --siteBkg-reverse: hsl(212,20%,15%);
-  --textColor-reverse: hsl(231,18%,75%);
+  --textColor-reverse: hsl(212,15%,75%);
   --linkColor-reverse: var(--lavender);
   --borderColor-light-reverse: color(var(--textColor-reverse) a(-75%));