diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 4167651..9ee189f 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -27,7 +27,10 @@ --text: #2a2015; --text-bright: #1a1008; --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-hover: #3a3025; --parch-text: #ede4d0; diff --git a/app/components/BoardPostCard.vue b/app/components/BoardPostCard.vue index 97067e9..a79a535 100644 --- a/app/components/BoardPostCard.vue +++ b/app/components/BoardPostCard.vue @@ -178,7 +178,8 @@ const slackLinks = computed(() => { font-size: 10px; letter-spacing: 0.1em; 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 { @@ -233,7 +234,8 @@ const slackLinks = computed(() => { font-size: 10px; letter-spacing: 0.1em; 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; } .block-text { @@ -244,7 +246,8 @@ const slackLinks = computed(() => { .post-note { 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; margin: 8px 0; white-space: pre-wrap; @@ -293,7 +296,8 @@ const slackLinks = computed(() => { align-items: center; justify-content: center; 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; } .author-name { @@ -308,7 +312,8 @@ const slackLinks = computed(() => { } .slack-handle { 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; background: transparent; border: none;