Add accessible colour set to use in line plots

Offen
  • Stimmt etwas nicht?
#357 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

The issue gives Davidia's current eight-colour set as a reference, but the payload does not name the theme file or the plotting code, so first locate where the theme is defined in this TypeScript repo. The work is choosing a palette of 8-10 colours with good contrast, plus matching lighter or darker variants for dark mode, and exporting it from the theme. Done means a palette that a maintainer agrees on, checked for colour-blind distinguishability and contrast, and a note that line plots should also vary dash or weight.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accepted

Propose to add a colour set that can be imported with the theme to use in line plots.

  • Should be around 8-10 colours
  • Colours clearly distinguishable from one another (although in line plots, colour should not be the only way to distinguish between lines, e.g. use dots/dashes with differing weight)
  • Good contrast for visual impairments (low vision, colour blindness)
  • Work for light and dark mode (same hue with brightness/lightness adjusted)

As an example, Davidia's current colour set is
'rgb(0, 0, 0)', // #000000, black
'rgb(0, 158, 115)', // #009e73, teal
'rgb(230, 157, 0)', // #e69d00, orange
'rgb(86, 179, 233)', // #56b3e9, light blue
'rgb(240, 228, 66)', // #f0e442, yellow
'rgb(0, 114, 178)', // #0072b2, blue
'rgb(213, 94, 0)', // #d55e00, dark orange
'rgb(204, 121, 167)', // #cc79a7, pink

Image

A useful tool for colour set accessibility.

Vorherrschende Sprache
TypeScript
Sterne
9
Forks
4
Ø Merge
3 T. 12 Std.
Gemergte PRs (30 T.)
14

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus DiamondLightSource/sci-react-ui

Alle Issues in DiamondLightSource/sci-react-ui

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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