Page MenuHomePhabricator

Test instance: Update CodeMirror color scheme
Closed, ResolvedPublic0 Estimated Story Points


Update the colors used in syntax highlighting to meet a11y standards (non-accessible colors shown crossed out). In order to have an accessible orange, with enough contrast to the red, the red also needs to change. The two groups with blue will use the same blue, instead of two different blues.

Mock with color information:

Syntax Color Scheme.png (1×3 px, 139 KB)

New hex values
Black (body text) = #333333
Blue (heading, signatures, links, ...) = #014CDD
Purple = no change
Orange/brown (variables) = #B25E02
Red (parser functions) = #D91E18
Green (HTML, math, ...) = #008000


  • Update colors for each of the different color groups
  • Remove background highlighting for nested elements

Nice to have

Relevant links
Current CSS
Overview of existing styling

Event Timeline

Lena_WMDE set the point value for this task to 2.Sep 21 2020, 9:47 AM

I adapted the syntax highlighting according to the description above (new colours, removed different text sizes, removed background in nested elements). Here you can see the differences:

syntaxhighlighting_before.png (762×1 px, 129 KB)
syntaxhighlighting_after.png (761×1 px, 129 KB)

Looks great! Thanks for posting the preview. I'm not seeing it on the test instance though (sorry if you discussed this in the daily while I couldn't hear...)

Remove background highlighting for nested elements

Tested and it looks like the background highlighting is still there at the moment both with this and with the colorblind color scheme. This still needs to be removed

Thanks for the hint! I did not have an example with so many layers. :O

Interestingly links that are inside of an nested element get a different background-colour than links that are on their own. In this screenshot I removed all the "normal" background colours. But the links are still there.

link-backgrounds.png (355×1 px, 74 KB)

I guess this should change as well? Do you want all links with the same background colour or remove them completely?

Ok thought more about our discussion - let's change the blue to #36c.

Documenting other outcomes:

  • Yes, remove all background colors, including for links.
  • Also, consider documenting the logic behind what is bolded to see if any adjustment needs to made in order to make it more consistent/communicative. Likely, we will leave bolding as-is unless there is a clear route for improvement.
Lena_WMDE changed the point value for this task from 2 to 0.