Skip to content

Fix: Improve palette text contrast across light, dark, and high-contrast themesFix palette text contrast#6440

Open
abdulazees1111s wants to merge 3 commits intosugarlabs:masterfrom
abdulazees1111s:fix-palette-text-contrast
Open

Fix: Improve palette text contrast across light, dark, and high-contrast themesFix palette text contrast#6440
abdulazees1111s wants to merge 3 commits intosugarlabs:masterfrom
abdulazees1111s:fix-palette-text-contrast

Conversation

@abdulazees1111s
Copy link
Copy Markdown

@abdulazees1111s abdulazees1111s commented Mar 30, 2026

Summary

Improved text visibility and contrast for palette items across light, dark, and high-contrast themes.

Problem

Palette items (e.g., "Flow") had poor contrast in different themes:

  • Light theme: gray text on light background
  • Dark theme: low visibility in some states
  • High contrast mode: gray text on black background

This made the UI difficult to read and reduced accessibility.

Changes Made

  • Updated text color for palette items to ensure sufficient contrast

  • Improved background color for hover and selected states

  • Added theme-specific styling for:

    • Light theme
    • Dark theme
    • High contrast mode
  • Ensured consistent readability across all modes

Accessibility

These changes improve usability for users with:

  • Low vision
  • Color vision deficiencies
  • High contrast accessibility needs

Testing

  • Verified in light theme (text clearly visible)
  • Verified in dark theme (text readable with proper contrast)
  • Verified in high contrast mode (white text on black background)
  • Checked hover and selected states across all themes
  • No UI regressions observed

Screenshots

** Before

Image

**After

1.Light Mode

image

2.Dark Mode

image

3.High Contrast Mode

image

Issue

Fixes #6439

PR Category

  • Bug Fix
  • Accessibility improvement

@github-actions
Copy link
Copy Markdown
Contributor

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

@github-actions github-actions bot added bug fix Fixes a bug or incorrect behavior size/M Medium: 50-249 lines changed area/core Changes to core app entry files labels Mar 30, 2026
@abdulazees1111s
Copy link
Copy Markdown
Author

Hi! This is my first contribution. I’ve addressed the UI contrast issue across themes.
Please let me know if any changes are needed. Thanks!

@github-actions github-actions bot added size/XXL XXL: 1000+ lines changed area/javascript Changes to JS source files area/i18n Changes to localization files and removed size/M Medium: 50-249 lines changed labels Mar 30, 2026
@github-actions
Copy link
Copy Markdown
Contributor

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

Failed Tests:

toolbar.test.js

@zealot-zew
Copy link
Copy Markdown
Contributor

hey, i think this is totally different problem. the inconsistency happens sometimes when it doesn't load properly, but right now the in the master it works good.

@Chaitu7032
Copy link
Copy Markdown
Contributor

hey @abdulazees1111s , Thanks for the accessibility improvements ...

I noticed a few things that should be addressed before merging this :

  • This PR includes Tamil localization changes, which seem unrelated to the accessibility updates. It would be better to move those into a separate PR to keep things focused and easier to review.
  • There’s a leftover debug statement (console.log("Tamil added");) in js/toolbar.js that should be removed.
  • I also saw some formatting-only changes in dist/css/style.css and index.html that don’t appear to be part of this update it would be good to clean those up.
  • js/languagebox.js could use a bit of indentation/formatting cleanup for consistency.

Once these are sorted out, I’d feel much more comfortable approving the PR.

@Ashutoshx7
Copy link
Copy Markdown
Contributor

hy take a look everything is faling can't start reviewing at this stage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/core Changes to core app entry files area/i18n Changes to localization files area/javascript Changes to JS source files bug fix Fixes a bug or incorrect behavior size/XXL XXL: 1000+ lines changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve text contrast for selected tool items [UI/UX]

4 participants