fix(a11y): address axe color-contrast violations on dark surface
This commit is contained in:
@@ -29,8 +29,10 @@
|
||||
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
|
||||
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
|
||||
|
||||
--color-bodylinks: oklch(0.48 0.0789 211.58);
|
||||
--color-footlinks: oklch(0.65 0.1104 212.2);
|
||||
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
|
||||
* distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */
|
||||
--color-bodylinks: oklch(0.68 0.16 250);
|
||||
--color-footlinks: oklch(0.68 0.16 250);
|
||||
|
||||
--color-light: oklch(98.16% 0.0017 247.8);
|
||||
--color-dark: oklch(34.51% 0.0133 248.2);
|
||||
|
||||
@@ -120,6 +120,14 @@ a, .link {
|
||||
&:hover { color: var(--color-primary); }
|
||||
}
|
||||
|
||||
/* Inline links inside flowing text need an underline so they remain
|
||||
* distinguishable from surrounding text without relying solely on color
|
||||
* (WCAG 2.4.4 / axe link-in-text-block). */
|
||||
p a, li a, dd a, td a, blockquote a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
h1 a, .h1 a,
|
||||
h2 a, .h2 a,
|
||||
h3 a, .h3 a {
|
||||
|
||||
Reference in New Issue
Block a user