♀

Contrasto colori WCAG

Verifica più coppie di colori testo/sfondo rispetto agli standard WCAG 2.1 AA e AAA. L'anteprima live mostra esattamente come apparirà il testo a diverse dimensioni e spessori.

Strumenti di design Funziona localmente Nessun dato inviato
wcagaccessibilitàrapporto di contrastoa11y
Esporta coppie di colori 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA richiede 4.5:1 per testo normale, 3:1 per testo grande (18pt o 14pt in grassetto). WCAG AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande. Puntare ad AA è il minimo legale nella maggior parte delle normative sull'accessibilità.
    

  


  



  

    
Che cos'è Verifica contrasto WCAG AA?

    
Verifica i rapporti di contrasto colore rispetto agli standard WCAG AA e AAA. Testa più combinazioni di colori testo/sfondo contemporaneamente. Gratuito, nel browser, nessun dato inviato.

  


  

    
Come usare Verifica contrasto WCAG

    
    
      
  1. Inserisci un colore in primo piano (testo) e un colore di sfondo usando i selettori di colore o digitando valori HEX.
    2. 
      
  2. Lo strumento calcola istantaneamente il rapporto di contrasto tra i due colori.
    3. 
      
  3. Controlla gli esiti superato/non superato per AA e AAA per testo normale e testo grande.
    4. 
      
  4. Regola i colori finché la combinazione non soddisfa il livello WCAG che ti serve.
    5. 
      
  5. Copia i valori dei colori conformi da usare nel tuo CSS.
    6. 
    

  






  
Strumenti correlati

  

    👁️
Simulatore daltonismo
Simula protanopia, deuteranopia e tritanopia su qualsiasi immagine

    🎨
Selettore colore
Converti i colori tra HEX, RGB, HSL e CMYK

    🎨
Generatore palette colori
Genera palette di colori complementari, analoghe e triadiche

  






  
    Comprendi il contrasto WCAG AA
    ▾
  
  

    

      Esempio
      

        

          

            Input
            Primo piano #1F2937 su sfondo #FFFFFF
          

          

            Risultato
            Supera WCAG AA per testo normale e testo grande
          

        

      

    

    

      Casi d'uso comuni
      

        
    
          
  • Controlla i colori del testo rispetto a WCAG AA prima del lancio
    • 
          
  • Rivedi le regressioni di accessibilità nei token del design system
    • 
          
  • Verifica separatamente il contrasto di titoli e testo del corpo
    • 
          
  • Consegna ai team di prodotto coppie di colori conformi
    • 
        

      

    

    

      Domande frequenti
      

        
Qual è la differenza tra AA e AAA?
AA è il livello di conformità standard richiesto dalla maggior parte delle normative. AAA è avanzato — non richiesto per tutti i contenuti, ma migliora la leggibilità.

        
Verifica il contrasto non testuale?
WCAG 1.4.11 richiede un contrasto 3:1 per componenti UI ed elementi grafici — questo strumento copre tale requisito.

        
Che cosa fa Contrasto colori WCAG - Test batch AA/AAA?
Contrasto colori WCAG - Test batch AA/AAA funziona interamente nel tuo browser e ti aiuta a completare questa attività senza caricare dati su un server.

        
Contrasto colori WCAG - Test batch AA/AAA è gratuito?
Sì. Questo strumento è gratuito e non richiede registrazione.