Adjust colors based on WCAG contrast criterion (#891)

Merge pull request 891

Author: ashmaroli

_sass/minima/_layout.scss

@@ -145,7 +145,7 @@
 .footer-col-wrapper,
 .social-links {
   @include relative-font-size(0.9375);
-  color: $brand-color;
+  color: $brand-color-dimmed;
 }
 
 .footer-col {
@@ -225,7 +225,7 @@
 
 .post-meta {
   font-size: $small-font-size;
-  color: $brand-color;
+  color: $brand-color-dimmed;
 }
 
 .post-link {

_sass/minima/skins/auto.scss

@@ -12,6 +12,7 @@ $color-scheme-dark: false !default;
 
 $lm-brand-color:           #818181 !default;
 $lm-brand-color-light:     lighten($lm-brand-color, 40%) !default;
+$lm-brand-color-dimmed:    darken($lm-brand-color, 11%) !default;
 $lm-brand-color-dark:      darken($lm-brand-color, 25%) !default;
 
 $lm-site-title-color:      $lm-brand-color-dark !default;
@@ -21,7 +22,7 @@ $lm-text-color:            $lm-brand-color-dark !default;
 $lm-background-color:      #fdfdfd !default;
 $lm-code-background-color: #f6f8fa !default;
 
-$lm-link-base-color:       #2a7ae2 !default;
+$lm-link-base-color:       #1e69d8 !default;
 $lm-link-visited-color:    darken($lm-link-base-color, 15%) !default;
 $lm-link-hover-color:      $lm-text-color !default;
 
@@ -120,6 +121,7 @@ $lm-table-border-color:    $lm-border-color-01 !default;
 
 $dm-brand-color:           #999999 !default;
 $dm-brand-color-light:     lighten($dm-brand-color, 5%) !default;
+$dm-brand-color-dimmed:    darken($dm-brand-color, 8%) !default;
 $dm-brand-color-dark:      darken($dm-brand-color, 43%) !default;
 
 $dm-site-title-color:      $dm-brand-color-light !default;
@@ -129,8 +131,8 @@ $dm-text-color:            darken($dm-heading-color, 15%) !default;
 $dm-background-color:      #181818 !default;
 $dm-code-background-color: #222222 !default;
 
-$dm-link-base-color:       #79b8ff !default;
-$dm-link-visited-color:    $dm-link-base-color !default;
+$dm-link-base-color:       #5691cd !default;
+$dm-link-visited-color:    #80bbff !default;
 $dm-link-hover-color:      $dm-text-color !default;
 
 $dm-border-color-01:       $dm-brand-color-dark !default;
@@ -236,6 +238,7 @@ $dm-table-border-color:    $dm-border-color-01 !default;
 
 $brand-color: $lm-brand-color;
 $brand-color-light: $lm-brand-color-light;
+$brand-color-dimmed: $lm-brand-color-dimmed;
 $brand-color-dark: $lm-brand-color-dark;
 
 $site-title-color: $lm-site-title-color;
@@ -267,6 +270,7 @@ $table-border-color: $lm-table-border-color;
   :root {
     --minima-brand-color: #{$lm-brand-color};
     --minima-brand-color-light: #{$lm-brand-color-light};
+    --minima-brand-color-dimmed: #{$lm-brand-color-dimmed};
     --minima-brand-color-dark: #{$lm-brand-color-dark};
 
     --minima-site-title-color: #{$lm-site-title-color};
@@ -297,6 +301,7 @@ $table-border-color: $lm-table-border-color;
     :root {
       --minima-brand-color: #{$dm-brand-color};
       --minima-brand-color-light: #{$dm-brand-color-light};
+      --minima-brand-color-dimmed: #{$dm-brand-color-dimmed};
       --minima-brand-color-dark: #{$dm-brand-color-dark};
 
       --minima-site-title-color: #{$dm-site-title-color};
@@ -326,6 +331,7 @@ $table-border-color: $lm-table-border-color;
 
   $brand-color: var(--minima-brand-color);
   $brand-color-light: var(--minima-brand-color-light);
+  $brand-color-dimmed: var(--minima-brand-color-dimmed);
   $brand-color-dark: var(--minima-brand-color-dark);
 
   $site-title-color: var(--minima-site-title-color);
@@ -356,6 +362,7 @@ $table-border-color: $lm-table-border-color;
 
   $brand-color: $dm-brand-color;
   $brand-color-light: $dm-brand-color-light;
+  $brand-color-dimmed: $dm-brand-color-dimmed;
   $brand-color-dark: $dm-brand-color-dark;
 
   $site-title-color: $dm-site-title-color;

_sass/minima/skins/solarized.scss

@@ -15,12 +15,15 @@ $sol-is-dark: false !default;
 // Color scheme
 // ------------
 // The inline comments show the canonical L*a*b values for each color.
+//
+// Some colors were altered from the canonical scheme to comply with
+// WCAG-contrast criteria between foreground and background colors.
 
 $sol-base03:   #002b36;  // 15 -12 -12
 $sol-base02:   #073642;  // 20 -12 -12
 $sol-base01:   #586e75;  // 45 -07 -07
-$sol-base00:   #657b83;  // 50 -07 -07
-$sol-base0:    #839496;  // 60 -06 -03
+$sol-base00:   #4e626a;  // original hex: #657b83 ; L*a*b: 50 -07 -07
+$sol-base0:    #91a0a1;  // original hex: #839496 ; L*a*b: 60 -06 -03
 $sol-base1:    #93a1a1;  // 65 -05 -02
 $sol-base2:    #eee8d5;  // 92 -00  10
 $sol-base3:    #fdf6e3;  // 97  00  10
@@ -33,6 +36,11 @@ $sol-blue:     #268bd2;  // 55 -10 -45
 $sol-cyan:     #2aa198;  // 60 -35 -05
 $sol-green:    #859900;  // 60 -20  65
 
+// Non-canonical; Derived to comply with WCAG-contrast criterion.
+$sol-light-blue:   #469edd;
+$sol-light-blue2:  #64a5ce;
+$sol-dark-blue:    #2072ac;
+$sol-dark-blue2:   #376a8b;
 
 // Mixed colors
 // ------------
@@ -49,7 +57,6 @@ $sol-dark-mix2:   mix($sol-blue, $sol-base0);
 $sol-dark-mix3:   mix($sol-base02, $sol-base03);
 $sol-dark-mix4:   #193843; // custom mixture of `$sol-base01` and `$sol-base03`.
 
-
 // Mode selection
 // --------------
 
@@ -63,6 +70,10 @@ $sol-mix2:     $sol-light-mix2;
 $sol-mix3:     $sol-light-mix3;
 $sol-mix4:     $sol-light-mix4;
 
+$sol-mono1-dimmed: darken($sol-base1, 20%);
+$sol-link-color:   $sol-dark-blue;
+$sol-link-visited: $sol-dark-blue2;
+
 @if $sol-is-dark {
   $sol-mono3:  $sol-base03;
   $sol-mono2:  $sol-base02;
@@ -73,6 +84,10 @@ $sol-mix4:     $sol-light-mix4;
   $sol-mix2:   $sol-dark-mix2;
   $sol-mix3:   $sol-dark-mix3;
   $sol-mix4:   $sol-dark-mix4;
+
+  $sol-mono1-dimmed: lighten($sol-base01, 16%);
+  $sol-link-color:   $sol-light-blue;
+  $sol-link-visited: $sol-light-blue2;
 }
 
 @if $sol-is-auto {
@@ -86,6 +101,10 @@ $sol-mix4:     $sol-light-mix4;
     --solarized-mix2:   #{$sol-light-mix2};
     --solarized-mix3:   #{$sol-light-mix3};
     --solarized-mix4:   #{$sol-light-mix4};
+
+    --solarized-mono1-dimmed: #{darken($sol-base1, 20%)};
+    --solarized-link-color:   #{$sol-dark-blue};
+    --solarized-link-visited: #{$sol-dark-blue2};
   }
 
   @media (prefers-color-scheme: dark) {
@@ -99,6 +118,10 @@ $sol-mix4:     $sol-light-mix4;
       --solarized-mix2:   #{$sol-dark-mix2};
       --solarized-mix3:   #{$sol-dark-mix3};
       --solarized-mix4:   #{$sol-dark-mix4};
+
+      --solarized-mono1-dimmed: #{lighten($sol-base01, 16%)};
+      --solarized-link-color:   #{$sol-light-blue};
+      --solarized-link-visited: #{$sol-light-blue2};
     }
   }
 
@@ -111,6 +134,10 @@ $sol-mix4:     $sol-light-mix4;
   $sol-mix2:   var(--solarized-mix2);
   $sol-mix3:   var(--solarized-mix3);
   $sol-mix4:   var(--solarized-mix4);
+
+  $sol-mono1-dimmed: var(--solarized-mono1-dimmed);
+  $sol-link-color:   var(--solarized-link-color);
+  $sol-link-visited: var(--solarized-link-visited);
 }
 
 
@@ -119,6 +146,7 @@ $sol-mix4:     $sol-light-mix4;
 
 $brand-color:           $sol-mono1 !default;
 $brand-color-light:     $sol-mix4 !default;
+$brand-color-dimmed:    $sol-mono1-dimmed !default;
 $brand-color-dark:      $sol-mono00 !default;
 
 $site-title-color:      $sol-mono00 !default;
@@ -128,8 +156,8 @@ $text-color:            $sol-mono00 !default;
 $background-color:      $sol-mono3 !default;
 $code-background-color: $sol-mix3 !default;
 
-$link-base-color:       $sol-blue !default;
-$link-visited-color:    $sol-mix2 !default;
+$link-base-color:       $sol-link-color !default;
+$link-visited-color:    $sol-link-visited !default;
 $link-hover-color:      $sol-mono00 !default;
 
 $border-color-01:       $brand-color-light !default;