Il primo bug di accessibilità che abbia mai spedito è stato un timestamp grigio chiaro su una carta bianca. Sembrava elegante in Figma, sul mio monitor calibrato sembrava a posto, ed era completamente invisibile a un cliente che leggeva e-mail sul suo telefono in un'auto parcheggiata. Non era ipovedente. era solo luce solare. Quel singolo biglietto di supporto mi ha insegnato qualcosa che il mockup di design non potrebbe mai: il contrasto non è una questione di gusti, è una proprietà misurabile e, se non lo misuri, stai ipotesi di spedizione.
Da allora ho costruito il Controllore del contrasto del colore su Toolz.dev, il contrasto cablato si inserisce nei token di progettazione per WP Adminify e ha controllato più componenti React di quanti mi importi contare Questa guida è la versione di quell'esperienza che vorrei qualcuno mi avesse consegnato all'inizio Spiega qual è effettivamente il rapporto di contrasto, come viene calcolato il numero, quale il WCAG soglie significano, e come risolvere una coppia di colori in fallimento senza buttare via la tavolozza del tuo marchio.
tl; dr: Il contrasto WCAG è un rapporto da 1:1 a 21:1 basato sulla relativa luminanza di due colori. Per il normale testo del corpo è necessario che almeno 4,5:1 passi AA e 7:1 per passare AAA. Il testo di grandi dimensioni (circa 24px o 18.66px grassetto) scende a 3:1 per AA e 4,5:1 per AAA. non -Text UI come icone e bordi di input richiede 3:1. Misura ogni coppia di testo su sfondo, tratta AA come la barra di passaggio e lascia che lo strumento suggerisca un colore che passa quando non sei all'altezza.
Perché il contrasto cromatico è così importante?
Il contrasto è il singolo errore di accessibilità più comune sul Web. Anno dopo anno, gli audit automatizzati delle prime pagine iniziali del milione rilevano che il testo a basso contrasto è la violazione WCAG più frequente con un ampio margine. È anche quello che colpisce la maggior parte delle persone, perché non riguarda solo gli utenti registrati alla cieca. Riguarda chiunque abbia una vista ridotta dall'età, chiunque abbia una condizione comune come la cataratta, chiunque utilizzi un display economico, chiunque in una stanza luminosa e ognuno di noi quando il sole colpisce lo schermo.
C'è anche un punto di vista commerciale e non ho intenzione di fingere il contrario. La legge sull'accessibilità ora fa riferimento a WCAG direttamente in molte regioni, il che significa che un'interfaccia inaccessibile è un'esposizione legale, non solo un problema di cortesia. Ma il motivo per cui ci tengo, e il motivo per cui ho costruito uno strumento dedicato per questo, è più semplice. Il testo che le persone non possono leggere è un testo che non è riuscito nel suo unico lavoro. Una splendida interfaccia che nessuno può usare non è un risultato di design.
La trappola è che i nostri occhi sono narratori inaffidabili. Ci adattiamo ai nostri schermi, sappiamo cosa dovrebbe dire il testo in modo che il nostro cervello lo riempia e guardiamo i design in condizioni ideali. Il rapporto di contrasto rimuove tutto questo. Ti dà un numero che non si preoccupa del tuo monitor o delle tue aspettative.
Che cos'è esattamente un rapporto di contrasto?
Il rapporto di contrasto è un confronto della relativa luminanza di due colori: il tuo primo piano (di solito testo) e il tuo sfondo. La luminanza relativa è una misura di quanta luce emette o riflette un colore, ponderato per come l'occhio umano percepisce effettivamente il rosso, il verde e il blu. Il verde contribuisce maggiormente alla luminosità percepita, il blu meno, motivo per cui il testo blu puro su nero è molto più difficile da leggere rispetto al verde puro.
Il rapporto stesso è definito da WCAG come:
(L1 + 0.05) / (L2 + 0.05)
cui L1 è la relativa luminanza del colore più chiaro e L2 è quello del più oscuro. la 0.05 Termini modella la luce ambientale che si riflette sullo schermo, motivo per cui la scala non raggiunge mai del tutto l'infinito. I colori identici producono un rapporto esattamente di 1:1. Il testo nero puro su bianco puro dà il massimo di 21:1. Tutto ciò che è reale vive tra questi due estremi.
La cosa importante da interiorizzare è che il rapporto non è lineare con come & quot; different" due colori sembrano nel senso della tonalità Due colori possono essere selvaggiamente diversi nella tonalità - diciamo un rosso saturo e un verde saturo - e hanno ancora quasi la stessa luminanza, il che li rende un incubo per la leggibilità anche se si scontrano violentemente Il contrasto riguarda la differenza di leggerezza, non la differenza di colore Questo è esattamente il motivo per cui non puoi guardarlo e perché Controllore del contrasto del colore Converte entrambi i colori in luminanza prima di fare qualsiasi confronto.
Come viene effettivamente calcolato il numero?
Se vuoi capire lo strumento piuttosto che fidarti semplicemente, ecco la pipeline completa, che segue esattamente le definizioni WCAG 2.2.
Innanzitutto, ogni canale di colore viene normalizzato da 0–255 a 0–1. Quindi ogni canale viene linearizzato per annullare la curva gamma sRGB. La formula applica un piccolo segmento lineare per valori molto scuri e una curva di potenza per il resto:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Successivamente, i tre canali linearizzati sono combinati con i coefficienti di luminanza che riflettono la percezione umana:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Quei pesi non sono arbitrari. Provengono dal modo in cui le cellule del cono dell'occhio rispondono a diverse lunghezze d'onda e sono il motivo per cui il verde domina. Infine, i due valori di luminanza vengono inseriti nella formula del rapporto sopra, con quello più leggero in alto.
C'è una sottigliezza che fa inciampare le persone ed è la trasparenza. Un rapporto di contrasto è significativo solo tra due colori opachi, perché l'aspetto reale di un colore semitrasparente dipende da ciò che si trova dietro di esso. Se il colore del testo ha un valore alfa, non puoi misurarlo direttamente. L'approccio corretto, e quello che lo strumento adotta, consiste nel componire prima il primo piano traslucido sullo sfondo utilizzando la miscelazione standard-over, quindi misurare il rapporto rispetto al risultato appiattito. Questo corrisponde a ciò che un utente vede effettivamente piuttosto che al colore che hai impostato nominalmente.
Quali sono le soglie WCAG che devo raggiungere?
WCAG definisce i requisiti di contrasto a due livelli di conformità e per tre tipi di contenuto larghi. Ecco l'intero quadro in un unico posto.
| Tipo di contenuto | AA minimo | Minimo AAA |
|---|---|---|
| Testo normale (sotto ~24px) | 4.5:1 | 7:1 |
| Testo di grandi dimensioni (~24px o ~18.66px in grassetto) | 3:1 | 4.5:1 |
| Componenti e grafica dell'interfaccia utente | 3:1 | 3:1 (no AAA separato) |
| Loghi e testo incidentale | esente | esente |
Alcune note dall'avere applicato questa tabella molte volte. "Testo di grandi dimensioni" è definito dalla dimensione del rendering, non da quanto sia importante il testo. La soglia è di 18pt per peso regolare e 14pt grassetto, che si traduce in circa 24px e 18.66px. Qualsiasi cosa a o al di sopra che ottiene la rilassata barra 3:1 per AA, perché le forme delle lettere più grandi rimangono leggibili a contrasto inferiore.
La regola UI-components è Success Criterion 1.4.11, ed è quella che i team dimenticano più spesso Dice il confine visivo di un componente interattivo - il bordo di un input di testo, il contorno di un pulsante, la forma di un'icona che trasmette significato - ha bisogno di 3:1 contro l'ambiente circostante Una forma piena di testo di etichetta passante AA con bordi di input invisibili ancora fallisce, e ho visto esattamente questo in produzione più di una volta.
Infine, il testo decorativo, i controlli disabilitati e i loghi sono esenti. Tale esenzione è ristretta. Un'etichetta a bottone in grigio va bene; un paragrafo a basso contrasto che hai chiamato "secondario" non lo è.
Come si usa il controllore del contrasto del colore?
Il flusso di lavoro che uso quotidianamente richiede circa dieci secondi per coppia. Apri il Controllore del contrasto del colore e inserisci il colore del testo nel primo campo Puoi incollare qualsiasi formato - un esadecimale di sei cifre come #4b5563, un esagono a otto cifre con alfa, an rgb() oppure rgba() stringa, un hsl() valore o una semplice parola chiave CSS simile navy. Lo strumento normalizza tutto ciò che gli dai, in modo da poter mescolare liberamente i formati tra i due campi.
Inserisci il colore di sfondo nel secondo campo. Nel momento in cui entrambi sono validi, il rapporto esatto appare accanto a un campione live di testo di grandi dimensioni, normale e didascalia renderizzato sullo sfondo effettivo. Quell'anteprima conta. Il numero ti dice se passa, ma vedere parole reali sul colore reale ti dice se è comodo, che è una barra più alta di quella semplicemente legale.
Sotto il rapporto si ottiene una griglia di badge pass and fail: AA e AAA sia per il testo normale che per quello di grandi dimensioni, più il controllo 3:1 del componente dell'interfaccia utente Se una combinazione fallisce, lo strumento offre una correzione con un clic Cammina il colore del testo più chiaro o più scuro nello spazio HSL - preservando la tonalità e la saturazione che hai scelto - fino a quando non cancella il rapporto target, quindi ti consegna un valore di passaggio che puoi copiare direttamente nel tuo foglio di stile Quell'ultima parte è la differenza tra una pedina che ti rimprovera e una che effettivamente aiuta: mantiene intatta la tonalità del tuo marchio e sposta la leggerezza solo del minimo necessario.
Tutto viene eseguito localmente nel tuo browser. Nessun colore, tavolozza o valori del marchio inediti lasciano il tuo dispositivo, il che conta quando stai controllando il sistema di progettazione pre-lancio di un cliente. È lo stesso approccio alla privacy che utilizzo in ogni strumento del sito e ho scritto del motivo per cui quell'architettura è importante nel Guida alla privacy dei dati.
Casi d'uso comuni di progetti reali
Controllo di un sistema di progettazione token
Quando ho impostato i token di colore per un nuovo progetto, controllo ogni accoppiamento semantico prima che un singolo componente venga spedito: testo principale su sfondo, testo disattivato su sfondo, testo su primario, testo su scheda, testo su ogni variante di avviso. Un token che fallisce una volta fallisce ovunque viene utilizzato, quindi prenderlo a livello di token è enormemente più economico che prenderlo per componente. Conservo una semplice lista di controllo ed eseguo ogni coppia attraverso il checker, registrando il rapporto accanto al nome del token.
Salvataggio di un colore del marchio che "deve essere utilizzato
Il marketing ti consegna un blu di marca e dice che i pulsanti devono usarlo. Ci testi il testo bianco e ottieni 3,1:1 - fine per il testo di grandi dimensioni, fallendo per un'etichetta con pulsante di dimensioni normali. Hai tre opzioni oneste: oscurare leggermente il blu del marchio per le superfici interattive, utilizzare un'etichetta più grande o più audace in modo da applicare la soglia 3:1 o passare l'etichetta a un colore più scuro se il pulsante è chiaro. La funzione di suggerimento tool's trova la tonalità di passaggio più vicina in modo da poter mostrare al marketing un cambiamento concreto e minimo piuttosto che un piatto & quot;no.& quot;
Controllo del segnaposto e del testo di supporto
Il testo segnaposto è un recidivo perché i browser lo rendono in un'opacità ridotta per impostazione predefinita e i designer scelgono un grigio già chiaro in cima a quello. Ricorda di testare il risultato composto, non il colore nominale. Il compositing alfa del checker fa questo per te: inserisci il colore segnaposto con la sua reale opacità sullo sfondo dell'input e leggi il rapporto reale.
Verifica della visibilità dell'icona e del bordo
Per il controllo dell'interfaccia utente 1.4.11, test l'icona o il colore del bordo rispetto a ciò che si trova immediatamente dietro di essa. Un divisore grigio su una carta bianca, un gallone su un'intestazione colorata, l'anello di messa a fuoco contro il campo: tutti questi necessitano di 3:1. È un controllo rapido che cattura il & quot; tecnicamente c'è tutto ma posso't vedere qualsiasi di esso" classe di bug.
Come si confronta semplicemente con l'utilizzo di uno strumento di progettazione check integrato?
Gli strumenti di progettazione hanno aggiunto indicatori di contrasto e gli strumenti di sviluppo del browser mostrano un rapporto nel selettore di colori, quindi una domanda giusta è perché raggiungere uno strumento dedicato. Ecco il mio confronto onesto.
| avvicinare | potenza | limitazione |
|---|---|---|
| Controllore di contrasto dedicato | rapporto esatto, tutte le soglie, compositing alfa, suggerimenti di colore passante, funziona su qualsiasi stringa di colore | incolli i colori manualmente |
| Plug-in per gli strumenti di progettazione | In linea con la tua tavola da disegno | spesso si avvicina, può ignorare l'alfa, legato a quell'app |
| Strumenti di sviluppo del browser | Controlla la pagina renderizzata dal vivo | Una coppia alla volta, nessun suggerimento, richiede che la pagina esista prima |
| Occhio | forte | Sbagliato, costantemente |
Lo strumento dedicato vince ogni volta che si lavora da valori piuttosto che da una pagina renderizzata - rivedere i token, controllare una specifica o correggere un bug segnalato - e ogni volta che è necessaria un'alternativa passeggera piuttosto che un semplice verdetto Gli strumenti di sviluppo del browser sono migliori una volta che la pagina esiste e si desidera verificare a campione ciò che effettivamente ho usato entrambi, in fasi diverse.
Note avanzate per i team che si prendono cura
Alcune cose che ho imparato che vanno oltre le basi. Innanzitutto, il contrasto è necessario ma non sufficiente. Il passaggio 4.5:1 rimuove una barriera, non rende accessibile da sola un'interfaccia. Hai ancora bisogno di stati di messa a fuoco visibili, devi comunque evitare di trasmettere significato solo attraverso il colore e hai comunque bisogno di test reali con una vera tecnologia assistiva. Tratta il rapporto come un pavimento, non come un traguardo.
In secondo luogo, la modalità oscura non è gratuita. Una tavolozza che passa in modalità luce può fallire in modalità oscura perché le relazioni di luminanza invertono. Controlla entrambi i temi. L'interruttore dell'anteprima dello sfondo scuro del checker esiste proprio perché continuavo a dimenticarmi di farlo.
Terzo, diffida di "abbastanza vicino". Un rapporto di 4,48:1 è un fallimento, non una vittoria arrotondata. Gli schermi variano, gli utenti variano e la soglia ha un margine integrato per un motivo. Se sei al limite, superalo.
Se stai assemblando un toolkit più ampio, il Guida al kit per gli sviluppatori web Copre il modo in cui il contrasto si adatta agli altri controlli che vale la pena automatizzare. E una volta che i tuoi colori passano, strumenti come il Generatore di sfuma e selettore Aiutarti a costruire il resto della tavolozza su una base che hai già verificato. Se stai anche generando metadati di pagina e anteprime social, il Generatore di meta tag Si accoppia bene nello stesso passaggio pre-lancio.
FAQ
Qual è un buon rapporto di contrasto cromatico?
Per il normale testo del corpo, puntare almeno a 4,5:1 per soddisfare WCAG AA e 7:1 per soddisfare il livello AAA più rigoroso. Testo di grandi dimensioni, che significa circa 24px o 18.66px grassetto, ha bisogno solo di 3:1 per AA e 4.5:1 per AAA. Le icone e i componenti dell'interfaccia utente interattiva richiedono almeno 3:1 rispetto all'ambiente circostante.
Cosa conta come testo di grandi dimensioni sotto WCAG?
Il testo di grandi dimensioni è di almeno 18pt, circa 24px, per peso regolare, o almeno 14pt, circa 18.66px, quando è in grassetto. Il testo in corrispondenza o superiore a quella dimensione si qualifica per la soglia rilassata 3:1 AA perché le forme di lettera più grandi rimangono leggibili a un contrasto inferiore rispetto a quelli piccoli.
Qual è la differenza tra WCAG AA e AAA?
AA è il livello che la maggior parte delle leggi e delle organizzazioni targete e richiede 4,5:1 per il testo normale. AAA è il livello avanzato e richiede 7:1, che si adatta a contenuti rivolti a utenti con ipovisione ma è difficile da colpire su un'intera tavolozza. La maggior parte dei team considera AA come il bar di passaggio e l'AAA come un'aspirazione per i contenuti di lettura critici.
Come viene calcolato il rapporto di contrasto?
Ogni colore viene convertito nella sua luminanza relativa WCAG, una misura di luminosità corretta e ponderata percettivamente gamma. Il rapporto è (L_lighter + 0,05) diviso per (L_darker + 0,05), producendo un valore da 1:1 per colori identici a 21:1 per il nero puro su bianco puro.
La trasparenza influisce sul risultato del contrasto?
si. Un colore del testo semitrasparente consente di mostrare lo sfondo, che cambia il suo colore efficace. Il metodo corretto consiste nel componire prima il primo piano traslucido sullo sfondo, quindi misurare il rapporto, in modo che il punteggio rifletta ciò che un utente vede effettivamente piuttosto che il colore nominale impostato.
Perché il mio testo passa a grandi dimensioni ma non riesce alle dimensioni normali?
Le soglie differiscono. Il testo normale ha bisogno di 4,5:1 per AA mentre il testo di grandi dimensioni richiede solo 3:1, quindi un rapporto tra 3 e 4,5 passaggi per le intestazioni ma fallisce per la copia del corpo. O alza il contrasto per il corpo del testo o assicurati che l'abbinamento venga utilizzato solo a grandi dimensioni in cui si applica la soglia rilassata.
Un rapporto di contrasto di passaggio è sufficiente per l'accessibilità?
no Il contrasto è necessario ma non sufficiente. Hai anche bisogno di stati di messa a fuoco visibili, devi evitare di trasmettere significato solo per colore e dovresti testare con contenuti reali e tecnologia assistiva. Il passaggio del rapporto rimuove una barriera comune ma non rende di per sé accessibile un'interfaccia.
Il controllo del contrasto del colore invia i miei colori ovunque?
no . Tutti gli analisi e la matematica vengono eseguiti localmente nel tuo browser utilizzando JavaScript. Non vengono caricati o archiviati valori di colore, palette di marca o schermate e lo strumento continua a funzionare senza connessione di rete una volta caricata la pagina.
