popcodeorg / popcodeorg/popcode

Improve syntax highlighting color constrast

Offen
#1,359 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

help wanted ux
Vorherrschende Sprache
JavaScript
Sterne
191
Forks
143
Ø Merge
4 T. 11 Std.
Gemergte PRs (30 T.)
5

Beschreibung

Inspired loosely by the idea behind colorblind-wombat-dark-syntax, improve the color contrast of syntax highlighting so that it is more accessible to students with various forms of colorblindness. As noted in the above linked article, most syntax highlighters need more 7 colors, so this will likely not be perfect, but at a minimum we can improve the contrast for syntax highlighting.

More research is probably needed to figure out good colors for the white background popcode uses, but here's a starting point on color palettes for colorblindness. Specifically, the 12 color palette looks very promising:

Concrete proposal is to roll our own ACE theme based on the 12 color palette, avoiding the lighter/lower-contrast tones (so we’d probably have about eight to work with). Looking at the built-in ACE themes, most appear to only be about 100 lines of CSS, so this seems pretty practical. And building our own from scratch removes a lot of the unpredictability associated with trying to adapt an existing theme.

Of course from an implementation standpoint we should be able to just write appropriately-scoped rules right into our own stylesheet.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, die integrierten ACE-Themes und das eigene Stylesheet des Projekts zu prüfen, um festzustellen, wie die Farben für die Syntaxhervorhebung derzeit angewendet werden. Untersuche die verlinkten farbenblindengerechten Paletten und vergleiche mögliche Farben auf dem weißen Hintergrund des Editors. Als erledigt gilt die Aufgabe, wenn ein benutzerdefiniertes ACE-Theme mit begrenztem Geltungsbereich oder Stylesheet-Regeln einen sichtbar verbesserten Kontrast für farbenblinde Benutzer bieten.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css, javascript
Bereich
accessibility, design, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.