Verifica del contrasto
Scegli i colori del testo e dello sfondo per verificare il rapporto di contrasto rispetto alle soglie WCAG AA e AAA. Vedi risultati separati per testo normale e grande, insieme a un'anteprima con i colori selezionati.
Cosa puoi fare
Controlla il rapporto tra due colori
Scegli i colori del testo e dello sfondo e visualizza il loro rapporto di contrasto con due cifre decimali.
Confronta le soglie AA e AAA
Visualizza risultati distinti per testo normale e grande, con un'anteprima che usa i colori selezionati.
Confronta con bianco e nero
Apri i dettagli facoltativi per confrontare il colore del testo con sfondi neri e bianchi.
Come usarlo
Inserisci il colore del testo
Scegli HEX, RGB, HSL, HSV o CMYK e inserisci il colore del testo. Selezionando un campione, l'input passa a HEX.
Scegli lo sfondo
Inserisci un valore HEX di tre o sei cifre oppure usa il selettore colore. Il prefisso # è facoltativo.
Controlla il contrasto
Seleziona Controlla contrasto per esaminare rapporto, anteprima del testo ed esiti AA/AAA. Ripeti il controllo dopo aver modificato uno dei due colori.
Quando è utile
Controlla il testo del corpo su uno sfondo
Inserisci i colori usati in una pagina e controlla se il testo normale rispetta il rapporto richiesto.
Confronta i colori per le intestazioni
Usa il risultato e l'anteprima per il testo grande quando valuti una combinazione di colori per un'intestazione.
Come interpretare i risultati
Rapporti AA e AAA
AA richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande. AAA richiede 7:1 per il testo normale e 4,5:1 per quello grande. I risultati usano il rapporto non arrotondato.
Cosa si considera testo grande
Il testo grande misura almeno 18 pt oppure 14 pt in grassetto. In CSS corrisponde a 24px oppure circa 18,7px in grassetto. L'anteprima usa testo a peso normale in 16px e 24px.
Ambito del controllo
Controlla il contrasto del testo tra due colori sRGB opachi. Non valuta sfondi immagine, fusione alfa, elementi non testuali o la conformità dell'intera pagina.
Domande e risposte
Un rapporto conforme significa che l'intera pagina è conforme?
Questo risultato riguarda solo il contrasto del testo tra i due colori selezionati. La conformità dell'intera pagina va valutata separatamente.
Cosa mostra il confronto con bianco e nero?
Confronta il colore del testo selezionato con il nero e il bianco e mostra quale ha il rapporto più alto. Questo confronto è distinto dal risultato sullo sfondo selezionato.
Posso controllare testo trasparente o testo sopra un'immagine?
Trasparenza e sfondi immagine non sono supportati. Inserisci colori opachi per testo e sfondo.
Input e output
- Colore del testo
- Valori HEX, RGB, HSL, HSV o CMYK oppure il selettore colore. CMYK è una stima senza profilo ICC.
- Sfondo
- HEX a tre o sei cifre oppure il selettore colore. Alfa non è supportato.
- Risultato
- Rapporto di contrasto, esiti AA/AAA per testo normale e grande e un'anteprima del testo. I risultati non possono essere salvati.