Improve UI contrast and selection visibility for better accessibility

[sachin9919]

Description

Improved the UI contrast and selection visibility across the sidebar and block panels to enhance accessibility, especially for users with color vision deficiencies.

PR Category

• Bug Fix
• Performance

Changes

• Improved hover and active states in sidebar (palette)
• Enhanced block selection visibility
• Reduced harsh color intensity
• Maintained original category-based color scheme

Issue

Fixes #6430

Before

After

[github-actions]

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

[Chaitu7032]

@sachin9919 . this PR is helpful for dark mode .. tested this LGTM

[Chaitu7032]

LGTM

[zealot-zew]

There is an existing focus available for the palette. we dont need the blue focus again!

please refer PR #5681 for the real problem and solution.

[Ashutoshx7]

i feel we need mentor feedback on this
do we even have to go in this direction or not

[sachin9919]

Hi everyone, thanks for the feedback!

I understand the concern regarding the existing focus styling and the reference to PR #5681. My intention with this PR is slightly different — it is specifically aimed at improving color contrast and visibility, especially for users with color vision deficiencies.

Currently, the hover/active states in the sidebar and palette are quite subtle and difficult to distinguish (particularly for color-blind users). The changes I proposed focus on:

Improving contrast between background and active elements
Making selection/hover states more distinguishable
Enhancing accessibility without significantly altering the existing design system

This is not meant to duplicate the existing focus behavior, but rather to address a usability gap in visibility and accessibility.

That said, I’m completely open to aligning with the preferred approach. If the direction should be adjusted (for example, modifying existing styles instead of adding new ones), I’d be happy to update the implementation accordingly.

Would appreciate guidance from mentors on whether improving contrast for accessibility in this way aligns with the project direction.

Thanks!

[zealot-zew]

I honestly think white highlight on a black background is pretty good both in terms of UI and usability. Thats what we currently have.

[sachin9919]

Thanks for the clarification!

I agree that the current white highlight on a dark background works well in general and is clean from a UI perspective.

My observation was mainly from an accessibility point of view — in some cases (especially for users with certain types of color vision deficiencies or low contrast sensitivity), the difference between states can still feel subtle during quick interactions.

That said, I completely understand your point and I don’t want to introduce unnecessary visual changes if the current approach is already sufficient.

Would it make sense to:

• Slightly enhance the existing highlight (instead of adding a new style), or
• Keep the current design but improve contrast only where it’s noticeably weak?

Happy to refine or scale down the changes based on what aligns best with the project’s design direction.

Thanks again for the feedback!