Skip to content

Commit fb48bab

Browse files
accesswatchclaude
accesswatch
and
claude
authored
fix(site): text contrast in dark mode and code highlighting (#274)
A contrast scan of every page in light and dark mode found text under 4.5:1: in dark mode the breadcrumb, footer and all code blocks (the light highlight theme was used on a dark background, down to 1.18:1), and in light mode the orange, green and red highlight colours on the code background (3.28:1 to 4.3:1). Code blocks now use GitHub's dark highlight theme in dark mode, the four short colours are replaced with GitHub's own shades of the same hue, and the breadcrumb and footer get dark-mode colours. A re-scan of all 223 pages finds nothing under 4.5:1 in either mode. Claude-Session: https://claude.ai/code/session_01PmRBrUTuhzYnQBFxUCN6Vr Co-authored-by: Claude <noreply@anthropic.com>
1 parent a282dc6 commit fb48bab

3 files changed

Lines changed: 154 additions & 8 deletions

File tree

‎html/styles/custom.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,8 @@
193193
}
194194

195195
@media (prefers-color-scheme: dark) {
196+
.breadcrumb { color: #9198a1; }
197+
.breadcrumb a { color: #58a6ff; }
196198
.site-header { background: #0d1117; border-bottom-color: #30363d; }
197199
.search-input { background: #161b22; border-color: #30363d; color: #e6edf3; }
198200
.search-input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.3); background: #0d1117; }
@@ -847,6 +849,11 @@ textarea:focus-visible {
847849
text-decoration: underline;
848850
}
849851

852+
@media (prefers-color-scheme: dark) {
853+
.site-footer { color: #9198a1; border-top-color: #30363d; }
854+
.site-footer a { color: #58a6ff; }
855+
}
856+
850857
/* Reduced motion support */
851858
@media (prefers-reduced-motion: reduce) {
852859
*,

‎html/styles/highlight.css‎

Lines changed: 125 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ code.hljs {
2828
.hljs-type,
2929
.hljs-variable.language_ {
3030
/* prettylights-syntax-keyword */
31-
color: #d73a49
31+
color: #cf222e
3232
}
3333
.hljs-title,
3434
.hljs-title.class_,
@@ -59,7 +59,7 @@ code.hljs {
5959
.hljs-built_in,
6060
.hljs-symbol {
6161
/* prettylights-syntax-variable */
62-
color: #e36209
62+
color: #953800
6363
}
6464
.hljs-comment,
6565
.hljs-code,
@@ -72,7 +72,7 @@ code.hljs {
7272
.hljs-selector-tag,
7373
.hljs-selector-pseudo {
7474
/* prettylights-syntax-entity-tag */
75-
color: #22863a
75+
color: #116329
7676
}
7777
.hljs-subst {
7878
/* prettylights-syntax-storage-modifier-import */
@@ -99,7 +99,7 @@ code.hljs {
9999
}
100100
.hljs-addition {
101101
/* prettylights-syntax-markup-inserted */
102-
color: #22863a;
102+
color: #116329;
103103
background-color: #f0fff4
104104
}
105105
.hljs-deletion {
@@ -115,4 +115,124 @@ code.hljs {
115115
.hljs-tag {
116116
/* purposely ignored */
117117

118-
}
118+
}
119+
@media (prefers-color-scheme: dark) {
120+
pre code.hljs {
121+
display: block;
122+
overflow-x: auto;
123+
padding: 1em
124+
}
125+
code.hljs {
126+
padding: 3px 5px
127+
}
128+
/*!
129+
Theme: GitHub Dark
130+
Description: Dark theme as seen on github.com
131+
Author: github.com
132+
Maintainer: @Hirse
133+
Updated: 2021-05-15
134+
135+
Outdated base version: https://github.com/primer/github-syntax-dark
136+
Current colors taken from GitHub's CSS
137+
*/
138+
.hljs {
139+
color: #c9d1d9;
140+
background: #0d1117
141+
}
142+
.hljs-doctag,
143+
.hljs-keyword,
144+
.hljs-meta .hljs-keyword,
145+
.hljs-template-tag,
146+
.hljs-template-variable,
147+
.hljs-type,
148+
.hljs-variable.language_ {
149+
/* prettylights-syntax-keyword */
150+
color: #ff7b72
151+
}
152+
.hljs-title,
153+
.hljs-title.class_,
154+
.hljs-title.class_.inherited__,
155+
.hljs-title.function_ {
156+
/* prettylights-syntax-entity */
157+
color: #d2a8ff
158+
}
159+
.hljs-attr,
160+
.hljs-attribute,
161+
.hljs-literal,
162+
.hljs-meta,
163+
.hljs-number,
164+
.hljs-operator,
165+
.hljs-variable,
166+
.hljs-selector-attr,
167+
.hljs-selector-class,
168+
.hljs-selector-id {
169+
/* prettylights-syntax-constant */
170+
color: #79c0ff
171+
}
172+
.hljs-regexp,
173+
.hljs-string,
174+
.hljs-meta .hljs-string {
175+
/* prettylights-syntax-string */
176+
color: #a5d6ff
177+
}
178+
.hljs-built_in,
179+
.hljs-symbol {
180+
/* prettylights-syntax-variable */
181+
color: #ffa657
182+
}
183+
.hljs-comment,
184+
.hljs-code,
185+
.hljs-formula {
186+
/* prettylights-syntax-comment */
187+
color: #8b949e
188+
}
189+
.hljs-name,
190+
.hljs-quote,
191+
.hljs-selector-tag,
192+
.hljs-selector-pseudo {
193+
/* prettylights-syntax-entity-tag */
194+
color: #7ee787
195+
}
196+
.hljs-subst {
197+
/* prettylights-syntax-storage-modifier-import */
198+
color: #c9d1d9
199+
}
200+
.hljs-section {
201+
/* prettylights-syntax-markup-heading */
202+
color: #58a6ff;
203+
font-weight: bold
204+
}
205+
.hljs-bullet {
206+
/* prettylights-syntax-markup-list */
207+
color: #f2cc60
208+
}
209+
.hljs-emphasis {
210+
/* prettylights-syntax-markup-italic */
211+
color: #c9d1d9;
212+
font-style: italic
213+
}
214+
.hljs-strong {
215+
/* prettylights-syntax-markup-bold */
216+
color: #c9d1d9;
217+
font-weight: bold
218+
}
219+
.hljs-addition {
220+
/* prettylights-syntax-markup-inserted */
221+
color: #aff5b4;
222+
background-color: #033a16
223+
}
224+
.hljs-deletion {
225+
/* prettylights-syntax-markup-deleted */
226+
color: #ffdcd7;
227+
background-color: #67060c
228+
}
229+
.hljs-char.escape_,
230+
.hljs-link,
231+
.hljs-params,
232+
.hljs-property,
233+
.hljs-punctuation,
234+
.hljs-tag {
235+
/* purposely ignored */
236+
237+
}
238+
}

‎scripts/build-html.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -987,9 +987,21 @@ function setupStyles(outputDir) {
987987
const githubCss = require.resolve('github-markdown-css');
988988
fs.copyFileSync(githubCss, path.join(stylesDir, 'github-markdown.css'));
989989

990-
// Copy highlight.js CSS (GitHub theme)
991-
const highlightCss = path.join(require.resolve('highlight.js'), '../../styles/github.css');
992-
fs.copyFileSync(highlightCss, path.join(stylesDir, 'highlight.css'));
990+
// highlight.js CSS: the GitHub light theme, plus GitHub dark for dark mode.
991+
// A few stock colours fall short of WCAG 1.4.3 (4.5:1) on the code block
992+
// background (#f6f8fa light, #151b23 dark), so they are replaced with
993+
// GitHub's own darker or lighter shades of the same hue.
994+
const stylesRoot = path.join(require.resolve('highlight.js'), '../../styles');
995+
const lightCss = fs.readFileSync(path.join(stylesRoot, 'github.css'), 'utf8')
996+
.replace(/color: #e36209/g, 'color: #953800')
997+
.replace(/color: #22863a/g, 'color: #116329')
998+
.replace(/color: #d73a49/g, 'color: #cf222e');
999+
const darkCss = fs.readFileSync(path.join(stylesRoot, 'github-dark.css'), 'utf8')
1000+
.replace(/color: #1f6feb/g, 'color: #58a6ff');
1001+
fs.writeFileSync(
1002+
path.join(stylesDir, 'highlight.css'),
1003+
`${lightCss}\n@media (prefers-color-scheme: dark) {\n${darkCss}\n}\n`
1004+
);
9931005

9941006
// Create custom CSS for additional accessibility and styling
9951007
const customCss = `
@@ -1187,6 +1199,8 @@ function setupStyles(outputDir) {
11871199
}
11881200
11891201
@media (prefers-color-scheme: dark) {
1202+
.breadcrumb { color: #9198a1; }
1203+
.breadcrumb a { color: #58a6ff; }
11901204
.site-header { background: #0d1117; border-bottom-color: #30363d; }
11911205
.search-input { background: #161b22; border-color: #30363d; color: #e6edf3; }
11921206
.search-input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.3); background: #0d1117; }
@@ -1841,6 +1855,11 @@ textarea:focus-visible {
18411855
text-decoration: underline;
18421856
}
18431857
1858+
@media (prefers-color-scheme: dark) {
1859+
.site-footer { color: #9198a1; border-top-color: #30363d; }
1860+
.site-footer a { color: #58a6ff; }
1861+
}
1862+
18441863
/* Reduced motion support */
18451864
@media (prefers-reduced-motion: reduce) {
18461865
*,

0 commit comments

Comments
 (0)