WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting
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!
| Improved Color Scheme of Syntax Highlighting | |
|---|---|
| Status | deployed |
| Focus area | Templates |
| Phabricator | T292968, T271895, T306867 |
| Responsible | Technical Wishes Team WMDE |
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 
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
-
before -
new color scheme
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.
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
- 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).
User setting edit
The color-blind mode can be enabled via a user preference, in the Editing tab > Accessibility section.
Status and Roadmap edit
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
Color-blind mode
- Done: May 10, 2022: deployed on all wikis with CodeMirror installed