Ich habe eine Standard-Hauptfarbe: #4d238c. Das Problem ist: Die generierte Farbe für $primary-medium (#a179de) erfüllt die Barrierefreiheitsrichtlinien nicht, daher muss ich sie abdunkeln.
Es scheint mühsam, sie an allen Stellen zu ändern, an denen das System die mittlere Farbe verwendet, wenn ich stattdessen einfach $primary-medium überschreiben könnte, um sie beispielsweise rot zu machen.
Ja, das kann ich absolut verstehen. Momentan gibt es keine Möglichkeit, automatisch generierte sekundäre Variablen direkt zu überschreiben, da diese beim Erstellen des CSS festgelegt sind. Daher musst du diese Änderungen vorerst manuell vornehmen.
Einige Erklärungen:
Farbschemata sollen eine super-einfache Möglichkeit bieten, Farben zu definieren. Alles, was spezifischer ist, erfordert benutzerdefiniertes CSS. Dies wurde hier etwas ausführlicher diskutiert: Customizing colors - #2 by awesomerobot
Einige Punkte, die wir bedenken sollten:
Ich denke nicht, dass ein erweiterter Farbschema-Editor, der Zugriff zum Überschreiben dieser sekundären Variablen bietet, eine schlechte Idee wäre. Da diese Variablen jedoch so breit eingesetzt werden, müsstest du wahrscheinlich ohnehin etwas CSS schreiben.
Zum Beispiel… möchtest du vielleicht alle Text-Vorkommen von $primary-medium überschreiben… aber die Variable wird auch an Stellen für Rahmen und andere Elemente verwendet, wo der höhere Kontrast von $primary-medium nicht wünschenswert wäre. Daher würde ein erweiterter Farbeditor höchstens den benötigten Aufwand für benutzerdefiniertes CSS reduzieren, aber nicht vollständig eliminieren.
Das heißt… das Hauptproblem hier ist doch der Textkontrast für Barrierefreiheit, oder? Unsere Standardstile erfüllen in einigen Bereichen die Anforderungen an den Textkontrast nicht, und es ist möglich, dass dies für dich gar kein Problem wäre, wenn wir dies verbessern…
Daher denke ich, dass unser Team in naher Zukunft die Standard-Barrierefreiheit für Text prüfen kann. Langfristig können wir dann daran arbeiten, unsere Farbschema-Tools so zu verbessern, dass sie Barrierefreiheit berücksichtigen (https://cloudflare.design/color/ ist zum Beispiel ein spannendes Experiment, das den Textkontrast einbezieht).
Hallo Kris,
danke für deine schnelle Rückmeldung.
Ja, unser Hauptanliegen ist die Barrierefreiheit, da wir dein Produkt im staatlichen Kontext einsetzen.
Ich habe die Kontrastprobleme schrittweise umgangen, aber wie besprochen wäre es gut, wenn die Standardfarben barrierefrei wären.
Die Website scheitert jedoch nicht nur am Kontrast. Weitere häufig fehlerhafte Elemente sind beispielsweise: Listenelemente (<li>) sind nicht in übergeordnete <ul>- oder <ol>-Elemente eingebettet.
Im Moment kann ich jedoch nur den Kontrast steuern, daher ist das vorerst in Ordnung, bis eine Lösung implementiert ist.
Wir sind aufgrund eines ähnlichen Problems auf diesen Thread gestoßen und haben es mit einem Workaround gelöst, indem wir Folgendes zur gemeinsamen CSS-Datei des Themes hinzugefügt haben:
:root {
--primary-medium: #666666;
}