DependencyTrack / DependencyTrack/frontend
Improve contrast for non-text UI elements
- Dominant language
- Vue
- Stars
- 171
- Forks
- 250
- Avg merge
- 10h 56m
- Merged PRs (30d)
- 84
Description
### Current Behavior
Some non-text UI elements such as dashboard panels, charts, and page sections do not have sufficient contrast with surrounding backgrounds.
Borders and containers blend into the page, making sections difficult to distinguish visually.
### Steps to Reproduce
Steps to Reproduce
1. Open the application and log in
2. Navigate to the dashboard
3. Observe the panels, graphs, and container borders
4. Notice that many elements are difficult to distinguish due to low contrast
### Expected Behavior
All non-text UI elements such as panels, cards, and graph containers should have sufficient visual contrast (minimum 3:1) to clearly distinguish them from the background.
### Dependency-Track Frontend Version
4.x
### Browser
Microsoft Edge
### Browser Version
149.0.4022.69 (Official build) (64-bit)
### Operating System
Windows
### Checklist
- [x] I have read and understand the [contributing guidelines](https://github.com/DependencyTrack/dependency-track/blob/main/CONTRIBUTING.md#filing-issues)
- [x] I have checked the [existing issues](https://github.com/DependencyTrack/frontend/issues) for whether this defect was already reported
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the dashboard entry point in the application and inspect its panels, charts, cards, and container borders in Edge. Audit the affected non-text UI elements against the stated 3:1 contrast requirement; done means the panels, graphs, and page sections are clearly distinguishable from their backgrounds.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100