fix(a11y): WCAG AA colour contrast across every route (P0.1)
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
@@ -13,7 +13,7 @@
|
||||
padding: 0.25rem 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -76,7 +76,7 @@
|
||||
|
||||
.headerHasMap .actions .btnAdd {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
border-color: transparent;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
@@ -124,7 +124,7 @@
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -226,12 +226,12 @@
|
||||
}
|
||||
|
||||
.btnAdd {
|
||||
background: var(--accent-coral, #e07256);
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btnAdd:hover {
|
||||
background: var(--accent-coral-dark, #c45a3f);
|
||||
background: var(--accent-coral-darker, #9c3f26);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -278,7 +278,7 @@
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
background: none;
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 4px;
|
||||
@@ -322,13 +322,13 @@
|
||||
}
|
||||
|
||||
.tabBtnActive {
|
||||
background: var(--accent-coral, #e07256);
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabBtnActive:hover {
|
||||
background: var(--accent-coral-dark, #c45a3f);
|
||||
background: var(--accent-coral-darker, #9c3f26);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -456,7 +456,7 @@
|
||||
}
|
||||
|
||||
.progressNegative {
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -468,7 +468,7 @@
|
||||
|
||||
.statusWarn {
|
||||
background: var(--accent-gold-bg);
|
||||
color: #b8920e;
|
||||
color: var(--accent-gold-text, #7a6800);
|
||||
}
|
||||
|
||||
/* ── Metric table (row-based) ────────────────────────── */
|
||||
@@ -582,15 +582,15 @@
|
||||
}
|
||||
.ofstedGrade2 {
|
||||
background: rgba(60, 140, 60, 0.12);
|
||||
color: #3c8c3c;
|
||||
color: #2f7a2f;
|
||||
}
|
||||
.ofstedGrade3 {
|
||||
background: var(--accent-gold-bg);
|
||||
color: #b8920e;
|
||||
color: var(--accent-gold-text, #7a6800);
|
||||
}
|
||||
.ofstedGrade4 {
|
||||
background: var(--accent-coral-bg);
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.rcGrade1 {
|
||||
@@ -599,11 +599,11 @@
|
||||
}
|
||||
.rcGrade2 {
|
||||
background: rgba(60, 140, 60, 0.12);
|
||||
color: #3c8c3c;
|
||||
color: #2f7a2f;
|
||||
}
|
||||
.rcGrade3 {
|
||||
background: var(--accent-gold-bg);
|
||||
color: #b8920e;
|
||||
color: var(--accent-gold-text, #7a6800);
|
||||
}
|
||||
.rcGrade4 {
|
||||
background: rgba(249, 115, 22, 0.12);
|
||||
@@ -611,7 +611,7 @@
|
||||
}
|
||||
.rcGrade5 {
|
||||
background: var(--accent-coral-bg);
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.safeguardingMet {
|
||||
@@ -631,7 +631,7 @@
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
background: var(--accent-coral-bg);
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.ofstedDisclaimer {
|
||||
@@ -874,7 +874,7 @@
|
||||
}
|
||||
|
||||
.genderBarGirls {
|
||||
background: #b45778;
|
||||
background: #a04a68;
|
||||
}
|
||||
|
||||
.genderBarBoys {
|
||||
@@ -889,7 +889,7 @@
|
||||
}
|
||||
|
||||
.genderSplitGirls {
|
||||
color: #b45778;
|
||||
color: #a04a68;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -946,7 +946,7 @@
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent-coral, #e07256);
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
|
||||
Reference in New Issue
Block a user