Skip to content

Commit 7f59fdd

Browse files
committed
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
1 parent 0b9570b commit 7f59fdd

File tree

3 files changed

+30
-26
lines changed

3 files changed

+30
-26
lines changed

src/theme/css/chrome.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ a > .hljs {
9393
.menu-title {
9494
display: inline-block;
9595
font-weight: 200;
96-
font-size: 2rem;
96+
font-size: 2.4rem;
9797
line-height: var(--menu-bar-height);
9898
text-align: center;
9999
margin: 0;

src/theme/css/variables.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -92,22 +92,22 @@
9292

9393
.light {
9494
--bg: hsl(0, 0%, 100%);
95-
--fg: #333333;
95+
--fg: hsl(0, 0%, 0%);
9696

9797
--sidebar-bg: #fafafa;
98-
--sidebar-fg: #364149;
98+
--sidebar-fg: hsl(0, 0%, 0%);
9999
--sidebar-non-existant: #aaaaaa;
100-
--sidebar-active: #008cff;
100+
--sidebar-active: #1f1fff;
101101
--sidebar-spacer: #f4f4f4;
102102

103-
--scrollbar: #cccccc;
103+
--scrollbar: #8F8F8F;
104104

105-
--icons: #cccccc;
106-
--icons-hover: #333333;
105+
--icons: #747474;
106+
--icons-hover: #000000;
107107

108-
--links: #4183c4;
108+
--links: #20609f;
109109

110-
--inline-code-color: #6e6b5e;
110+
--inline-code-color: #301900;
111111

112112
--theme-popup-bg: #fafafa;
113113
--theme-popup-border: #cccccc;

src/theme/highlight.css

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
/* Base16 Atelier Dune Light - Theme */
2-
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
3-
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
1+
/*
2+
* An increased contrast highlighting scheme loosely based on the
3+
* "Base16 Atelier Dune Light" theme by Bram de Haan
4+
* (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
5+
* Original Base16 color scheme by Chris Kempson
6+
* (https://github.com/chriskempson/base16)
7+
*/
48

5-
/* Atelier-Dune Comment */
9+
/* Comment */
610
.hljs-comment,
711
.hljs-quote {
8-
color: #AAA;
12+
color: #575757;
913
}
1014

11-
/* Atelier-Dune Red */
15+
/* Red */
1216
.hljs-variable,
1317
.hljs-template-variable,
1418
.hljs-attribute,
@@ -19,44 +23,44 @@
1923
.hljs-name,
2024
.hljs-selector-id,
2125
.hljs-selector-class {
22-
color: #d73737;
26+
color: #d70025;
2327
}
2428

25-
/* Atelier-Dune Orange */
29+
/* Orange */
2630
.hljs-number,
2731
.hljs-meta,
2832
.hljs-built_in,
2933
.hljs-builtin-name,
3034
.hljs-literal,
3135
.hljs-type,
3236
.hljs-params {
33-
color: #b65611;
37+
color: #b21e00;
3438
}
3539

36-
/* Atelier-Dune Green */
40+
/* Green */
3741
.hljs-string,
3842
.hljs-symbol,
3943
.hljs-bullet {
40-
color: #60ac39;
44+
color: #008200;
4145
}
4246

43-
/* Atelier-Dune Blue */
47+
/* Blue */
4448
.hljs-title,
4549
.hljs-section {
46-
color: #6684e1;
50+
color: #0030f2;
4751
}
4852

49-
/* Atelier-Dune Purple */
53+
/* Purple */
5054
.hljs-keyword,
5155
.hljs-selector-tag {
52-
color: #b854d4;
56+
color: #9d00ec;
5357
}
5458

5559
.hljs {
5660
display: block;
5761
overflow-x: auto;
58-
background: #f1f1f1;
59-
color: #6e6b5e;
62+
background: #f6f7f6;
63+
color: #000;
6064
padding: 0.5em;
6165
}
6266

0 commit comments

Comments
 (0)