Verificatore del contrasto dei colori
Verificate il contrasto tra il colore del testo e quello dello sfondo secondo WCAG 2 e APCA. Lo strumento calcola il rapporto di contrasto WCAG 2 a partire dalla luminanza relativa, indica se il contrasto supera o meno i livelli AA e AAA per testo normale e grande e per UI elementi grafici, e aggiunge il valore di contrasto di luminosità APCA con indicazioni sul suo utilizzo. Pensato per designer e sviluppatori che creano interfacce accessibili.
Domande frequenti
Che cosa significano i livelli WCAG?
Il livello AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande (criterio di successo 1.4.3); il livello AAA richiede 7:1 e 4.5:1 (1.4.6). I componenti dell'interfaccia utente e gli elementi grafici significativi devono avere 3:1 rispetto ai colori adiacenti (1.4.11). Lo strumento indica se il contrasto supera o meno ciascuna di queste cinque soglie.
Che cosa si considera testo grande?
WCAG definisce testo grande quello di almeno 18 punti in carattere normale, circa 24 CSS pixel, o di almeno 14 punti in grassetto, circa 18,66 CSS pixel. Tutto il testo più piccolo è considerato normale e richiede un rapporto più elevato.
Perché un rapporto di 4.499:1 non supera AA?
Le soglie WCAG sono precise: un rapporto che arrotondato sarebbe 4,5, ma è inferiore a tale valore, non supera la verifica. Lo strumento confronta il rapporto senza arrotondarlo e lo mostra troncato a due decimali, così il valore visualizzato non sembra mai migliore di quello effettivo.
Che cos'è APCA?
L'Accessible Perceptual Contrast Algorithm è il metodo di contrasto sviluppato per le bozze di WCAG 3. Modella il contrasto di luminosità percepito, tratta diversamente testo e sfondo e restituisce un valore di contrasto di luminosità, Lc, compreso circa tra -108 e 106. Non fa ancora parte di alcuno standard WCAG pubblicato: per la conformità usate i risultati WCAG 2 e considerate APCA un controllo aggiuntivo.
Perché il valore APCA a volte è negativo?
APCA tiene conto della polarità: i valori positivi indicano testo scuro su sfondo chiaro, quelli negativi testo chiaro su sfondo scuro. Le indicazioni usano il valore assoluto, quindi Lc -75 e Lc 75 rientrano nello stesso livello.
Come vengono scelti i livelli delle indicazioni APCA?
Seguono la modalità semplice bronze di APCA: Lc 90 è il valore preferito per il testo del corpo, Lc 75 è il minimo per il testo del corpo, Lc 60 per altro testo di contenuto, Lc 45 per titoli e testo grande, Lc 30 per testo da leggere occasionalmente, come i segnaposto, e Lc 15 per gli elementi non testuali. Dimensione e spessore del carattere contano comunque: considerate questi livelli come punti di partenza, non come verdetti.
Quale versione di APCA è implementata?
Sono implementate le costanti APCA-W3 della versione 0.0.98 G, revisione 4g, con l'esponente semplice 2.4 sui canali sRGB, il limite morbido del nero e il ritaglio del basso contrasto. Il testo nero su bianco dà circa Lc 106.0 e il testo bianco su nero circa Lc -107.9, in linea con l'implementazione di riferimento.
Quali formati di colore posso inserire?
Codici esadecimali con o senza #, nomi di colori CSS, rgb(), hsl(), hwb(), lab(), lch(), spazi oklab(), oklch() e color() come display-p3, e cmyk(). I colori fuori dallo spazio sRGB vengono prima convertiti in sRGB, perché entrambe le formule sono definite per i colori visualizzati su schermi sRGB.
Come vengono gestiti i colori trasparenti?
Il colore del testo semitrasparente viene miscelato con lo sfondo prima della misurazione, proprio come lo disegna un browser. Uno sfondo semitrasparente viene prima miscelato con il bianco. Il risultato elenca i colori opachi del testo e dello sfondo che sono stati effettivamente confrontati.
L'ordine dei due colori è importante?
Per WCAG 2 non lo è, perché il rapporto tra la luminanza più chiara e quella più scura è lo stesso in entrambi i casi. Per APCA lo è, perché testo e sfondo hanno pesi diversi: inserite quindi il colore del testo nel primo campo e quello dello sfondo nel secondo.