WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

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!

Description[edit]

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 OOjs UI icon highlight.svg 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.

Implementation[edit]

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.

Syntax Highlighting Changed Color Scheme - en.png


Try it out[edit]

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 Roadmap[edit]

  • Yes check.svg Done March 24, 2021: planned deployment on German, Turkish and Catalan Wikipedia
  • More wikis to follow