Fix WCAG contrast issues in language switcher and footer for all languages#2440
Merged
Conversation
- Active language links: solid yellow background with dark text (was transparent yellow bg with yellow text) - Remove opacity: 0.85 from footer-bottom/disclaimer (reduced contrast) - Add explicit color for site-language-switcher links - Use full-opacity colors for rm-footer-langs and rm-footer-legal - Use primary-color for footer-disclaimer links (higher contrast) - Ensure dark mode overrides maintain contrast Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/62b28c3b-520a-407b-b398-91821ffb8846 Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
…lang text Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/62b28c3b-520a-407b-b398-91821ffb8846 Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
Copilot created this pull request from a session on behalf of
pethers
May 12, 2026 22:54
View session
Contributor
🏷️ Automatic Labeling SummaryThis PR has been automatically labeled based on the files changed and PR metadata. Applied Labels: html-css,size-s Label Categories
For more information, see |
Contributor
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
pethers
approved these changes
May 12, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to resolve WCAG 2.1 AA contrast findings (Lighthouse) by adjusting CSS for the language switcher active state and several footer text/link styles across all language versions.
Changes:
- Updated active language link styling to use a solid yellow background and heavier font weight.
- Increased footer text/link contrast by removing opacity and replacing
color-mix(...)usage with fully opaque theme tokens. - Adjusted footer disclaimer link colors and added dark-mode-specific overrides.
Comments suppressed due to low confidence (1)
styles.css:13686
- The
@media (prefers-color-scheme: dark)andhtml[data-theme="dark"]blocks for.site-language-switcher a.activeonly re-declare the samecoloras the base rule, which adds noise and makes the cascade harder to reason about. Consider removing these duplicates (or scoping them only if you intend different values per mode).
/* Dark-mode active language link — dark text on solid yellow bg */
@media (prefers-color-scheme: dark) {
.site-footer .language-grid a.active,
.site-language-switcher a.active {
color: var(--dark-bg, #0a0e27);
}
}
html[data-theme="dark"] .site-footer .language-grid a.active,
html[data-theme="dark"] .site-language-switcher a.active {
color: var(--dark-bg, #0a0e27);
}
Comment on lines
13667
to
+13672
| .site-footer .language-grid a.active, | ||
| .site-language-switcher a.active { | ||
| color: var(--primary-yellow, #ffbe0b); | ||
| color: var(--dark-bg, #0a0e27); | ||
| border-color: var(--primary-yellow, #ffbe0b); | ||
| background: rgba(255, 190, 11, 0.12); | ||
| background: var(--primary-yellow, #ffbe0b); | ||
| font-weight: 700; |
Comment on lines
12385
to
12392
| .footer-disclaimer a { | ||
| color: var(--link-color); | ||
| color: var(--primary-color, #006633); | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .footer-disclaimer a:hover { | ||
| color: var(--link-hover); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes accessibility contrast issues reported by Lighthouse (score 96) across all 14 language versions. The changes are CSS-only and affect the language switcher and footer elements.
Changes
Active language links (
.site-language-switcher a.active,.site-footer .language-grid a.active)#ffbe0b) on nearly transparent yellow background (rgba(255, 190, 11, 0.12)) — ~1.5:1 contrast ratio on light backgroundsvar(--dark-bg)) on solid yellow background (#ffbe0b) — ~12:1 contrast ratio ✓Footer opacity
opacity: 0.85applied to.footer-bottom,.footer-disclaimer,.rm-footer-legal— reduced effective contrast below WCAG thresholdsFooter language pills (
.rm-footer-langs a)color-mix(in srgb, var(--light-text) 85%, transparent)— reduced contrastcolor: var(--light-text, #e0e0e0)— full opacity textFooter legal text (
.rm-footer-legal)color-mix(in srgb, var(--light-text) 65%, transparent)— significantly reduced contrastcolor: var(--text-secondary, #aaaaaa)— proper theme-aware colorFooter disclaimer links
color: var(--link-color)—#007744in light mode (5.05:1 ratio, borderline)color: var(--primary-color, #006633)— 6.48:1 ratio in light mode ✓Additional improvements
color: var(--text-color)for.site-language-switcher a(non-active links)WCAG 2.1 AA Compliance
All modified elements now meet the minimum 4.5:1 contrast ratio for normal text (WCAG 1.4.3).