Merge pull request #1810 from hypothesis/fix-annotation-contrast

Increase contrast in annotation cards to meet WCAG AA requirements

src/styles/sidebar/components/annotation-body.scss

@@ -2,7 +2,7 @@
 
 .annotation-body {
   @include var.font-normal;
-  color: var.$grey-6;
+  color: var.$grey-7;
   // Margin between top of ascent of annotation body and
   // bottom of ascent of annotation-quote should be ~15px.
   margin-top: var.$layout-h-margin - 5px;

src/styles/sidebar/components/annotation-header.scss

@@ -6,7 +6,7 @@
   // Margin between top of x-height of username and
   // top of the annotation card should be ~15px
   margin-top: -(var.$layout-h-margin) + 10px;
-  color: var.$grey-5;
+  color: var.$grey-6;
 
   &__row {
     display: flex;
@@ -31,7 +31,7 @@
   &__timestamp-edited {
     @include var.font-small;
     font-style: italic;
-    color: var.$grey-4;
+    color: var.$grey-5;
   }
 
   &__timestamp-created-link {
@@ -41,7 +41,7 @@
   }
 
   &__timestamp-created-link {
-    color: var.$grey-5;
+    color: var.$grey-6;
   }
 
   &__highlight {

src/styles/sidebar/components/annotation-quote.scss

@@ -17,7 +17,7 @@
   @include var.font-normal;
 
   border-left: 3px solid var.$grey-3;
-  color: var.$grey-4;
+  color: var.$grey-5;
   font-family: sans-serif;
   font-size: 12px;
   font-style: italic;

src/styles/variables.scss

@@ -20,11 +20,14 @@ $grey-4: #a6a6a6;
 // minus blue tint.
 $grey-semi: #9c9c9c;
 
+// This is the lightest grey admissible on a white, $grey-0 or $grey-1
+// background to meet WCAG-AA text contrast requirements.
 $grey-5: #737373;
 
 // Interim color variable for migration purposes, as the step between `$grey-5`
 // and `$grey-6` is large. Represents `base-mid` in proposed future palette,
 // minus blue tint.
+// This is the lightest grey admissible on $grey-2, $grey-3
 $grey-mid: #595959;
 
 $grey-6: #3f3f3f;