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:
@@ -121,7 +121,7 @@
|
||||
|
||||
.viewToggleBtn.active {
|
||||
background: var(--bg-card, white);
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
box-shadow: 0 2px 4px rgba(26, 22, 18, 0.08);
|
||||
}
|
||||
|
||||
@@ -222,7 +222,7 @@
|
||||
}
|
||||
|
||||
.compactItemName:hover {
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.distanceBadge {
|
||||
@@ -536,7 +536,7 @@
|
||||
|
||||
.geoError {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
margin: 0;
|
||||
max-width: 340px;
|
||||
text-align: center;
|
||||
@@ -567,9 +567,9 @@
|
||||
}
|
||||
|
||||
.quickSearchChip:hover {
|
||||
background: var(--accent-coral);
|
||||
background: var(--accent-coral-dark);
|
||||
color: white;
|
||||
border-color: var(--accent-coral);
|
||||
border-color: var(--accent-coral-dark);
|
||||
}
|
||||
|
||||
.exploringRow {
|
||||
@@ -712,7 +712,7 @@
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.hiwTitle {
|
||||
@@ -1062,7 +1062,7 @@
|
||||
|
||||
.editorialKicker {
|
||||
font-size: 0.68rem;
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@@ -1300,7 +1300,7 @@
|
||||
}
|
||||
|
||||
.chipTrackDeadline {
|
||||
color: var(--accent-coral, #e07256);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
.chipTrackOffer {
|
||||
|
||||
Reference in New Issue
Block a user