Controllo del contrasto dei colori

Verificare il rapporto di contrasto tra i colori di primo piano e di sfondo per garantire l'accessibilità.

1.00:1
Contrasto
Fail
Molto scarso

Testo normale

AA (4.5:1)
AAA (7:1)

Testo di grandi dimensioni

AA (3:1)
AAA (4.5:1)
White
#ffffff
Black
#e24826

Soluzioni rapide

Aa

Anteprima titolo

La volpe marrone salta veloce sopra il cane pigro

Esempio di testo piccolo (12px)

Testo
#ffffff
Sfondo
#e24826

Standard WCAG

Level AA

Rapporto di contrasto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande. Richiesto per la maggior parte dei siti web.

Level AAA

Rapporto di contrasto migliorato di 7:1 per il testo normale e di 4,5:1 per il testo grande. Consigliato per un'accessibilità ottimale.

Contrasto insufficiente per tutte le dimensioni del testo: non soddisfa gli standard WCAG.

Controllo del contrasto dei colori

Calcola il rapporto di contrasto tra i colori del testo e dello sfondo.

Scegli un colore utilizzando il selettore colore per il testo e lo sfondo oppure inserisci un colore in formato esadecimale RGB (ad esempio, #259 o #2596BE). Puoi regolare il cursore per selezionare il colore. Le Linee guida per l'accessibilità dei contenuti Web (WCAG) contengono linee guida specifiche per aiutare a determinare se il testo è leggibile per gli utenti vedenti. Questo criterio utilizza un algoritmo particolare per mappare le combinazioni di colori in rapporti comparabili. Utilizzando questa formula, le WCAG affermano che un rapporto di contrasto di colore di 4,5:1 tra testo e sfondo è adeguato per il testo normale (corpo), mentre il testo di grandi dimensioni (18+ pt normale o 14+ pt grassetto) dovrebbe avere un rapporto di contrasto di colore di almeno 3:1.

Caratteristiche principali

  • Calcolo del rapporto di contrasto in tempo reale
  • Controllo di conformità WCAG AA e AAA
  • Cursori HSL per la messa a punto fine
  • Diversi formati di anteprima

Strumenti avanzati

  • Fissaggio automatico del colore
  • Esempi di testo e sfondo
  • Rilevamento del nome del colore
  • Esporta i risultati