Il controllo del contrasto del colore misura il rapporto di contrasto tra un colore di primo piano (testo) e un colore di sfondo e indica se quella coppia soddisfa le linee guida sull'accessibilità dei contenuti Web. Riporta un singolo numero tra 1:1 e 21:1 e lo valuta rispetto alle soglie WCAG 2.2 per AA e AAA sia a dimensioni normali che a grandi, oltre alla soglia 3:1 separata per i componenti e la grafica dell'interfaccia utente.
Il contrasto è la differenza di luminanza relativa tra due colori, non solo quanto appaiono diversi. Due colori possono sembrare distinti pur continuando a fallire per i lettori con ipovisione, carenza di visione del colore o chiunque utilizzi un telefono alla luce del sole. Il rapporto viene calcolato con la formula esatta di luminanza relativa sRGB definita da WCAG, quindi il risultato corrisponde a ciò che gli strumenti di controllo e agli utenti di screen reader sperimentano piuttosto che un'ipotesi visiva approssimativa.
Tutto funziona nel tuo browser. Digita o incolla i colori come esadecimale, RGB, HSL o una parola chiave CSS, guarda un aggiornamento in anteprima dal vivo e se una coppia fallisce puoi applicare un colore suggerito che passa. Non viene caricato nulla, non c'è registrazione e lo strumento continua a funzionare offline una volta caricata la pagina.
Digita o incolla il colore di primo piano in qualsiasi formato comune: #1A1A1A, RGB(26,26,26), HSL(0,0%,10%) o una parola chiave come Navy. Un campione di colore e un raccoglitore nativo ti consentono di perfezionarlo.
Imposta lo sfondo su cui si trova il testo. Se il colore del testo ha trasparenza, viene sfumato su questo sfondo prima che venga misurato il rapporto, abbinando ciò che gli utenti vedono effettivamente.
L'esatto rapporto di contrasto appare con badge pass o fail per AA e AAA in dimensioni normali e grandi, oltre al controllo componente dell'interfaccia utente 3:1, tutto accanto a un esempio di testo in tempo reale sullo sfondo.
Se una combinazione fallisce, applica il colore accessibile suggerito: lo strumento spinge il testo più chiaro o più scuro fino a cancellare il livello di destinazione, quindi puoi copiare il valore fisso.
Utilizza le formule ufficiali di rgb sRGB e rapporto di contrasto di WCAG 2.2, quindi il numero corrisponde agli audit formali fino a due cifre decimali anziché all'approssimazione
Ogni risultato viene classificato rispetto a AA (4.5:1), AAA (7:1), le soglie di testo di grandi dimensioni (3:1 e 4,5:1) e la regola 3:1 per componenti dell'interfaccia utente non testuale e oggetti grafici
Un vero campione di rendering di testo normali e di grandi dimensioni sullo sfondo scelto durante la digitazione, in modo da poter giudicare la leggibilità insieme al punteggio numerico
Quando una coppia fallisce, lo strumento cammina il colore del testo più chiaro o più scuro in HSL fino a quando non raggiunge il tuo rapporto target e offre un valore che puoi applicare in un clic
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!