Verificatore di Contrasto Colore
Verifica i rapporti di contrasto dei colori per la conformità WCAG 2.1. Convalida gli standard AA e AAA istantaneamente.
Cos'è il rapporto di contrasto WCAG?
Il rapporto di contrasto WCAG misura la differenza di luminanza tra colori di primo piano e sfondo. Va da 1:1 a 21:1.
Quali sono i requisiti WCAG AA e AAA?
WCAG AA richiede un minimo di 4.5:1 per testo normale e 3:1 per testo grande. AAA richiede 7:1 e 4.5:1.
Cosa conta come testo grande?
Testo grande è definito come 18pt (24px) o più grande, o 14pt (18.66px) grassetto o più grande.
Perché il contrasto dei colori è importante?
Un contrasto adeguato garantisce la leggibilità per persone con disabilità visive e migliora la leggibilità per tutti.
Come calcolo il rapporto di contrasto?
Si calcola usando i valori di luminanza relativa. La formula è (L1 + 0.05) / (L2 + 0.05).
Qual è il contrasto minimo per elementi UI?
WCAG richiede un minimo di 3:1 per componenti UI e oggetti grafici.
Posso usare qualsiasi combinazione di colori?
Non tutte le combinazioni soddisfano gli standard di accessibilità. Usa questo verificatore per convalidare.
Cos'è la luminanza relativa?
È la luminosità percepita di un colore, da 0 (nero) a 1 (bianco). Calcolata usando lo spazio colore sRGB.
Devo controllare il contrasto delle immagini?
Il testo nelle immagini deve soddisfare gli stessi requisiti. Per immagini decorative non si applica.
Quali strumenti aiutano con il contrasto?
Usa strumenti per sviluppatori del browser, plugin di design o verificatori online come questo.
Come usare Verificatore di Contrasto Colore
Verifica all'istante se il contrasto di testo e interfaccia rispetta le soglie AA e AAA di WCAG 2.1, tutto nel tuo browser. Inserisci due colori e il rapporto viene calcolato in locale: nulla lascia il dispositivo.
- Digita o incolla il colore del testo nel campo Foreground Color, in qualsiasi formato supportato come HEX o RGB.
- Compila il campo Background Color con il colore dietro al testo per calcolare il rapporto di contrasto.
- Leggi il rapporto ottenuto e i badge AA e AAA di superamento per testo normale e testo grande.
- Ritocca uno dei due colori finché il rapporto non supera 4,5:1 per il testo corrente o 3:1 per testo grande e componenti UI.
- Scambia i valori di Foreground Color e Background Color per testare la combinazione inversa, ad esempio testo chiaro su tema scuro.
AAA (7:1) è un ottimo obiettivo per le letture lunghe, ma 4,5:1 (AA) è il minimo richiesto dalla maggior parte delle linee guida di accessibilità.
Strumenti correlati
- Selettore Colore Preleva qualsiasi colore dallo schermo con il contagocce. Copia codici HEX, RGB, HSL istantaneamente. Strumento online gratuito.
- Generatore Palette Colori Crea bellissime palette di colori armoniose istantaneamente con il nostro generatore online gratuito. Supporta modalità monocromatica, analoga, complementare, triadica, split-complementare e tetradica. Regola i colori con cursori HSL, blocca i preferiti ed esporta come CSS, Tailwind, JSON o SVG. 100% basato su browser, i tuoi dati non lasciano mai il tuo dispositivo.
- Simulatore Daltonismo Simulatore gratuito di daltonismo online. Testa design per Protanopia, Deuteranopia, Tritanopia e altri tipi. 100% privato, funziona nel browser.
- GIF Estrai Fotogrammi Estrai e scarica fotogrammi singoli da animazioni GIF come PNG o sprite sheet. Strumento online gratuito con anteprima ed esportazione ZIP.
- GIF Inverso Inverti l'ordine di riproduzione delle animazioni GIF online gratis. Carica, visualizza in anteprima e scarica istantaneamente.
- Modificatore di Velocità GIF Cambia la velocità dell'animazione GIF online. Accelera o rallenta i file GIF istantaneamente.
- Video in GIF Converti video in GIF animate online. Regola qualità, framerate e risoluzione direttamente nel browser senza caricare file.
- Creatore di Meme Creatore di meme gratuito online. Aggiungi testi classici in alto e in basso a qualsiasi immagine, trascinali liberamente e scarica il tuo meme in PNG o JPEG all'istante.