Make the site higher contrast for accessibility

sass/_utils.scss

@@ -45,7 +45,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) {
 .anchor-link:link,
 .anchor-link:visited {
   margin-left: 0.3rem;
-  color: #505050;
+  color: #737373;
   text-shadow: none;
   font-weight: 500;
 }
@@ -56,4 +56,4 @@ body:not(.show_drafts) .public_draft:not(.active_draft) {
 
 .draft-header {
   margin-bottom: 0.5rem;
-}
+}

sass/_vars.scss

@@ -22,7 +22,7 @@ $color-black: #000;
 $color-white: #ececec;
 $color-grey-800: #232326;
 $color-grey-900: #1e1e22;
-$color-pink: #bb799c;
+$color-pink: #9f517a;
 $color-gold: #d2be4a;
 
 $headerbar-color: #1e1e22;
@@ -31,7 +31,7 @@ $hover-shadow-color: #d6d6d6;
 $link-color: #7c90ff;
 $link-hover-shadow-color: #6c82ff;
 $default-color: #ececec;
-$subtitle-color: #8f8f8f;
+$subtitle-color: #999;
 $syntax-theme-background: #2b2c2f;
 $syntax-theme-background-hover: #414247;
 $default-image-background-color: #1b1b1b;
@@ -63,4 +63,4 @@ $border-radius: 10px;
 }
 
 // Accessibility
-$focus-outline: solid #b1d9ff 3px;
+$focus-outline: solid #b1d9ff 3px;

sass/components/_button.scss

@@ -1,42 +1,44 @@
 .button {
-    $color-blue: #799bbb;
+  $color-blue: #4a6e91;
 
-    display: inline-flex;
-    align-items: center;
-    background-color: $color-blue;
-    border: 3px solid #576f86;
-    padding: 6px 8px;
-    border-radius: $border-radius;
-    font-size: 1.2rem;
-    font-weight: 500;
-    transition: transform $duration-fast;
+  display: inline-flex;
+  align-items: center;
+  background-color: $color-blue;
+  border: 3px solid darken($color-blue, 10%);
+  padding: 6px 8px;
+  border-radius: $border-radius;
+  font-size: 1.2rem;
+  font-weight: 500;
+  transition: transform $duration-fast;
 
-    &:hover {
-        background-color: darken($color-blue, 3%);
-    }
+  &:hover {
+    background-color: darken($color-blue, 3%);
+  }
 
-    &:active {
-        transform: translateY(2px);
-    }
+  &:active {
+    transform: translateY(2px);
+  }
 
-    &, &:hover, &:visited {
-        color: $color-white;
-        text-decoration: none;
-    }
+  &,
+  &:hover,
+  &:visited {
+    color: $color-white;
+    text-decoration: none;
+  }
 
-    &__icon {
-        height: 1.1em;
-        vertical-align: middle;
-        margin-left: 0.2em;
-        font-size: 0.9em;
-    }
+  &__icon {
+    height: 1.1em;
+    vertical-align: middle;
+    margin-left: 0.2em;
+    font-size: 0.9em;
+  }
 
-    &--pink {
-        background-color: $color-pink;
-        border-color: #865767;
+  &--pink {
+    background-color: $color-pink;
+    border-color: darken($color-pink, 10%);
 
-        &:hover {
-            background-color: darken($color-pink, 3%);
-        }
+    &:hover {
+      background-color: darken($color-pink, 3%);
     }
-}
+  }
+}

sass/components/_docs-footer.scss

@@ -1,6 +1,6 @@
 .docs-footer {
     $border-color: #2f3033;
-
+    $secondary-text-color: #8c8c8c;
     --docs-footer-gap: 12px;
 
     margin: 32px 0;
@@ -73,7 +73,7 @@
 
     &__dir {
         margin-bottom: 4px;
-        color: #666;
+        color: $secondary-text-color;
         text-transform: uppercase;
         font-size: 0.8rem;
         line-height: 1;
@@ -97,11 +97,11 @@
         font-size: 0.9rem;
 
         @include override-anchor {
-            color: #555;
+            color: $secondary-text-color;
         }
 
         &:hover {
-            color: #aaa;
+            color: lighten($secondary-text-color, 20%);
         }
 
         .icon {

sass/components/_header.scss

@@ -38,7 +38,7 @@
     display: none;
     font-size: 1.28rem;
     font-weight: 500;
-    color: #797979;
+    color: #868686;
     margin-left: 12px;
     white-space: nowrap;
 

sass/components/_image_compare.scss

@@ -27,9 +27,13 @@ div.image-compare {
     width: calc(100% - var(--text-padding));
     text-shadow: 0 0 2px $color-black;
   }
+
+  $before-after-color: forestgreen;
+
   &::before {
     @include image-title;
 
+    color: $before-after-color;
     content: attr(data-title-a);
     padding-left: var(--text-padding);
     clip-path: var(--clip-L-geo);
@@ -39,6 +43,7 @@ div.image-compare {
   &::after {
     @include image-title;
 
+    color: $before-after-color;
     content: attr(data-title-b);
     padding-right: var(--text-padding);
     clip-path: var(--clip-R-geo);

sass/components/_syntax-theme.scss

@@ -4,15 +4,16 @@
 }
 
 div.incorrect {
+    $incorrect_block_background_color: #481e21;
     position: relative;
-    background-color: #542326;
+    background-color: $incorrect_block_background_color;
     border-left: 10px solid darkred;
     border-radius: 10px;
     padding-right: 55px;
 
     .z-code,
     .z-code code {
-        background-color: #542326;
+        background-color: $incorrect_block_background_color;
     }
 }
 
@@ -45,7 +46,7 @@ div.incorrect-image {
 
 .z-comment,
 .z-punctuation.z-definition.z-comment {
-    color: #65737e;
+    color: #8e9aa4;
 }
 
 .z-punctuation.z-definition.z-string,
@@ -116,7 +117,7 @@ div.incorrect-image {
 }
 
 .z-entity.z-name.z-tag {
-    color: #e05a67;
+    color: #e0858d;
 }
 
 .z-entity.z-other.z-attribute-name {