Qual è il controllo del contrasto del colore?
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.
La formula di contrasto WCAG 2 è un rapporto di luminanza relativa, e le sue soglie sono ciò che gli audit di accessibilità e la maggior parte dei requisiti legali sono misurati contro, quindi è il numero giusto per progettare È anche noto per essere imperfetto: può essere generoso per testo chiaro su sfondi scuri e duro su alcune coppie di toni medi, motivo per cui l'algoritmo successore, APCA, esiste e viene sperimentato per le versioni future Il testo grande ha una barra più bassa, e grandi significa 18pt, o 14pt quando in grassetto, che è intorno a 24 px e 18,66 px Gli elementi non di testo sono coperti separatamente da 1.4.11 a 3:1, e questa è la regola più spesso persa: i pulsanti delle icone, i bordi di input e gli anelli di messa a fuoco ne hanno bisogno, e un disegno può passare su ogni paragrafo e ancora fallire sui suoi campi di forma.
Come utilizzare il controllore del contrasto del colore?
Inserisci il colore del tuo testo
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 selettore nativo ti consentono di metterlo a punto.
Inserisci il tuo colore di sfondo
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.
Leggi il rapporto e i voti
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.
Risolvi istantaneamente i guasti
Se una combinazione non riesce, applica il colore accessibile suggerito: lo strumento sposta il testo più chiaro o più scuro finché non supera il livello target, quindi puoi copiare il valore fisso.
Caratteristiche principali
rapporto WCAG esatto
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
Grading AA, AAA e UI
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
Anteprima del testo dal vivo
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
Suggerimenti per i colori accessibili
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
Frequently Asked Questions
Related Tools
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!