Update code coverage bar color to increase contrast
What does this MR do?
- Updates the vertical bar color that indicates what code is covered in a test, and what is not. The current green/orange combination is tough to differentiate with the small size, and even tougher if the user experiences any form of red/green color blindness.
- Uses different line thickness (4px/2px) for coverage/no-coverage to further differentiate the two and not rely on color alone.
Screenshots
The second row evaluates the color combination in a simulator with Deuteranomoly color blindness.
| Before | After |
|---|---|
 |
 |
 |
 |
$green-500 (#108548), $orange-500 (#ab6100) |
$green-400 (#2da160), $red-400 (#ec5941) |
 |
 |
 |
 |
#b5bd68, #de935f
|
#b3e841, #ff4f33
|
Out of scope
Color changes for syntax highlighting themes other than White and Dark, although the border width will get the change to 4px/2px.
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
- [-] Separation of EE specific content
Availability and Testing
N/A
Security
N/A
Related to #278469 (closed)
Edited by Jeremy Elder