From 7f59fdd9bd2c1cb789b3d7e70bc37c24af315c0f Mon Sep 17 00:00:00 2001
From: Tim Small <tim@seoss.co.uk>
Date: Sun, 21 Feb 2021 11:46:52 +0000
Subject: [PATCH] Enhance text contrast of `light` theme to improve
 accessibility.

The existing light theme has relatively low contrast between the text
(and other UI elements) and background (especially within code blocks).
This presents difficulties for people with reduced visual contrast
perception (common in older adults).

This patch makes changes to the default `light` theme to meet the
minimum contrast requirement of the v2.1 W3C WCAG (Web Content
Accessibility Guidelines)
https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

The small size, and slender font used for the title text makes it hard
to read, even with the increased contrast colour scheme, so this patch
also increases the size of the title text font by 20%.

Closes #1442
---
 src/theme/css/chrome.css    |  2 +-
 src/theme/css/variables.css | 16 ++++++++--------
 src/theme/highlight.css     | 38 ++++++++++++++++++++-----------------
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 9ca8633ae9..21c08b930f 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -93,7 +93,7 @@ a > .hljs {
 .menu-title {
     display: inline-block;
     font-weight: 200;
-    font-size: 2rem;
+    font-size: 2.4rem;
     line-height: var(--menu-bar-height);
     text-align: center;
     margin: 0;
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 9534ec8d15..9ff64d6b3b 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -92,22 +92,22 @@
 
 .light {
     --bg: hsl(0, 0%, 100%);
-    --fg: #333333;
+    --fg: hsl(0, 0%, 0%);
 
     --sidebar-bg: #fafafa;
-    --sidebar-fg: #364149;
+    --sidebar-fg: hsl(0, 0%, 0%);
     --sidebar-non-existant: #aaaaaa;
-    --sidebar-active: #008cff;
+    --sidebar-active: #1f1fff;
     --sidebar-spacer: #f4f4f4;
 
-    --scrollbar: #cccccc;
+    --scrollbar: #8F8F8F;
 
-    --icons: #cccccc;
-    --icons-hover: #333333;
+    --icons: #747474;
+    --icons-hover: #000000;
 
-    --links: #4183c4;
+    --links: #20609f;
 
-    --inline-code-color: #6e6b5e;
+    --inline-code-color: #301900;
 
     --theme-popup-bg: #fafafa;
     --theme-popup-border: #cccccc;
diff --git a/src/theme/highlight.css b/src/theme/highlight.css
index ab8c49c689..c234322720 100644
--- a/src/theme/highlight.css
+++ b/src/theme/highlight.css
@@ -1,14 +1,18 @@
-/* Base16 Atelier Dune Light - Theme */
-/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
-/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+/*
+ * An increased contrast highlighting scheme loosely based on the
+ * "Base16 Atelier Dune Light" theme by Bram de Haan
+ * (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
+ * Original Base16 color scheme by Chris Kempson
+ * (https://github.com/chriskempson/base16)
+ */
 
-/* Atelier-Dune Comment */
+/* Comment */
 .hljs-comment,
 .hljs-quote {
-  color: #AAA;
+  color: #575757;
 }
 
-/* Atelier-Dune Red */
+/* Red */
 .hljs-variable,
 .hljs-template-variable,
 .hljs-attribute,
@@ -19,10 +23,10 @@
 .hljs-name,
 .hljs-selector-id,
 .hljs-selector-class {
-  color: #d73737;
+  color: #d70025;
 }
 
-/* Atelier-Dune Orange */
+/* Orange */
 .hljs-number,
 .hljs-meta,
 .hljs-built_in,
@@ -30,33 +34,33 @@
 .hljs-literal,
 .hljs-type,
 .hljs-params {
-  color: #b65611;
+  color: #b21e00;
 }
 
-/* Atelier-Dune Green */
+/* Green */
 .hljs-string,
 .hljs-symbol,
 .hljs-bullet {
-  color: #60ac39;
+  color: #008200;
 }
 
-/* Atelier-Dune Blue */
+/* Blue */
 .hljs-title,
 .hljs-section {
-  color: #6684e1;
+  color: #0030f2;
 }
 
-/* Atelier-Dune Purple */
+/* Purple */
 .hljs-keyword,
 .hljs-selector-tag {
-  color: #b854d4;
+  color: #9d00ec;
 }
 
 .hljs {
   display: block;
   overflow-x: auto;
-  background: #f1f1f1;
-  color: #6e6b5e;
+  background: #f6f7f6;
+  color: #000;
   padding: 0.5em;
 }