Reduce contrast of text and inline code elements.

To much contrast in dark mode can cause halation and makes
text hard to read.

The Accessible Perceptual Contrast Algorithm (APCA)[1] has
preliminary guidelines ([2]) for maximum contrast in dark mode.

The changes introduced in this PR ensure that the contrast for
text content does not exceed Lc 90 and does not exceed Lc 75 for
large text.

The background color for inline code elements was also darkened
so that there is less contrast with the surrounding text.

1. https://github.com/Myndex
2. Myndex/SAPC-APCA#106

Author: lloydk

guides/assets/images/hr_rails_white.svg

@@ -9,7 +9,7 @@
   body.guide {
 
     background-color: $gray-1000;
-    color: #fff;
+    color: $text-on-darker-bg;
 
     &::-webkit-scrollbar {
       width: 12px;
@@ -27,8 +27,9 @@
         border-radius: 10px;
         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
     }
-    h1 {
-      color: #fff;
+
+    h1, h2, h3 {
+      color: $large-text-on-darker-bg;
     }
 
     a {
@@ -44,17 +45,18 @@
       } // &:visited
     } // a
 
-    h2 a {
+    h2 a, h3 a {
       &:link,
       &:visited {
-        color: #fff;
+        color: inherit;
       } 
     } // h2 a
 
     table {
       th {
         background-color: $gray-900;
         border-bottom: 2px solid $gray-700;
+        color: $text-on-darker-bg;
       } // th
 
       tr {
@@ -64,11 +66,11 @@
       }
     } // table
 
-    h3, h4, h5, h6 {
+    h4, h5, h6 {
       a,
       a:link,
       a:visited {
-        color: #fff;
+        color: inherit;
       } // a, a:link, a:visited
     } // h3
 
@@ -86,8 +88,8 @@
     } // pre, code
 
     p code, ul code, li code {
-      background-color: $gray-650;
-      color: #fff;
+      background-color: $gray-850;
+      color: $text-on-darker-bg;
     }
 
     td code {
@@ -137,7 +139,7 @@
               a,
               a:link,
               a:visited {
-                color: $gray-100;
+                color: $text-on-darker-bg;
               } // a
 
               a#home_nav {
@@ -151,14 +153,14 @@
 
     #guides {
       background: $gray-800;
-      color: $gray-100;
+      color: $text-on-dark-bg;
 
       .guides-section {
         dd {
           a,
           a:link,
           a:visited {
-            color: $gray-100;
+            color: $text-on-dark-bg;
           } // a
 
           a:hover,
@@ -204,7 +206,7 @@
             a,
             a:link,
             a:visited {
-              color: $gray-100;
+              color: inherit;
             }
 
             a:hover,

guides/assets/images/hr_rails_white_mobile.svg

@@ -51,6 +51,7 @@ $gray-600: #666666;
 $gray-650: #505050;
 $gray-700: #3A3939;
 $gray-800: #343434;
+$gray-850: #2E2E2E;
 $gray-900: #292929;
 $gray-1000: #181818;
 
@@ -70,6 +71,14 @@ $stop-dark: rgba($stop, 0.5);
 $stop-bkgnd: rgba($stop, 15%);
 $stop-bkgnd-dark: rgba($stop, 5%);
 
+// APCA has different rules if the background is darker than #333333.
+// The variables with darker in them are intended for those cases.
+// Large text is text that is > 24px
+// See https://github.com/Myndex/SAPC-APCA/discussions/106
+$text-on-dark-bg: #EDEDED; // APCA Lc 90 on gray-800
+$text-on-darker-bg: #E5E5E5; // APCA Lc -89.9 on gray-1000, Lc -87.4 on gray-900
+$large-text-on-darker-bg: #CCCCCC; // APCA Lc -74.6 on gray-1000, Lc -72.0 on gray-900
+
 // ----------------------------------------------------------------------------
 // Fonts
 // These are the same fonts that are used on the marcom site, and they are