Skip to content

[5532] UX: Improve accessibility of default theme - colour palette#5613

Merged
knolleary merged 10 commits intodevfrom
5532-accessibility-colors
Apr 15, 2026
Merged

[5532] UX: Improve accessibility of default theme - colour palette#5613
knolleary merged 10 commits intodevfrom
5532-accessibility-colors

Conversation

@n-lark
Copy link
Copy Markdown
Contributor

@n-lark n-lark commented Apr 6, 2026

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Proposed changes

Resolves #5532

See details of changes here.

Checklist

  • I have read the contribution guidelines
  • For non-bugfix PRs, I have discussed this change on the forum/slack team.
  • I have run npm run test to verify the unit tests pass
  • I have added suitable unit tests to cover the new/changed functionality

@n-lark n-lark requested a review from knolleary April 6, 2026 14:58
@n-lark n-lark self-assigned this Apr 6, 2026
@n-lark n-lark linked an issue Apr 6, 2026 that may be closed by this pull request
Copy link
Copy Markdown
Member

@knolleary knolleary left a comment

Choose a reason for hiding this comment

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

In general, looks good. Two items that don't quite work for me yet.

  1. The contrast of selected-vs-unselected toggle buttons - for eg the tab buttons:
Image
  1. The selected node appearance. The blue takes getting used to, which I'm prepared to do - but I think it needs something else. I'm going to experiment on this and share some ideas.

@knolleary
Copy link
Copy Markdown
Member

We recently added the node highlight element used when searching for node to highlight its position. Whilst I very much dislike the flashing effect I went with for it (and we will be changing), it does mean the hardwork was done to be able to draw a containing box around any node. Making use of that when selected:

image

@knolleary
Copy link
Copy Markdown
Member

I've updated the selected node appearance via #5623 (without the colour changes). Once that's in, lets update this branch and then we can do battle over which shade of blue we use.

@n-lark
Copy link
Copy Markdown
Contributor Author

n-lark commented Apr 14, 2026

Hey @knolleary these are both addressed!

  1. The contrast of selected-vs-unselected toggle buttons - for eg the tab buttons:
  2. The selected node appearance. The blue takes getting used to, which I'm prepared to do - but I think it needs something else. I'm going to experiment on this and share some ideas.

For 2 - I went ahead and changed the workspace-button-color-selected to #0d74ce - this passes 4.14:1 on the selected button background. It also mirrors the change we did for dark theme under #5625

Screenshot 2026-04-14 at 11 03 54 AM

@knolleary
Copy link
Copy Markdown
Member

Not liking the blue icons. I'm going to be opinionated here and push some tweaks - I'll leave the blue alone.

  • revert the workspace-button-color-selected change
  • darken the background of the selected state. Improves the contrast between states without leaking blue ink.
image

@knolleary
Copy link
Copy Markdown
Member

I spotted the fix from #5607 was applying to all tabs and needed scoping to just the workspace tabs. Have pushed that fix here.

@knolleary knolleary merged commit d98c3b2 into dev Apr 15, 2026
5 checks passed
@knolleary knolleary deleted the 5532-accessibility-colors branch April 15, 2026 14:05
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.

UX: Improve accessibility of default theme - colour palette

2 participants