Skip to content

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
Screen_Shot_2021-12-01_at_3.14.24_PM Screen_Shot_2021-11-30_at_5.49.46_PM
Screen_Shot_2021-12-02_at_1.46.17_PM Screen_Shot_2021-12-02_at_1.46.51_PM

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 Screen_Shot_2021-12-03_at_2.38.10_PM Screen_Shot_2021-12-03_at_2.38.24_PM
Global Search (new) Screen_Shot_2021-12-03_at_2.40.30_PM Screen_Shot_2021-12-03_at_2.40.53_PM

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