feat(accessibility): Introduce high contrast mode theme for enhanced readability, navigation and overall accessibility

[Nikhita-14]

Summary
This PR adds a new high contrast theme to Music Blocks, designed to improve accessibility for users with visual impairments. The theme features a black background with white text, solid white 55px icons, and yellow hover effects in Planet for enhanced visibility. The high contrast theme is also fully supported on the Planet page.

Changes Made

-js/activity.js – Added "highcontrast" to the themes array

-js/utils/platformstyle.js – Added comprehensive high contrast color definitions

-js/toolbar.js – Updated to include the high contrast theme option

-js/__ tests __/toolbar.test.js – Adjusted to match the new translation string count

-planet/js/Planet.js – Added high contrast theme support to the Planet page

-planet/css/planetThemes.css – Added high contrast styles for the Planet page

-css/darkmode.css – Implemented high contrast icon and hover box styles

Features

High contrast color scheme: Black background (#000000) with white text (#ffffff)

Large solid white icons: 55px size for improved readability

Yellow hover effects: Borders and glow effects on interactive elements

Complete theme support: Applies to all UI components across main and Planet pages

Accessible design: Follows WCAG AA standards for contrast ratios

Usage
Users can select the high contrast theme from the toolbar dropdown to experience the improved accessibility features, including full support on the Planet page.

Video Reference

High.Contrast.Theme.webm

PR Category

• Feature
• Bug Fix
• Performance
• Tests
• Documentation

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Ashutoshx7]

@Nikhita-14 hy a video for reference would be nice

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Nikhita-14]

Sure @Ashutoshx7! I'll upload soon

[Ashutoshx7]

Screen.Recording.2026-02-04.000057.mp4

nice works

1.did u see that on hover on theme icon ( high contrast mode ) that becomes too white adjust accent color please and also then (

2. The font-size: 55px !importanton.material-icons` will break the entire UI. Please remove this rule and let icons maintain their contextual sizes.

3. remove scrollbar too

this is a great addition to the music blocks ( for color blind children ) can u also attend next music blocks meet we can discuss more on this

[Ashutoshx7]

remove these two files

[Nikhita-14]

Thanks @Ashutoshx7! I’ll fix the hover accent, remove the !important font-size rule, drop the scrollbar, and clean up the extra files. Appreciate the accessibility feedback!
Happy to join the next Music Blocks meet to discuss further.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Nikhita-14]

Hi @Ashutoshx7,
I’ve addressed all the feedback:

• Adjusted the hover accent for the high-contrast theme

• Removed the global font-size: 55px !important icon override

• Removed the scrollbar

• Cleaned up unintended locale file changes so the PR matches upstream

Happy to make further changes or refinements if needed.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Nikhita-14]

Resolved merge conflicts and updated theme preferences.

[Ashutoshx7]

I’ve addressed all the feedback:

• Adjusted the hover accent for the high-contrast theme
• Removed the global font-size: 55px !important icon override
• Removed the scrollbar
• Cleaned up unintended locale file changes so the PR m

merge conflict again
and also why didm't spoke about this issue i was waiting for you to speakkk for this

[Nikhita-14]

Hi @Ashutoshx7,
I’m really sorry for not speaking during the last meeting. I was having network issues and the audio was unstable, which made it difficult.
I’ll definitely make sure to speak and discuss this in the upcoming Music Blocks meeting.
Thanks so much for understanding :)

[Nikhita-14]

I’ll look into why the tests are failing and work on getting them resolved. I’ll update soon

[Nikhita-14]

Looking at the logs, the failing checks appear to be caused by temporary GitHub Actions/network issues, the runners couldn’t fetch the repository (503 / 500 errors), not by the code itself.
I’ll re-run the checks once the services are stable to confirm everything passes.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Nikhita-14]

I resolved merge conflicts in index.html

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Nikhita-14]

Video Reference:-
Theme Toggle.webm

Previously, when toggling the theme, the palette theme didn’t switch instantly. The theme change would only be reflected once the cursor interacted with the palette, causing a delay in the visual update.

This issue occurred because the refreshUIComponents method wasn’t correctly updating the palette theme right away. I’ve modified the method to ensure that the palette theme is immediately updated when the theme toggle takes place, providing a smoother user experience without any delay.

Now, the palette theme will instantly reflect the current theme when toggled, without needing additional interaction from the user.

@walterbender @Ashutoshx7 Could you please confirm if these updates meet your expectations? Let me know if there’s anything that needs adjustment. Thank you for your time!

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

This is looking much better. Just a couple of little things: the black on red for the notes palette and media palette are a bit had to read. Maybe we need to lighten (and desaturate) the red a bit? (red peaks at about 30%. green 60% and blue 10%, so any blocks that are pure red or blue are going to be too dark for black text in high-contrast mode.)

And, please sort out the merge conflicts.

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

palette.test.js
logo.test.js
logoconstants.test.js

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

palette.test.js
logo.test.js
logoconstants.test.js

[Nikhita-14]

@walterbender I have updated the colors for better accessibility. The colors have been desaturated and verified for contrast against black text using the WebAIM Contrast Checker. These changes are now WCAG-approved for readability in High Contrast Mode.

[Ashutoshx7]

@walterbender I have updated the colors for better accessibility. The colors have been desaturated and verified for contrast against black text using the WebAIM Contrast Checker. These changes are now WCAG-approved for readability in High Contrast Mode.

recording.mp4

Lgtm, ready for the merge @walterbender

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

It is getting closer.
Still a few issues:

[walterbender]

Are the labels on the blocks black or gray? They look gray but they should be black to enhance the contrast.

[Nikhita-14]

Fix 1) Fixed the coloring issue in the grid menu from black to white in high contrast mode

Fix 2) Updated the pie menu colors in all three platform themes (dark, light, and highcontrast) as all symbols were not visible.

Fix 1 Image)

Before Fix 2)

After Fix 2)

@walterbender I hope these changes meet the requirements. Regarding the label text, I’ve double-checked and it appears black, not gray. Thank you for your thorough reviews and I’m happy to make any further adjustments if needed!

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[Ashutoshx7]

Hy @Nikhita-14 recently we updated ci check now we have to use the template and mark the pr
can u use that template and check the feature box for this