Verifica del contrasto dei colori
Usa questo strumento per misurare il contrasto tra un colore in primo piano e uno di sfondo. Consulta i risultati WCAG 2.2 AA e AAA, il colore più vicino che supera la verifica, i livelli trasparenti e le coppie di colori di una palette.
Gratis, senza registrazione. Funziona nel browser, senza chiamate all'AI.
Rapporto di contrasto
4,54:1
| Utilizzato per | Livello | Rapporto richiesto | Risultato |
|---|---|---|---|
| Testo normale | AA | 4,5:1 | Superato |
| Testo grande | AA | 3:1 | Superato |
| Elementi dell’interfaccia e grafica | AA | 3:1 | Superato |
| Testo normale | AAA | 7:1 | Non superato |
| Testo grande | AAA | 4,5:1 | Superato |
Questa anteprima usa il modello Machado 2009 alla massima intensità. È una simulazione approssimativa della percezione dei colori, non una diagnosi. I risultati WCAG si basano sempre sui colori originali visibili.
Machado, Oliveira e Fernandes: modello pubblicatoIl testo normale a 16 pixel appare come questa frase.
Testo grande a 24 pixel
Un bordo di 2 pixelLicenza del modello di visione dei colori
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Verifica una palette
Aggiungi almeno due colori per confrontare la palette. I colori ripetuti vengono contati una sola volta.
Uno strumento di verifica del contrasto esprime il rapporto tra due colori con un valore da 1:1 a 21:1. Controlla i livelli WCAG 2.2 AA e AAA per il testo e la soglia di 3:1 per gli elementi non testuali. Trova un colore conforme che mantenga la tonalità, combina i livelli trasparenti su uno sfondo scelto, confronta fino a 12 colori di una palette e visualizza anteprime dei deficit della visione dei colori con il modello di Machado.
Come usare questo strumento
- Inserisci due colori
- Inserisci un codice esadecimale come #1a1a2e o #fff, un valore rgb() o hsl(), oppure il nome di un colore CSS come navy. Puoi anche usare i selettori dei colori. Sono accettati il canale alfa in rgba() e hsla() e i codici esadecimali a 4 o 8 cifre. Imposta il colore della superficie sottostante per combinare i livelli trasparenti dello sfondo e del testo. I cursori dell’opacità moltiplicano il valore alfa già presente in ciascun input. Il contrasto viene calcolato sui colori combinati non arrotondati; i valori esadecimali mostrati sono approssimativi.
- Come si calcola il rapporto
- La luminanza relativa di ciascun colore si calcola con la formula WCAG. Per ottenere il rapporto, si divide la luminanza del colore più chiaro più 0.05 per quella del colore più scuro più 0.05. Il rapporto visualizzato è troncato a due decimali, quindi un valore di 4.499 non risulta mai conforme.
- Cosa significano i livelli
- AA è il livello a cui fa riferimento la maggior parte delle leggi e delle policy: 4.5:1 per il testo normale e 3:1 per quello grande. AAA richiede rispettivamente 7:1 e 4.5:1. Un testo è considerato grande se misura almeno 24 px, oppure circa 18.7 px se è in grassetto. Icone, bordi dei campi e indicatori di focus richiedono un rapporto di 3:1 rispetto ai colori adiacenti.
- Il colore suggerito
- Quando un livello non è raggiunto, manteniamo tonalità e saturazione del colore che hai scelto di modificare e ne regoliamo solo la luminosità, un piccolo passo alla volta, finché il rapporto non è conforme. Mostriamo il colore conforme più vicino con il relativo rapporto. Per «più vicino» intendiamo la minima variazione della luminosità HSL, a intervalli di 0.001, non la distanza percettiva tra colori. Applicando un suggerimento, il livello diventa opaco. Se il testo è traslucido, scegli un colore sostitutivo per il testo: cambiare lo sfondo modificherebbe entrambi i colori visibili.
- Palette e anteprime della visione dei colori
- Inserisci fino a 12 colori pieni distinti, separati da righe, virgole o punti e virgola. Le righe rappresentano i colori in primo piano e le colonne gli sfondi. Ogni coppia mostra il rapporto e l’esito AA per il testo normale. Seleziona una coppia per esaminare tutti i livelli. Le anteprime di protanopia, deuteranopia e tritanopia usano il modello di Machado, Oliveira e Fernandes (2009) alla massima intensità, con matrici Colour Science con licenza BSD. Sono approssimazioni della percezione: non modificano il calcolo WCAG e non permettono di formulare diagnosi.
Domande prima di iniziare
Controlla come appare la tua attività nelle risposte AI
I controlli tecnici ti aiutano a correggere una pagina. La scansione gratuita della visibilità AI mostra le risposte verificate per la tua attività e su cosa intervenire.