Address color contrast of code line numbers when highlighted
Problem to solve
Currently, we highlight line number links on hover for diffs in the Changes tab of MRs as well as on the Commit page. The color contrast between the line number/link and the highlight/background is pretty poor, and does not meet accessibility guidelines.
MR diff example | Contrast rating |
---|---|
In addition, Global Search is leveraging some of this highlighting style for code results (!75279 (merged)) and will also be adding some additional links/icons that inherit this color. Fixing this contrast issue would solve for that case as well where there are color contrast issues.
Proposal
- Darken the link color (when line is highlighted) to be within accessibility guidelines.
- Change it so we are only using
1
highlight color, regardless of highlight theme (Currently we use two different highlight colors#9F9AB5
for dark schemes,#DED7FC
for light schemes based on which syntax scheme is set by user in their preferences.)
location | dark scheme example | light scheme example |
---|---|---|
Diffs | ||
Global Search (new) |
Tasks
-
Update link color to be Gray 600 #5e5e5e
(when line is highlighted) -
Update the highlight color to be Purple 100 #e1d8f9
(for all syntax schemes)
/cc @zcuddy
Edited by Nick Brandt