Wikipedia:Technische Wünsche/Topwünsche/Verbesserung der Farben der Syntaxhervorhebung

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
Verbesserung der Farben der Syntaxhervorhebung
Status Umgesetzt
Ursprung Themenschwerpunkt Leichter mit Vorlagen arbeiten
Phabricator T292968, T271895, T306867
Bearbeitende Team Technische Wünsche

Diese Seite dient der Dokumentation von Entwicklungsverlauf, Recherche und Diskussionen rund um das Projekt „Verbesserung der Farben der Syntaxhervorhebung“. Anmerkungen und Fragen gerne auf der Diskussionsseite!

Beschreibung[Quelltext bearbeiten]

Seit Juni 2018 ermöglicht die Syntaxhervorhebung, bei der Bearbeitung von Wikitext die unterschiedlichen Elemente farbig und anderweitig unterschiedlich darzustellen. Der Modus für die Syntaxhervorhebung kann auf den drei Bearbeitungswerkzeugleisten mit dem Textmarker-Symbol OOjs UI icon highlight.svg ein- und ausgeschaltet werden.

Die dahinter stehende Software (CodeMirror) wird auch für die Umsetzung der Funktion „Zusammengehörige Klammerpaare hervorheben“ genutzt. Dabei ist dem Team Technische Wünsche aufgefallen, dass die Farben der Syntaxhervorhebung, insbesondere für farbenfehlsichtige Bearbeitende, schlecht abgestimmt und daher oft schlecht erkennbar sind.

Umsetzung[Quelltext bearbeiten]

Allgemeine Verbesserung der Farben[Quelltext bearbeiten]

Die Farben der Syntaxhervorhebung wurden leicht angepasst, sodass sie höhere Kontraste bieten und besser lesbar sind. Durch diese Verbesserung erfüllt die Funktion die Web Content Accessibility Guidelines (WCAG 1.4.3 AA). Dies hilft nicht nur Menschen mit reduzierter Sehkraft, sondern beispielsweise auch beim Bearbeiten bei Tageslicht.

Vorher/Nachher-Vergleich
Beispiel vorher
Beispiel neues Farbschema

Syntax Highlighting Changed Color Scheme - de.png

Modus für Farbenfehlsichtige[Quelltext bearbeiten]

Die zuvor eingeführten besser lesbaren Farben erhöhen den Kontrast zwischen dem Text und dem Hintergrund. Dafür mussten viele Farben dunkler werden, was bedeutet, dass der Kontrast zwischen den Farben abnimmt.

Für Farbenfehlsichtige wird dieses neue Schema eingeführt, um den Kontrast zwischen den Farben zu erhöhen, insbesondere bei Elementen, die im Wikitext häufig nebeneinander erscheinen (Artikel und Vorlagen). Es wurde für verschiedene Arten von Farbenfehlsichtigkeit getestet und inspiriert von https://jfly.uni-koeln.de/color/#pallet.

Umsetzung[Quelltext bearbeiten]

  • Vier Farben ändern sich in diesem Modus:
    • Überschriften, Sonderzeichen, Signaturen, Abschnittsnamen, Magische Wörter: #E4A400
    • Vorlagen: #9C3A00
    • HTML-Tags, Einzelnachweise, Formeln: #56B4E9
    • Variablen: #009E73
  • Fettung und Unterstreichungen bleiben unverändert.
  • Es gibt keine Hervorhebung oder farbige Markierung von Hintergründen, für keinen Inhaltstyp.
Beispiel[Quelltext bearbeiten]

Links sind die Farben, die jemand mit Protanopie sieht, rechts ist der Modus für Farbenfehlsichtige (ebenfalls aus der Sicht von jemandem mit Protanopie) Colorblind mode syntax highlighting example.png

Vergleich: Bisherige Farben, neue Farben und mit Modus für Farbfehlsichtige[Quelltext bearbeiten]

Comparison Colors in CodeMirror DE.png

Aktivieren in den Einstellungen[Quelltext bearbeiten]

Der Modus kann in den eigenen Einstellungen aktiviert werden, im Reiter Bearbeiten > Abschnitt Barrierefreiheit.

New preference colorblind syntax highlighting.png

Status[Quelltext bearbeiten]

Allgemeine Verbesserung der Farben

  • 24. März 2021: Bereitstellung auf
    • Grünes Häkchensymbol für ja deutschsprachiger, türkischer und katalanischer Wikipedia
    • Grünes Häkchensymbol für ja group0-Wikis, inkl. Mediawiki.org und Testwiki
    • Grünes Häkchensymbol für ja Wikitech
  • Grünes Häkchensymbol für ja 09. März 2022: Aktivierung auf allen weiteren Wikis außer der englischen Wikipedia
  • Grünes Häkchensymbol für ja 16. März 2022: Aktivierung auf der englischen Wikipedia

Modus für Farbenfehlsichtige

  • Grünes Häkchensymbol für ja 10. Mai 2022: Aktivierung auf allen Wikis mit CodeMirror