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-800: color-mix(in oklch, var(--color-secondary) 80%, white);
|
||||||
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
|
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
|
||||||
|
|
||||||
--color-bodylinks: oklch(0.48 0.0789 211.58);
|
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
|
||||||
--color-footlinks: oklch(0.65 0.1104 212.2);
|
* 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-light: oklch(98.16% 0.0017 247.8);
|
||||||
--color-dark: oklch(34.51% 0.0133 248.2);
|
--color-dark: oklch(34.51% 0.0133 248.2);
|
||||||
|
|||||||
@@ -120,6 +120,14 @@ a, .link {
|
|||||||
&:hover { color: var(--color-primary); }
|
&: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,
|
h1 a, .h1 a,
|
||||||
h2 a, .h2 a,
|
h2 a, .h2 a,
|
||||||
h3 a, .h3 a {
|
h3 a, .h3 a {
|
||||||
|
|||||||
@@ -214,3 +214,16 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
|
|||||||
color: var(--color-on-surface, #e3e1e9);
|
color: var(--color-on-surface, #e3e1e9);
|
||||||
border-color: var(--color-outline-variant, #444651);
|
border-color: var(--color-outline-variant, #444651);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Outline button over the site-header's bg-secondary surface needs lighter text
|
||||||
|
* because --color-on-surface (#e3e1e9) on bg-secondary (#6e757f) is only 3.59:1.
|
||||||
|
* Pure white clears 4.5:1 against #6e757f; --color-on-primary (#05297a) is too
|
||||||
|
* dark and drops to 2.81:1, so we go to --color-white instead. */
|
||||||
|
.site-header .button--outline {
|
||||||
|
color: var(--color-white, #ffffff);
|
||||||
|
border-color: var(--color-white, #ffffff);
|
||||||
|
}
|
||||||
|
.site-header .button--outline:hover {
|
||||||
|
color: var(--color-primary-87, #dce1ff);
|
||||||
|
border-color: var(--color-primary-87, #dce1ff);
|
||||||
|
}
|
||||||
|
|||||||
+10
-3
@@ -1,5 +1,12 @@
|
|||||||
.alignfull {
|
.alignfull {
|
||||||
margin-left: calc(50% - 50vw);
|
margin-left: calc(50% - 50vw);
|
||||||
margin-right: calc(50% - 50vw);
|
margin-right: calc(50% - 50vw);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* WP block buttons authored with vivid-cyan-blue backgrounds carry inline
|
||||||
|
* white text — that combo is only 3.33:1 and fails WCAG AA. Force dark text.
|
||||||
|
* !important needed because WP core ships .has-white-color with !important. */
|
||||||
|
.wp-block-button__link.has-vivid-cyan-blue-background-color {
|
||||||
|
color: var(--color-page-base, #100e0b) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
/* Blog/post index listing styles */
|
/* Blog/post index listing styles */
|
||||||
|
|
||||||
|
/* Category pill on dark page surface — needs higher contrast than the default
|
||||||
|
* --color-bodylinks (~3:1 against --color-page-base) for WCAG AA. */
|
||||||
|
.post-list__category {
|
||||||
|
color: var(--color-primary-87, #dce1ff);
|
||||||
|
}
|
||||||
|
|
||||||
.post-list {
|
.post-list {
|
||||||
/* Original styles, if needed
|
/* Original styles, if needed
|
||||||
* .post-list__posts {
|
* .post-list__posts {
|
||||||
|
|||||||
@@ -333,7 +333,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.home-recent__view-all {
|
.home-recent__view-all {
|
||||||
color: var(--color-primary, #b6c4ff);
|
color: var(--color-primary-87, #dce1ff);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,5 +24,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Links inside sidebar widgets on dark page surface — bumped to --color-primary-87
|
||||||
|
* to clear WCAG AA (the inherited global --color-bodylinks is only ~3:1). */
|
||||||
|
a[data-type],
|
||||||
|
a[data-id] {
|
||||||
|
color: var(--color-primary-87, #dce1ff);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user