WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting

This page is for documenting the development progress, research and discussions about the project "Improving Syntax Highlighting Colors". Comments and questions are welcome on the talk page!

Improved Color Scheme of Syntax Highlighting
Status Deployed to first group of wikis
Focus area Templates
Responsible Technical Wishes Team WMDE

DescriptionEdit

As of June 2018, Syntax highlighting uses color to make it easier to visually separate article text from the code for links, references and templates, when editing wikitext. Syntax highlighting mode can be turned on and off on the editing toolbars with the   highlighter icon.

The software behind this (CodeMirror) is also used to implement the "Highlight related bracket pairs" feature. The Technical Wishes team has noticed that the colors of the syntax highlighting are hard to read, and do not meet accessibility criteria for low-vision users.

ImplementationEdit

The syntax highlighting colors will be slightly adjusted to provide higher contrast, accessibility and better readability. This improvement makes the feature compliant with the Web Content Accessibility Guidelines (WCAG 1.4.3 AA). This helps not only people with reduced vision, but also any users who have temporary low vision, for example from glare while editing in daylight.

Examples

The graphic below shows all the currently non-compliant colors crossed out, with the new high-contrast color on the right. A couple of compliant colors also had to be changed, so that there is enough differentiation between them and the new, darker other colors.

 


Try it outEdit

If you would like to see how this feels in context, you can try it out before it’s deployed by following the instructions below. If you do try it out, we’d love to hear your feedback.

  • Open the page Special:MyPage/common.css on the wiki where you want this to apply or use m:Special:MyPage/global.css for these colors to apply to all wikis.
  • Copy, paste and save this:
    @import url("https://meta.wikimedia.org/wiki/User:Elisha_Cohen_(WMDE)/syntax_highlighting_demo.css?action=raw&ctype=text/css");
    

Status and RoadmapEdit

  •   Done March 24, 2021: deployed on German, Turkish and Catalan Wikipedia & on group 0 (incl. mediawiki.org and testwiki) and Wikitech
  • More wikis to follow