Colore

Colore accessibile

Non utilizzare solo il colore per indicare la presenza di un componente dell'interfaccia utente o il suo stato: utilizza l'iconografia e/o la forma per facilitare la differenziazione. Non indicare l'esito positivo/gli errori SOLO con il colore. Utilizza icone o testo.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Contrasto

• Standard minimi di contrasto: mantieni un rapporto di 4,5:1 per il testo normale e di 3:1 per il testo o le icone di grandi dimensioni.
• Garantisci gli standard di contrasto non testuale: mantieni un rapporto di contrasto minimo di 3:1 per i bordi e gli stati dei componenti dell'interfaccia utente.
  • Sono inclusi gli elementi visivi (bordi, sfondi, ombreggiature, sottolineature) che formano il confine o indicano la presenza di un componente UI (ad es. i bordi dei campi di immissione).
  • Sono inclusi anche gli elementi visivi che indicano gli stati attivi all'interno di un componente (ad esempio, i segni di spunta delle caselle di controllo o i pulsanti di attivazione/disattivazione).
  • Avvertenza: soddisfare il contrasto non testuale 3:1 può mettere a dura prova i design minimalisti. Gradienti morbidi o ombreggiature interne/esterne sottili possono ammorbidire i confini visivi, soddisfacendo al contempo i requisiti di accessibilità.
• Utilizza prefers-contrast solo quando è necessario: utilizza @media (prefers-contrast: more) quando il design utilizza elementi ad alto contrasto (ad es. bordi sottili, testo secondario disattivato) che devono essere rafforzati; la maggior parte dei siti che soddisfano già il contrasto di base non ne avrà bisogno.

Combinazioni di colori chiari e scuri

• Supporta le combinazioni di colori chiari e scuri: rispetta @media (prefers-color-scheme: dark) e abbinalo alla proprietà CSS color-scheme in modo che i controlli dei moduli, le barre di scorrimento e altre piattaforme visualizzate dall'UA corrispondano. Per maggiori dettagli, consulta l'articolo Modalità Buio.

Modalità colori forzati

• Supporto della modalità Forced Colors: in modalità Forced Colors (contrasto elevato su Windows), il browser sostituisce i colori dell'autore con parole chiave di sistema e rimuove background-image, box-shadow e border-image. Definisci i colori di riserva del sistema per i token di colore utilizzando @media (forced-colors: active).
• Utilizza forced-color-adjust: none solo quando il colore è un'informazione essenziale (evidenziatore di sintassi, campione del selettore colori). NON utilizzare forced-color-adjust: none solo per preservare l'estetica.
• Non fare affidamento su background-image, box-shadow o border-image per trasmettere bordi, separatori o stato: scompaiono nei colori forzati (e spesso anche nella stampa). Se devi farlo, assicurati che esista un'alternativa in modalità colori forzati, ad esempio outline o border con parole chiave dei colori di sistema (CanvasText, LinkText, ButtonText, Highlight, GrayText e così via).

Generazione delle tinte in corso…

Prima di generare le tonalità in modo dinamico, controlla se puoi utilizzare un token di progettazione predefinito esistente. Ciò consente un controllo molto maggiore da parte del designer e garantisce la coerenza.

Se devi generare dinamicamente colori più chiari o più scuri:

• NON limitarti a regolare il canale della luminosità in oklch/oklab o lch/lab, ad esempio oklab(from var(--primary) 0.9 a b). Anche se in teoria questo è il modo corretto, i browser non implementano ancora la mappatura della gamma, quindi il colore risultante è imprevedibile.
• Puoi utilizzare color-mix() per mescolare il bianco o il nero (preferibilmente in oklab). In questo modo, il colore rimane nella gamma, ma tende a desaturare eccessivamente i colori e a produrre tinte e sfumature sbiadite.
• PUOI combinare la regolazione della luminosità con uno qualsiasi degli altri metodi (ad es. color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) per un equilibrio tra i due, ma evita di superare il 30% per la regolazione della luminosità.