Update color contrast to improve accessibility

Creates a new set of base colors for our pattern library that both has a wider range of standard tints and shades (light and dark) so that we don't have to manually adjust the base color each time, and has a greater degree of contrast when used in our patterns. In doing this, we also standardized some of the color variable names and set up aliases to provide backward compatibility for projects that are currently using or overriding those variables. Also updates existing patterns for improved contrast to meet our accessibility standards. Signed-off-by: Christa Hartsock <[email protected]> Co-authored-by: Christa Hartsock <[email protected]>
codeforamerica · May 21, 2019 · 7ec6b16 · 7ec6b16
1 parent 3c57158
commit 7ec6b16
Show file tree

Hide file tree

Showing 46 changed files with 476 additions and 389 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ Or install it yourself as:
     `<your hostname>/cfa/styleguide/custom-docs`
     ```
 
-1. (Optional) To override the styleguide's variables (e.g. use `#000000` for `$color-background` rather than `#FAFAF9`, as defined in the gem), require your own file that redefines the variables in your application.scss like so:
+1. (Optional) To override the styleguide's variables (e.g. use `#000000` for `$color-background` rather than as defined in the gem), require your own file that redefines the variables in your application.scss like so:
 
     ```scss
     @import 'my_variable_file'

diff --git a/app/assets/images/cfa_logo_dark.png b/app/assets/images/cfa_logo_dark.png
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/emojis/checkmark.png b/app/assets/images/emojis/checkmark.png
diff --git a/app/assets/images/emojis/crossmark.png b/app/assets/images/emojis/crossmark.png
diff --git a/app/assets/images/icon_checkmark_white.png b/app/assets/images/icon_checkmark_white.png
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/icon_star_black.png b/app/assets/images/icon_star_black.png
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/stylesheets/atoms/_buttons.scss b/app/assets/stylesheets/atoms/_buttons.scss
@@ -5,56 +5,61 @@
     position: relative;
     cursor: pointer;
     font-weight: 500;
-    border: 1px solid #000;
+    border: 2px solid $color-grey-darkest;
     box-shadow: 0 2px 2px $color-grey;
     background-color: #FFFFFF;
     padding: .5em 1em;
     border-radius: $border-radius;
     margin-bottom: .5em;
     margin-right: .3em;
     text-decoration: none;
-    color: #000000;
+    color: $color-grey-darkest;
 
     &:hover {
-        background-color: tint($color-light-grey, 20%);
-        color: #000000;
+        background-color: $color-grey-light;
+        color: $color-grey-darkest;
     }
     &:active {
-        background-color: $color-light-grey;
+        background-color: $color-grey-light;
         box-shadow: none;
         top: 1px;
     }
+
+  .emoji--checkmark, .emoji--crossmark {
+    background-size: auto 100%;
+    width: 1.2em;
+  }
 }
 
 .button--cta {
   color: #FFFFFF;
   background-color: $color-magenta;
   border-color: $color-magenta;
-  box-shadow: 0 2px 2px shade($color-magenta, 40%);
+  box-shadow: 0 2px 2px $color-magenta-dark;
   &:hover {
-      background-color: tint($color-magenta, 20%);
-      border-color: tint($color-magenta, 20%);
+      background-color: $color-magenta-dark;
+      border-color: $color-magenta-dark;
       color: #FFFFFF;
   }
   &:active {
-      background-color: shade($color-magenta, 15%);
-      border-color: shade($color-magenta, 15%);
+      background-color: $color-magenta-dark;
+      border-color: $color-magenta-dark;
   }
 }
 
 .button--primary {
     color: #FFFFFF;
     background-color: $color-teal;
     border-color: $color-teal;
-    box-shadow: 0 2px 2px shade($color-teal,40%);
+    box-shadow: 0 2px 2px $color-teal-dark;
     &:hover {
-        background-color: tint($color-teal, 20%);
-        border-color: tint($color-teal, 20%);
+        background-color: $color-teal-dark;
+        border-color: $color-teal-dark;
         color: #FFFFFF;
     }
     &:active {
-        background-color: shade($color-teal, 15%);
-        border-color: shade($color-teal, 15%);
+        background-color: $color-teal-dark;
+        border-color: $color-teal-dark;
     }
 }
 
@@ -64,22 +69,21 @@
 }
 
 .button--danger {
-    color: $color-red;
-    &:hover {
-        color: $color-red;
-    }
+  color: $color-red;
+  &:hover {
+      background-color: $color-red;
+      color: #fff;
+  }
 }
 
 .button--small {
   font-size: $font-size-small;
   padding: .2em .7em;
-  border-bottom-width: 1px;
 }
 
 .button--inline {
   font-size: .8em;
   padding: .2em;
-  border-bottom-width: 1px;
 }
 
 .button--link {

diff --git a/app/assets/stylesheets/atoms/_emoji.scss b/app/assets/stylesheets/atoms/_emoji.scss
@@ -173,11 +173,11 @@
 }
 
 .emoji--checkmark {
-  background-image: image-url('emojis/checkmark.png')
+  background-image: image-url('emojis/checkmark.png');
 }
 
 .emoji--crossmark {
-  background-image: image-url('emojis/crossmark.png')
+  background-image: image-url('emojis/crossmark.png');
 }
 
 .emoji--student-woman {

diff --git a/app/assets/stylesheets/atoms/_example.scss b/app/assets/stylesheets/atoms/_example.scss
@@ -1,7 +1,7 @@
 .example {
   display: inline-block;
   border-radius: 10px;
-  border: 2px dotted $color-grey;
+  border: 2px dotted $color-grey-dark;
   padding: .3em .5em;
   margin-bottom: .5em;
   margin-right: .3em;

diff --git a/app/assets/stylesheets/atoms/_form-elements.scss b/app/assets/stylesheets/atoms/_form-elements.scss
@@ -23,11 +23,11 @@ label {
 	margin-bottom: 1em;
 	padding: .5em;
 	border: 0;
-	border-bottom: 2px solid #000;
-  border-radius: 0;
-	background-color: $color-light-grey;
+	border: 2px solid $color-grey-darkest;
+    border-radius: 0;
+	background-color: $color-grey-light;
     &::placeholder {
-		color: $color-grey;
+		color: $color-grey-dark;
 	}
 }
 
@@ -44,7 +44,7 @@ label {
 	padding: .3em .7em;
   padding-left: 2em;
 	background-color: #FFFFFF;
-	border: 2px solid $color-light-grey;
+	border: 2px solid $color-grey-darkest;
 	border-radius: $border-radius;
 	input[type='radio'] {
     @include outline;
@@ -54,7 +54,7 @@ label {
     appearance: none;
     display: inline-block;
     background-color: #fff;
-    border: 2px solid $color-darkest-grey;
+    border: 2px solid $color-grey-darkest;
     height: 22px;
     width: 22px;
     border-radius: 50%;
@@ -75,13 +75,13 @@ label {
     }
 	}
 	&:hover {
-		background-color: $color-light-grey;
+		background-color: $color-grey-light;
 	}
 
 	&.is-selected {
-		background-color: rgba($color-teal, .1);
-		border-color: rgba($color-teal, .2);
-		color: #000;
+		background-color: $color-teal-light;
+		border-color: $color-grey-darkest;
+		color: $color-grey-darkest;
 	}
 }
 
@@ -98,7 +98,7 @@ label {
 	margin-bottom: .5em;
 	padding: .3em .7em;
   padding-left: 2em;
-	border: 2px solid $color-light-grey;
+	border: 2px solid $color-grey-darkest;
 	border-radius: $border-radius;
 	input[type='checkbox'] {
     @include outline;
@@ -108,7 +108,7 @@ label {
     appearance: none;
     display: inline-block;
     background-color: #fff;
-    border: 2px solid $color-darkest-grey;
+    border: 2px solid $color-grey-darkest;
     height: 22px;
     width: 22px;
     border-radius: $border-radius;
@@ -122,21 +122,21 @@ label {
         position: relative;
         color: $color-teal;
       }
-	  }
+    }
   }
 	&:hover {
-		background-color: $color-light-grey;
+		background-color: $color-grey-light;
 	}
 	&.is-selected {
-    background-color: rgba($color-teal, .1);
-    border-color: rgba($color-teal, .2);
-    color: #000;
+    background-color: $color-teal-light;
+    border-color: $color-grey-darkest;
+    color: $color-grey-darkest;
 	}
 }
 
 .textarea {
   @include outline;
-	border: 2px solid $color-dark-grey;
+	border: 2px solid $color-grey-dark;
 	border-radius: $border-radius;
 	width: 100%;
 	padding: 1em;
@@ -161,36 +161,23 @@ label {
     display: block;
     font-family: $font-icon;
     content: '\e5c5';
-    background-color: $color-light-grey;
-    color: #000;
-    border: 2px solid #000;
+    color: $color-grey-darkest;
+    border: 2px solid $color-grey-darkest;
     border-left: 0;
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
     width: 2em;
     text-align: center;
     z-index: 0;
   }
-
-  &:hover {
-    &:after {
-      background-color: rgba($color-teal, .1);
-    } 
-  }
-
-  &:active {
-    &:after {
-      background-color: rgba($color-teal, .2);
-    }
-  }
 }
 
 .select__element {
   @include outline;
   appearance: none;
   position: relative;
   z-index: 1;
-  border: 2px solid #000;
+  border: 2px solid $color-grey-darkest;
   border-radius: $border-radius;
   padding: .5em 2.7em .5em .7em;
   font-family: $font-system;

diff --git a/app/assets/stylesheets/atoms/_illustrations.scss b/app/assets/stylesheets/atoms/_illustrations.scss
@@ -16,6 +16,13 @@
   height: 41px;
 }
 
+.illustration--cfa-logo__dark {
+  @include retina-bg(cfa_logo_dark, 100px 41px);
+  margin-left: 0;
+  width: 100px;
+  height: 41px;
+}
+
 .illustration--cfa-logo-color {
   @include retina-bg(cfa_logo_color, 100% auto);
   width: 100%;

diff --git a/app/assets/stylesheets/atoms/_labels.scss b/app/assets/stylesheets/atoms/_labels.scss
@@ -1,7 +1,7 @@
 .label {
   display: inline-block;
   font-size: $font-size-smallest;
-  background-color: $color-dark-grey;
+  background-color: $color-grey-dark;
   color: #fff;
   font-weight: 500;
   border-radius: $border-radius;

diff --git a/app/assets/stylesheets/atoms/_layout.scss b/app/assets/stylesheets/atoms/_layout.scss
@@ -5,7 +5,7 @@
     top: 2em;
     bottom: 2em;
   }
-	border-bottom: 1px solid $color-tan;
+	border-bottom: 1px solid $color-grey;
 
   &:last-child {
     border-bottom: 0;
@@ -55,13 +55,14 @@
 }
 
 .notice {
-  background-color: rgba($color-teal, .05);
+  background-color: $color-grey-light;
   padding: $site-margins/2;
   margin-bottom: 1em;
+  border: 2px solid $color-grey-darkest;
 }
 
 .tile {
-  border: 1px solid $color-light-grey;
+  border: 1px solid $color-grey-light;
   padding: 1.5em 1em;
 }
 
@@ -70,7 +71,7 @@
   margin-bottom: 1em;
 
   @include media($tablet-up) {
-    border: 2px solid $color-light-grey;
+    border: 2px solid $color-grey-light;
     padding: 2em;
     max-height: 30rem;
     overflow: auto;