tudor/school_compare
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): WCAG AA colour contrast across every route (P0.1)

Browse Source 
Live axe-core inventory found 13 failing fg/bg pairs (3.12:1 coral text/
fills, 4.0-4.5 teal near-misses, 2.7 gold badge, 1.9 chart-colour text).
All replacement values validated ≥4.5:1 against every background they
sit on:

- --accent-coral-dark deepened to #b04a2e and used for coral text roles
  (nav active, back/map links, kickers, chips) and coral fills under
  white text (btn-primary, phase tabs, section-nav compare, chart chips);
  new --accent-coral-darker #9c3f26 for their hovers. Decorative coral
  (pins, bars, borders, focus ring) keeps the brand #e07256.
- --accent-teal darkened to #296f6f (rankings values, metric rows,
  ofsted grades, eyebrows all pass).
- Ofsted green #3c8c3c→#2f7a2f; off-token gold #b8920e→--accent-gold-text.
- Gender-split pink text #b45778→#a04a68; admissions tip numerals to a
  3.8:1 muted brown (28px display text).
- New CHART_TEXT_COLORS: AA-dark counterparts of the Chart.js series
  palette for compare-card values (swatch dots keep true series colour).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-07-02 21:33:51 +01:00
co-authored by Claude Fable 5
parent 192173e515
commit a1fa4fe874
15 changed files with 116 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/app/globals.css
+18 -17
View File
@@ -16,8 +16,9 @@
--text-inverse: #faf7f2;
--accent-coral: #e07256;
--accent-coral-dark: #c45a3f;
--accent-teal: #2d7d7d;
--accent-coral-dark: #b04a2e; /* AA: 4.5+ as text on white/cream tints; 5.4:1 under white text */
--accent-coral-darker: #9c3f26; /* hover for coral-dark fills */
--accent-teal: #296f6f; /* AA: 4.8+ as text on the cream/tint backgrounds */
--accent-teal-light: #3a9e9e;
--accent-gold: #c9a227;
--accent-gold-text: #7a6800; /* WCAG AA safe for text on white/cream */
@@ -172,13 +173,13 @@ body {
/* Primary: coral background — main CTAs (Search, Compare Now) */
.btn-primary {
background: var(--accent-coral);
background: var(--accent-coral-dark);
color: white;
border-color: var(--accent-coral);
border-color: var(--accent-coral-dark);
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-coral-dark);
border-color: var(--accent-coral-dark);
background: var(--accent-coral-darker);
border-color: var(--accent-coral-darker);
}
/* Secondary: teal outline — supporting actions (+ Compare) */
@@ -210,8 +211,8 @@ body {
}
.btn-active:hover:not(:disabled) {
background: transparent;
color: var(--accent-coral);
border-color: var(--accent-coral);
color: var(--accent-coral-dark);
border-color: var(--accent-coral-dark);
}
/* Small variant */
@@ -745,14 +746,14 @@ body {
}
.btn-compare {
background: var(--accent-coral);
background: var(--accent-coral-dark);
color: white;
border: 1px solid var(--accent-coral);
border: 1px solid var(--accent-coral-dark);
}
.btn-compare:hover {
background: #d4654a;
border-color: #d4654a;
background: var(--accent-coral-darker);
border-color: var(--accent-coral-darker);
}
.btn-compare.active {
@@ -916,7 +917,7 @@ body {
}
.stat-value.negative {
color: var(--accent-coral);
color: var(--accent-coral-dark);
}
/* Trend indicators */
@@ -930,7 +931,7 @@ body {
}
.trend-down {
color: var(--accent-coral);
color: var(--accent-coral-dark);
}
.trend-stable {
@@ -1018,7 +1019,7 @@ body {
}
.map-modal-close:hover {
color: var(--accent-coral);
color: var(--accent-coral-dark);
}
.map-modal-content {
@@ -1567,12 +1568,12 @@ body {
}
.btn-primary {
background: var(--accent-coral);
background: var(--accent-coral-dark);
color: white;
}
.btn-primary:hover {
background: var(--accent-coral-dark);
background: var(--accent-coral-darker);
transform: translateY(-1px);
}