Permalink
Browse files

Updated colors to ensure WCAG AA level contrast

  • Loading branch information...
kylegach committed Apr 17, 2016
1 parent 02f01c7 commit f90a098774856b657e3c19c75239c5a4ec2baecd
Showing with 13 additions and 7 deletions.
  1. +6 −2 styles/modules/_globals.css
  2. +7 −5 styles/modules/_variables.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);
}
}
@@ -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%));

0 comments on commit f90a098

Please sign in to comment.