keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): address axe color-contrast violations on dark surface

Browse Source
This commit is contained in:
Keith Solomon
2026-08-16 14:08:22 -05:00
parent ba5e6fcd86
commit a50ea9f0ae
7 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/blocks/buttons.css
+13
View File
@@ -214,3 +214,16 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
color: var(--color-on-surface, #e3e1e9);
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);
}
styles/blocks/core.css
+10 -3
View File
@@ -1,5 +1,12 @@
.alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
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;
}