Skip to content

Change tabcolor0_base_color to a darker shade - #5713

Merged
kkbrum merged 8 commits into
learning-unlimited:mainfrom
Wandi534:fix/5528-nav-contrast-wcag
Jul 6, 2026
Merged

kkbrum merged 8 commits into
learning-unlimited:mainfrom
Wandi534:fix/5528-nav-contrast-wcag

Conversation

@Wandi534

Copy link
Copy Markdown
Contributor

Fix #5528: Darken fruitsalad theme base color to improve nav contrast ratio for WCAG 2.1 AA compliance

Description

#88cf00 to #5a8a00 to improve navigation bar contrast ratio
from 2.96:1 to meet WCAG 2.1 AA minimum requirement of 4.5:1
with white text.

Related Issue

Closes #5528

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update
  • Refactor / cleanup
  • CI/CD or build change

Testing

  • Existing tests pass
  • New tests added (if applicable)
  • Manually verified

AI Disclosure

Claude AI (claude.ai) was used to help identify the correct
LESS variable file to modify and understand the theme
structure. The bug was independently identified by me using
Chrome DevTools accessibility inspector. All changes were
reviewed and verified by me.

Checklist

  • Self-reviewed the code
  • Updated documentation (if needed)
  • No new warnings or errors introduced

Fix learning-unlimited#5528: Darken fruitsalad theme base color to improve 
nav contrast ratio for WCAG 2.1 AA compliance

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thanks for your first pull request! We're excited to have you contribute to ESP-Website.

Review process:

  • A maintainer will review your changes as soon as possible
  • Please ensure your PR follows our contributing guidelines
  • Make sure CI checks pass (lint and tests)

We're a volunteer-run project, so reviews may take some time. Thank you for your contribution! 🚀

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the Fruitsalad theme’s primary (tabcolor0) base green to a darker shade to improve navigation contrast and move toward WCAG 2.1 AA compliance.

Changes:

  • Darken @tabcolor0_base_color from #88cf00 to #5a8a00 in Fruitsalad theme LESS variables.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread esp/esp/themes/theme_data/fruitsalad/less/variables.less Outdated
@Akritiiiiiiii

Copy link
Copy Markdown

/assign

@Oval17 Oval17 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kkbrum
kkbrum enabled auto-merge (squash) July 6, 2026 15:38
…SS changes in PR learning-unlimited#5713

: #88cf00 -> #4d7a00 (WCAG 4.5:1 contrast)
Add : #4d7600
Add : #3f6200
@Oval17

Oval17 commented Jul 6, 2026

Copy link
Copy Markdown
Member

no wait @kkbrum

@Oval17

Oval17 commented Jul 6, 2026

Copy link
Copy Markdown
Member

Now we can merge it
as we use SCSS pipeline now so added there as well.
@kkbrum

@Oval17 Oval17 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
Added SCSS Pipeline

@kkbrum
kkbrum merged commit 426ec62 into learning-unlimited:main Jul 6, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Navigation bar text fails WCAG accessibility contrast requirements

5 participants