Un progetto di 17Labs

Soglia.

Contrasti · WCAG 2.1

Il rapporto fra due colori è un numero solo, e da solo non decide niente: la stessa coppia passa a 24 px e non passa a 16. Qui il numero c'è, ma accanto c'è il verdetto per il testo che stai davvero scrivendo — e quando non passa, il colore più vicino che passa, con la tinta lasciata dov'era.

La coppia

Il testo che stai verificando

Il collegamento

Provino

Il contrasto si guarda, non solo si calcola: questa riga è scritta col corpo e col peso che hai scelto, sui colori che hai messo.

E questa è la stessa coppia a 12 px, che è dove le scelte discutibili si vedono.

:1

Dove cade, fra le tre soglie

Verdetti

Una tavolozza intera, tutte le coppie in una volta

È il lavoro vero. Una coppia la controlla chiunque; un tema ha n×n coppie, e finché si guardano una alla volta ne resta sempre fuori qualcuna. Incolla il blocco :root di un foglio di stile, o un elenco di colori uno per riga.

Quello che la matrice non sa: quali coppie esistano davvero nel tuo sito. Due fondi non si useranno mai uno sull’altro, e il loro 1,09:1 non è un difetto — è una coppia che non capita. La tabella dà i numeri di tutte le combinazioni; a decidere quali contino sei tu, e nessuno strumento può farlo al posto tuo senza sapere come è costruita la pagina.

Come è fatto

181controlli superati, di cui 8 su numeri pubblicati da altri
2implementazioni indipendenti che devono concordare: JavaScript e Python
7,26:1la più debole delle 50 coppie del tema: questa pagina punta ad AAA, non ad AA
0byte inviati: i colori non lasciano il browser

Un rapporto non è un verdetto. 3,2:1 è un errore su un testo da 16 px ed è a posto su un titolo da 24. La maggior parte degli strumenti mostra il numero e due spunte fisse; qui la soglia si muove con il corpo e col peso, perché è così che è scritta la norma: 24 px, oppure 18,66 px se è grassetto.

Il trasparente si compone prima di misurare. rgba(0,0,0,.5) non è nero: sul bianco è #808080, e vale 3,95:1, non 21:1. Uno strumento che accetta un colore con alfa e lo misura come se fosse opaco dà un numero che non esiste su nessuno schermo.

Quando non passa, dice quale colore mettere. La correzione si muove solo in luminosità, dentro OKLCh: la tinta resta dov'era, e un rosso corretto resta rosso invece di diventare rosa. Si prova tutta la scala a passi di un millesimo e si tiene il colore più vicino che raggiunge la soglia — e che sia il più vicino non è un modo di dire, è una prova che gira a ogni pubblicazione.

A volte la risposta è «cambia il fondo». Su un grigio medio non esiste nessun colore di testo che arrivi a 7:1: né il nero né il bianco ci riescono. Dirlo vale più che proporre un colore che non risolve.

Il verdetto non è mai affidato al colore da solo. C'è sempre il segno e la parola. Lo chiede il criterio 1.4.1, e sarebbe il colmo violarlo proprio qui.

Cosa non fa: misura WCAG 2.x, che è quello che chiedono le norme oggi — non APCA, il modello più recente che WCAG 3 sta valutando e che su fondi scuri dà giudizi diversi. Non legge lab(), lch()color(display-p3 …): li rifiuta invece di indovinare. E non apre una pagina per conto suo — riceve i colori, non li va a prendere.