WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting
|Improved Color Scheme of Syntax Highlighting|
|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!
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.
General color improvements
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.
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.
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.
- 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
Left is current colors seen by someone with Protanopia, right is colorblind-friendly mode (also as seen by someone with Protanopia).
The color-blind mode can be enabled via a user preference, in the Editing tab > Accessibility section.
Status and Roadmap
General color improvements
- Done: March 24, 2021: deployed on
- German, Turkish and Catalan Wikipedia
- on group 0 (incl. mediawiki.org and testwiki) and Wikitech
- Done: March 9, 2022: Deployed on all remaining wikis except English Wikipedia
- Done: March 16, 2022: Deployed on English Wikipedia
- Done: May 10, 2022: deployed on all wikis with CodeMirror installed