WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search
Improved Color Scheme of Syntax Highlighting
Status deployed
Focus area Templates
Phabricator T292968, T271895, T306867
Responsible Technical Wishes Team WMDE

This page documents 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]

General color improvements[edit]

The syntax highlighting colors are 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 experiencing 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 to differentiate sufficiently between them and the new, darker other colors.

Syntax Highlighting Changed Color Scheme - en.png

Color-blind mode[edit]

Background[edit]

The more accessible colors introduced by our team increase the contrast between the text and the background. For this, many colors had to get darker, which means that the contrast between the colors actually decreased. This new scheme is introduced to emphasize contrast between colors, especially for elements that often show up next to each other in wikitext (article and templates). It has been tested for multiple types of color-blindness and is inspired by a color palette by Okabe and Ito but adapted for our context.

Implementation[edit]

comparison of colors in syntax highlighting (CodeMirror): Before the general improvement; improved colors; colorblind scheme.
  • Four colors change
    • Headings, symbols, signatures, section names, magic words: #E4A400
    • Templates: #9C3A00
    • HTML tags, references, math: #56B4E9
    • Variables: #009E73
  • Bolding and underlining remains unchanged
  • Removed background highlights or background color for all types of content
Example[edit]

Left is current colors seen by someone with Protanopia, right is colorblind-friendly mode (also as seen by someone with Protanopia).

Colorblind mode syntax highlighting example.png

User setting[edit]

The color-blind mode can be enabled via a user preference, in the Editing tab > Accessibility section. New preference colorblind syntax highlighting.png

Status and Roadmap[edit]

General color improvements

  • Yes check.svg Done: March 24, 2021: deployed on
    • German, Turkish and Catalan Wikipedia
    • on group 0 (incl. mediawiki.org and testwiki) and Wikitech
  • Yes check.svg Done: March 9, 2022: Deployed on all remaining wikis except English Wikipedia
  • Yes check.svg Done: March 16, 2022: Deployed on English Wikipedia

Color-blind mode

  • Yes check.svg Done: May 10, 2022: deployed on all wikis with CodeMirror installed