Controlla il rapporto di contrasto tra due colori e scopri se supera i livelli WCAG AA e AAA, in tempo reale nel tuo browser.
Il rapporto di contrasto è il numero che le WCAG usano per stabilire se un testo è leggibile. Confronta la luminanza relativa di due colori su una scala che va da 1:1 (identici) a 21:1 (nero puro su bianco puro). Al livello AA, le WCAG chiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande; il livello AAA alza queste soglie a 7:1 e 4,5:1. I componenti di interfaccia — pulsanti icona, bordi dei campi, anelli di focus — hanno bisogno di 3:1 rispetto a ciò che sta loro accanto.
Il calcolo non è una semplice differenza di luminosità. Ogni canale sRGB viene prima linearizzato: diviso per 12,92 sotto la soglia di 0,03928, altrimenti normalizzato ed elevato alla potenza 2,4. Questo passaggio esiste perché i valori dello schermo sono codificati in gamma e non sono proporzionali alla luce emessa. I canali lineari vengono poi pesati 0,2126 per il rosso, 0,7152 per il verde e 0,0722 per il blu, a riflettere quanto ciascun primario contribuisce alla luminosità percepita — il verde domina di gran lunga. Infine le due luminanze entrano in (L1 + 0,05) / (L2 + 0,05), dove il termine 0,05 modella la luce che uno schermo reale riflette anche mentre mostra il nero. È a causa di quella costante che il nero su bianco fa esattamente 21:1 invece di infinito.
Usa lo strumento prima di pubblicare, perché le palette di brand falliscono più spesso di quanto ci si aspetti. Un grigio medio come #777777 su bianco arriva a 4,48:1 — comodo su un monitor luminoso, un centesimo sotto la soglia AA e un problema reale su un telefono al sole. Il pulsante di suggerimento serve esattamente a questo: percorre la lightness HSL del colore del testo verso l'alto e verso il basso a passi di mezzo punto percentuale e si ferma al primo valore che raggiunge 4,5:1, mantenendo la tonalità e la saturazione che hai scelto. Un limite onesto: il rapporto misura solo la luminanza, quindi non dice nulla sulla confusione tra tonalità per chi ha un deficit della visione dei colori e nulla sul peso del carattere oltre alla regola del testo grande. Tutto gira in locale nel tuo browser.
Luminanza relativa: per ogni canale sRGB c normalizzato tra 0 e 1, usa c / 12,92 quando c ≤ 0,03928 e ((c + 0,055) / 1,055)^2,4 altrimenti; poi L = 0,2126·R + 0,7152·G + 0,0722·B. Rapporto di contrasto = (L1 + 0,05) / (L2 + 0,05), dove L1 è il più chiaro dei due colori. Soglie: 4,5:1 testo normale AA, 7:1 testo normale AAA, 3:1 testo grande AA e componenti di interfaccia, 4,5:1 testo grande AAA.
Testo di 18pt (24px) o più grande, oppure 14pt (circa 18,7px) o più grande se in grassetto. Il testo grande richiede solo 3:1 al livello AA e 4,5:1 al livello AAA, perché lettere più spesse e più grandi restano leggibili con un contrasto inferiore.
Perché la soglia è un taglio netto. #777777 su bianco dà 4,48:1 e il livello AA richiede 4,5:1, quindi fallisce per due centesimi. Scurirlo di un passo fino a #767676 arriva a 4,54:1 e passa: è esattamente ciò che fa il pulsante di suggerimento.
Sì. Il criterio di successo WCAG 1.4.11 richiede 3:1 tra un componente di interfaccia utente o un elemento grafico significativo e i colori adiacenti. Bordi dei campi, stati degli interruttori, indicatori di focus e pulsanti con la sola icona rientrano tutti in questa regola.
Questo strumento implementa il rapporto WCAG 2.x, che è ciò a cui fanno riferimento oggi le leggi sull'accessibilità, gli audit e i design system. APCA è l'algoritmo percettivo proposto per le WCAG 3; produce numeri diversi e non è ancora un requisito di conformità.
No. La luminanza e il rapporto vengono calcolati in JavaScript sul tuo dispositivo. Niente viene inviato ad alcun server né salvato da nessuna parte.
Vai.la trasforma qualsiasi URL in un link breve con statistiche dei clic, QR Code e il tuo biolink personale.
Vai.la non è responsabile dell'uso degli strumenti né delle decisioni prese in base ai loro risultati.