Ho un colore primario predefinito: #4d238c. Il problema è che il colore generato per $primary-medium (#a179de) non rispetta le linee guida sull’accessibilità, quindi devo renderlo più scuro.
Sembra laborioso modificarlo in tutti i punti in cui il sistema utilizza il colore medio, quando potrei semplicemente sovrascrivere $primary-medium impostandolo, ad esempio, su rosso.
Sì, capisco perfettamente. Al momento non esiste un modo per sovrascrivere direttamente le variabili secondarie che generiamo automaticamente, poiché queste vengono definite in modo fisso durante la costruzione del CSS. Quindi, nel breve termine, dovrai apportare queste modifiche manualmente.
Alcune spiegazioni:
I sistemi di colori sono pensati come un modo super semplice per definire le palette cromatiche; qualsiasi cosa più specifica richiede CSS personalizzato. Questo è stato discusso in modo più approfondito qui: Customizing colors - #2 by awesomerobot
Alcuni punti su cui riflettere:
Non credo che un editor avanzato dei sistemi di colori che permetta di sovrascrivere quelle variabili secondarie sarebbe una cattiva idea, ma dato che vengono utilizzate in modo così ampio, probabilmente dovresti comunque scrivere del CSS personalizzato.
Ad esempio… potresti voler sovrascrivere tutte le occorrenze di testo di $primary-medium… ma questa variabile è utilizzata anche in contesti come i bordi e altri elementi dove un contrasto più elevato con $primary-medium non sarebbe desiderabile. Quindi, nel migliore dei casi, un editor avanzato dei colori potrebbe ridurre la quantità di CSS personalizzato necessaria, ma non eliminarla completamente.
Detto questo… il problema principale qui è il contrasto del testo per l’accessibilità, giusto? I nostri stili predefiniti falliscono in termini di contrasto del testo in alcune aree, ed è possibile che se migliorassimo in questo senso, per te non sarebbe nemmeno un problema…
Quindi penso che nel prossimo futuro il nostro team possa esaminare l’accessibilità predefinita del testo, e in un secondo momento potremo valutare il miglioramento degli strumenti per i sistemi di colori per tenere conto dell’accessibilità (https://cloudflare.design/color/ è un interessante esperimento che tiene conto del contrasto del testo, ad esempio).
Ciao Kris,
Grazie per la risposta così rapida.
Sì, la nostra preoccupazione principale è l’accessibilità, poiché stiamo utilizzando il tuo prodotto in un contesto governativo.
Ho lavorato sull’accessibilità del contrasto in modo graduale, ma come discusso, sarebbe ideale che i colori predefiniti fossero accessibili.
Il sito, tuttavia, non presenta solo problemi di contrasto; ad esempio, altri elementi che spesso falliscono sono: gli elementi di lista (<li>) non sono contenuti in elementi genitore <ul> o <ol>.
Al momento, il contrasto è l’unico aspetto su cui posso intervenire, quindi va bene così per ora, in attesa di una soluzione definitiva.
Siamo incappati in questo thread a causa di un problema simile; lo abbiamo risolto con una soluzione temporanea aggiungendo quanto segue al CSS comune del tema:
:root {
--primary-medium: #666666;
}