julien/blueprints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): raise faint ink text to meet WCAG AA contrast

Browse Source 
Dim text tokens (base-content/40-50, #4f7099) sat at 3.0-4.1:1 on the
navy paper, below the 4.5:1 minimum. Brighten text uses to #7ea6cd
(~6:1) and split the overloaded --ink-faint into --ink-dim so borders,
stripes and diagram edges keep their intended faintness.
This commit is contained in:
Julien Calixte
2026-07-02 23:05:53 +02:00
parent 6264c9959b
commit 9c8ba9a752
8 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/specimens/GridSpecimen.vue
View File

@@ -263,7 +263,8 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
<style scoped>
.specimen {
--ink: var(--color-base-content);
--ink-faint: #4f7099;
--ink-faint: #4f7099; /* decorative only: borders, stripes, fills */
--ink-dim: #7ea6cd; /* dim text — meets WCAG AA on navy paper */
--amber: var(--color-accent);
--amber-dim: color-mix(in srgb, var(--color-accent) 14%, transparent);
--cyan: var(--color-secondary);
@@ -274,7 +275,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
font-size: 13px;
}
.note {
color: var(--ink-faint);
color: var(--ink-dim);
font-size: 11px;
font-style: italic;
margin: 0 0 10px;
@@ -288,7 +289,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
font-size: 12px;
}
.badge-note {
color: var(--ink-faint);
color: var(--ink-dim);
}
.search {
flex: 1;
@@ -298,7 +299,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
color: var(--ink);
}
.ph {
color: var(--ink-faint);
color: var(--ink-dim);
}
.q {
color: var(--amber);
@@ -452,7 +453,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
.empty-state {
padding: 16px 12px;
text-align: center;
color: var(--ink-faint);
color: var(--ink-dim);
}
.empty-state .big {
font-size: 22px;