Skip to content

Commit c8d93b5

Browse files
authored
Fix WCAG AA color contrast: muted text and appendix links (light theme) (#2102)
* Fix WCAG AA color contrast for muted text and appendix links (light theme) Two axe color-contrast findings (WCAG 2.0 AA 1.4.3, serious): - Blockquotes, captions, asides render at #6d7a86 on white (4.39:1). Quarto's body-secondary mixin defaults to theme-dim($body-color, 25%) but honors $body-secondary when defined; set it to $text-muted (4.83:1). - Footnote back-links render at an effective #4d80a8 (4.22:1) because Quarto fades appendix content to opacity .9. Darken the link custom property inside the appendix so the blended color is ~5.25:1, scoped to body.quarto-light so it can't leak into dark mode. * Undo appendix opacity fade instead of hardcoding a darker link color Mirrors Quarto's appendix selector and sets opacity: 1 in the light theme, fixing contrast for all appendix links and text with no color constants. The dark stylesheet re-asserts Quarto's .9 by cascade. * Don't presume the form of an upstream fix in the comment
1 parent b3731a4 commit c8d93b5

1 file changed

Lines changed: 21 additions & 0 deletions

File tree

theme.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
$link-color: #39729E;
33
$text-muted: #6a737b;
44

5+
// Quarto's body-secondary mixin (blockquotes, captions, asides, header
6+
// section numbers) defaults to theme-dim($body-color, 25%) = #6d7a86, only
7+
// 4.39:1 on white — a WCAG AA 1.4.3 failure (axe color-contrast-7ed054).
8+
// Defining $body-secondary makes the mixin use it instead; $text-muted is
9+
// 4.83:1.
10+
$body-secondary: $text-muted;
11+
512
// Code-block background: the darkest tint of the site's cosmo blue-gray that
613
// still keeps every a11y-light syntax color at WCAG AA (>=4.5:1). a11y-light's
714
// palette is tuned for a near-white background, so this stays pale; one step
@@ -10,6 +17,20 @@ $code-block-bg: #eff2f5;
1017

1118
/*-- scss:rules --*/
1219

20+
// Quarto dims appendix content (footnotes, citation, reuse) to opacity .9,
21+
// which fades $link-color to an effective #4d80a8 = 4.22:1 on white — a WCAG
22+
// AA 1.4.3 failure (axe color-contrast-733538). Undo the fade; selectors
23+
// mirror Quarto's so this wins by cascade order in the light theme, while
24+
// the dark stylesheet (loaded after this one) re-asserts Quarto's .9 —
25+
// the dark link color passes even faded. Remove if quarto-cli fixes
26+
// this upstream.
27+
#quarto-appendix.default section {
28+
*[role="doc-endnotes"],
29+
> *:not(a) {
30+
opacity: 1;
31+
}
32+
}
33+
1334
.layout-example {
1435
background: $gray-500;
1536
color: $white;

0 commit comments

Comments
 (0)