Project name colours are not accessible #6338
Description
Describe the bug
When running vitest UI on a Vitest Workspace, some of the workspace names are in a colour that is very hard to look at / read.
I can see the colours are basically defined here:
vitest/packages/ui/client/utils/task.ts
Line 28 in 85fb94a
In particular, blue is hard to read on dark mode, and yellow is hard to read on light mode.
All colours used should be checked against an accessibility colour checker to ensure their contrast is high enough, and this likely means having a different colour set for light mode and dark mode, as it's hard to have a single colour which works for both and also looks good.
Here are some screenshots:
Reproduction
To reproduce, start with the Workspace vitest example:
https://github.com/vitest-dev/vitest/tree/main/examples/workspace
Then rename one of the package folders to cli (this won't be the only way to force it to be blue, just one I know works)
Run UI tests and set your theme in vitest UI to dark mode
See result:
System Info
System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1
Memory: 201.28 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
Browsers:
Chrome: 127.0.6533.100
Safari: 17.5
npmPackages:
@vitejs/plugin-react: ^4.2.1 => 4.3.1
@vitest/ui: latest => 2.0.5
vite: latest => 5.4.0
vitest: latest => 2.0.5Used Package Manager
npm
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.