Merge pull request rails#51456 from lloydk/fix-contrast

Reduce contrast of text and inline code elements [ci skip]

Author: carlosantoniodasilva

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