Controllo del contrasto

Controllo del contrasto

Incolla le coppie di primo piano e di sfondo, una per riga — #7a1f2b su #ffffff, #333, #eee o rgb(0, 0, 0) #fff — e il rapporto di contrasto WCAG 2 di ciascuna coppia tornerà immediatamente, con un verdetto di superamento o di fallimento per ogni livello di conformità. Il rapporto va da 1: 1 (nessun contrasto) a 21: 1 (nero su bianco) ed è calcolato dalla luminanza relativa esattamente come la definiscono le linee guida, quindi i numeri concordano con gli ispettori del browser e gli strumenti di controllo.

WCAG nomina due livelli. AA, quello a cui fanno riferimento la maggior parte delle leggi e dei contratti, richiede 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni. AAA, l'obiettivo più rigoroso, richiede 7:1 e 4,5:1. Il testo conta come grande da 18 pt (circa 24 px) in peso normale, o da 14 pt (circa 18,7 px) in grassetto: ecco perché un titolo può passare con un rapporto in cui un paragrafo fallisce. Il rapporto elenca tutti e quattro i controlli per coppia; cambia l'output su Compatto per una riga per coppia, che è la lettura più veloce quando stai spazzando un'intera tavolozza.

Quando una coppia manca AA per il testo normale, attiva "Suggerisci correzione" e lo strumento scurisce o schiarisce il primo piano in piccoli passaggi di luminosità, mantenendo la sua tonalità, fino a raggiungere 4,5: 1, quindi stampa l'esagono passante più vicino pronto per essere incollato nuovamente nel tuo foglio di stile.

Tutto funziona nel tuo browser; le tavolozze di marca inedite non lasciano mai il tuo dispositivo. I colori possono essere esadecimali a 3 o 6 cifre con o senza hash, rgb() o rgba() o un nome CSS comune: i 16 di base più quelli estesi più diffusi. L'elenco CSS completo di 148 nomi non viene deliberatamente riportato, quindi scrivi i nomi esotici come esadecimali. Una linea che non è una coppia di colori viene annotata con calma e il resto continua a essere elaborato.

FAQ