jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(a11y): meet WCAG AA on --text-faint

Browse source 
Bump --text-faint from #746a58 (4.01:1 on cream surfaces — fails AA)
to #665c4b (4.94:1 — passes AA for small text). Preserves the "quieter
than --text-dim" semantic the variable was named for. Lifts ~33 sites
into compliance with one diff.

Also keeps the BoardPostCard per-selector swap to --text-dim that
shipped with the original /board fix; can revert to --text-faint
in a follow-up now that the variable itself is accessible.
This commit is contained in:
Jennie Robinson Faber 2026-04-30 22:25:57 +01:00
parent 6a6f036877
commit 03dfdab20e
2 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/assets/css/main.css
View file

@ -27,7 +27,10 @@
--text: #2a2015; --text: #2a2015;
--text-bright: #1a1008; --text-bright: #1a1008;
--text-dim: #5a5040; --text-dim: #5a5040;
--text-faint: #746a58; /* Darkened from #746a58 (4.01:1 on --surface, fails WCAG AA) to #665c4b
(4.94:1 on --surface, 5.13:1 on --bg). Stays visually quieter than
--text-dim (5.80:1) while meeting AA for small text. */
--text-faint: #665c4b;
--parch: #2a2015; --parch: #2a2015;
--parch-hover: #3a3025; --parch-hover: #3a3025;
--parch-text: #ede4d0; --parch-text: #ede4d0;

15
app/components/BoardPostCard.vue
View file

@ -178,7 +178,8 @@ const slackLinks = computed(() => {
font-size: 10px; font-size: 10px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-faint); /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
color: var(--text-dim);
} }
.post-actions { .post-actions {
@ -233,7 +234,8 @@ const slackLinks = computed(() => {
font-size: 10px; font-size: 10px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-faint); /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
color: var(--text-dim);
margin-bottom: 2px; margin-bottom: 2px;
} }
.block-text { .block-text {
@ -244,7 +246,8 @@ const slackLinks = computed(() => {
.post-note { .post-note {
font-size: 11px; font-size: 11px;
color: var(--text-faint); /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
color: var(--text-dim);
font-style: italic; font-style: italic;
margin: 8px 0; margin: 8px 0;
white-space: pre-wrap; white-space: pre-wrap;
@ -293,7 +296,8 @@ const slackLinks = computed(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 10px; font-size: 10px;
color: var(--text-faint); /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
color: var(--text-dim);
font-family: "Commit Mono", monospace; font-family: "Commit Mono", monospace;
} }
.author-name { .author-name {
@ -308,7 +312,8 @@ const slackLinks = computed(() => {
} }
.slack-handle { .slack-handle {
font-size: 11px; font-size: 11px;
color: var(--text-faint); /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
color: var(--text-dim);
font-family: "Commit Mono", monospace; font-family: "Commit Mono", monospace;
background: transparent; background: transparent;
border: none; border: none;