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
This commit is contained in:
parent
0b9570b160
commit
7f59fdd9bd
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue