Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Verifica una coppia testo/sfondo secondo WCAG 2.2 e APCA insieme, simula le tre dicromie e sa dare un punteggio a un’intera tavolozza sotto forma di matrice. Mostra entrambi gli standard perché su coppie reali non concordano, ed è proprio quel disaccordo la parte utile.
Pranzo d’acqua fa volti sghembi.
WCAG 2.2
4,54:1
- PASSAAA — 1.4.3 Contrasto (minimo), testo normaleserve 4,5:1
- NON PASSAAAA — 1.4.6 Contrasto (avanzato), testo normaleserve 7:1
- PASSA1.4.11 Non testuale — icone, bordi, anelli di focusserve 3:1
Conta come testo normale. Il grande comincia a 24px, o a 18,66px con peso 700. È lo standard a cui la normativa sull’accessibilità fa riferimento oggi: sia EN 301 549 sia la Section 508 rimandano a WCAG, quindi è questo il numero che userà un audit.
APCA
Lc 71,6
Testo scuro su fondo chiaro. Il segno è la polarità: a differenza di WCAG, scambiare i due colori cambia la risposta.
Raggiunge Lc 60 — testo leggibile. Si legge se il corpo è grande, ma non per leggere a lungo a 16px.
16px con peso 400 non basta a questo Lc.
| Livello | con peso 400 | con peso 700 |
|---|---|---|
| Lc 90 | 14px | 12px |
| Lc 75 | 18px | 14px |
| Lc 60 | 24px | 18px |
| Lc 45 | 36px | 24px |
| Lc 30 | 48px | 36px |
I due standard non concordano, ed è voluto
Il rapporto di WCAG 2 è una formula del 2008: un quoziente di luminanze relative con un termine di velo fisso, simmetrico nei suoi due argomenti. APCA modella la risposta percettiva: dipende dalla polarità, perché a parità di differenza di luminanza il testo scuro su chiaro si legge davvero meglio del contrario, e prende dimensione e peso del carattere come parte della domanda invece che come una regola a parte attaccata dopo.
Perciò sui casi reali danno risposte diverse, e il disaccordo non è un bug né dell’uno né dell’altro. WCAG 2 promuove certe combinazioni di grigio medio su bianco che sono davvero faticose da leggere, e boccia certe scuro-su-scuro che vanno benissimo. È WCAG 2.2 quello a cui la normativa sull’accessibilità fa riferimento oggi, quindi è quello che girerà un audit. APCA è il modello migliore di ciò che sperimenta chi legge. Usa WCAG per passare e APCA per decidere quale, fra le opzioni che passano, scegliere.
Questa coppia è una di quelle: WCAG AA dice che passa e APCA dice non adeguato a 16px/400.
Visione dei colori
Simulato con le proiezioni di Viénot–Brettel–Mollon, applicate in luce lineare. Applicarle a byte codificati in gamma — la scorciatoia più diffusa — fa sembrare una coppia più distinguibile di quanto sia, che è proprio la direzione in cui una verifica di accessibilità non deve sbagliare.
Testo di esempio
Protanopia (nessun cono rosso, ~1% degli uomini) · 4,54:1
Testo di esempio
Deuteranopia (nessun cono verde, ~1% degli uomini) · 4,54:1
Testo di esempio
Tritanopia (nessun cono blu, ~0,01%) · 4,54:1
Testo di esempio
Acromatopsia (nessun colore, ~0,003%) · 4,54:1
Come si usa
Inserire i due colori
Colore del testo e sfondo, in qualunque notazione. Il paragrafo di esempio sopra i verdetti viene disegnato con quei colori, alla dimensione e al peso impostati.
Impostare dimensione e peso reali
Il WCAG cambia soglia a 24px, oppure a 18,66px con peso 700. L’APCA prende dimensione e peso come parte della domanda invece che come regola a parte. Nessuna delle due risposte dice granché alla dimensione sbagliata.
Leggere entrambi i verdetti
Il WCAG per superare un audit, l’APCA per scegliere fra le opzioni che lo superano. Quando i due non concordano la pagina lo dichiara esplicitamente.
Controllare tutta la tavolozza in una volta
Incollando i colori, uno per riga, si ottiene una matrice N×N. È N×N e non un triangolo perché l’APCA non è simmetrica: gli stessi due colori ottengono punteggi diversi a seconda di quale dei due è il testo.
Domande frequenti
Quale standard conviene seguire?
Il WCAG 2.2, perché è quello a cui rimanda la legge — la EN 301 549 e la Section 508 puntano entrambe lì — quindi è il numero che verrà calcolato da un audit. L’APCA è il modello migliore di ciò che sperimenta chi legge, quindi va usata per scegliere fra le coppie che già passano.
Perché WCAG e APCA non concordano?
Il rapporto del WCAG 2 è una formula del 2008: luminanze relative con un termine di riflesso fisso, simmetrica nei suoi argomenti. L’APCA modella la percezione, dipende dalla polarità — scuro su chiaro si legge davvero meglio del contrario — e tiene conto di dimensione e peso. Così il WCAG promuove certi grigi medi su bianco che sono faticosi da leggere, e boccia certi scuri su scuro che vanno benissimo.
Perché la simulazione della visione dei colori è diversa da quella di altri strumenti?
Perché qui è applicata in luce lineare. La scorciatoia consueta è eseguire la proiezione su byte codificati in gamma, il che fa sembrare le coppie più distinguibili di quanto siano: per una verifica di accessibilità è la direzione sbagliata in cui sbagliare.
Se il contrasto passa, il testo è leggibile?
Vuol dire che supera una soglia misurabile. Lunghezza della riga, interlinea, spaziatura fra le lettere, il font stesso e il fatto che il testo stia sopra una fotografia contano tutti, e nessuno di questi elementi entra in nessuno dei due numeri. Un 4,5:1 promosso in un carattere sottile da 12px resta comunque faticoso.
Può ricevere da
Estrarre la tavolozza da un’immagine
Palette Extractor
Tira fuori da un’immagine una tavolozza di N colori e la esporta in esadecimale, come variabili CSS o come campionario ASE.
Colore medio e dominante
Average & Dominant Colour
Restituisce un colore rappresentativo dell’immagine — medio, mediano o più frequente — come valore di colore.
Simulatore di daltonismo
Colour Blindness Simulator
Ridisegna un’immagine come la vedrebbe chi ha protanopia, deuteranopia o tritanopia, oppure in scala di grigi.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Simulatore di daltonismo
Colour Blindness Simulator
Ridisegna un’immagine come la vedrebbe chi ha protanopia, deuteranopia o tritanopia, oppure in scala di grigi.
Scala di tinte e ombre
Tint & Shade Scale
Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.
Tavolozza per il tema scuro
Dark Mode Palette
Costruisce da un colore la rampa 50–950 e la rispecchia in una scura, così ogni coppia di token conserva il proprio contrasto.
Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.