ImageColorPicker.com

Verifica contrasto colore

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

Controlla i tuoi colori

Testa le combinazioni di colori per assicurarti che rispettino gli standard di accessibilità WCAG per la leggibilità del testo.

18.86 a 1
Contrasto
AAA
Risultato testo
Super

Confrontati: #000000 su #F1F3F4

Testo

16px, Normale (400)

Viene considerato testo normale.

  • AA (WCAG 1.4.3): almeno 4.5:1

    Superato

  • AAA (WCAG 1.4.6): almeno 7:1

    Superato

Elementi UI e grafica

Icone, bordi dei campi, indicatori di focus e altre parti che devi vedere per usare l'interfaccia.

  • AA (WCAG 1.4.11): almeno 3:1

    Superato
18.86 a 1. Testo: soddisfa AA, soddisfa AAA. Componenti UI: soddisfa.
Come viene verificato
Colori confrontati (dopo la fusione)
Testo #000000 su sfondo #F1F3F4
Luminosità relativa
Testo 0.0000, sfondo 0.8933
Formula
(L1 + 0.05) / (L2 + 0.05) dove L1 è la luminanza del colore più chiaro e L2 del colore più scuro.
Rapporto esatto
18.8667 a 1, mostrato come 18.86 a 1. Il valore mostrato è troncato, non arrotondato, quindi non appare mai migliore di quello che è. Il valore esatto è quello confrontato con il requisito.

Dimensione del testo: 16px, Normale (400)

Viene considerato testo normale. Il testo grande è almeno 24px (18pt), o almeno 18.67px (14pt) se in grassetto (peso 700 o più). Le dimensioni sono mostrate troncate, non arrotondate.

Viene considerato testo normale. Il testo grande è almeno 24px (18pt), o almeno 18.67px (14pt) se in grassetto (peso 700 o più). Le dimensioni sono mostrate troncate, non arrotondate.

Aa
Titolo di anteprima

La veloce volpe marrone salta sopra il cane pigro

Esempio di testo piccolo (12px)

Testo
#000000
Sfondo
#f1f3f4

Standard WCAG

Livello AA

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

Livello AAA

Rapporto di contrasto migliorato di 7:1 per testo normale e 4.5:1 per testo grande. Raccomandato per un'ottimale accessibilità.

Controllo contrasto colore

Calcola il rapporto di contrasto tra testo e colori di sfondo.

Scegli un colore usando il selettore di colori per testo e sfondo o inserisci un colore in formato RGB esadecimale (es. #259 o #2596BE). Puoi regolare il cursore per selezionare il colore. Le Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) hanno una linea guida specifica per determinare se il testo è leggibile per gli utenti vedenti. Questo criterio utilizza un algoritmo particolare per convertire le combinazioni di colori in rapporti confrontabili. Usando questa formula, WCAG afferma che un rapporto di contrasto colore di 4.5:1 tra testo e sfondo è adeguato per il testo normale (corpo), e il testo grande (18+ pt normale, o 14+ pt grassetto) dovrebbe avere almeno un rapporto di 3:1.

Caratteristiche principali

  • Calcolo del rapporto di contrasto in tempo reale
  • Verifica della conformità WCAG AA & AAA
  • Slider HSL per regolazioni fini
  • Formati di anteprima multipli

Strumenti avanzati

  • Correzione automatica dei colori
  • Campioni di testo e sfondo
  • Rilevamento del nome del colore
  • Esporta risultati

Domande frequenti

Per la conformità WCAG AA, il testo normale richiede un rapporto di contrasto minimo di 4,5:1, mentre il testo grande (18pt o 14pt in grassetto) richiede 3:1.

WCAG AAA richiede rapporti di contrasto più alti: 7:1 per il testo normale e 4,5:1 per il testo grande, rispetto a 4,5:1 e 3:1 di AA.

Usa la correzione automatica per regolare il colore del testo o dello sfondo mantenendo l'idea del tuo design, oppure modifica i colori a mano con i cursori HSL, che mostrano con indicatori visivi le zone ottimali per la conformità AA/AAA.

Le zone verdi e gli indicatori AA/AAA mostrano gli intervalli ottimali per la conformità WCAG. Le indicazioni di direzione (verso il chiaro/verso lo scuro) ti guidano verso un contrasto migliore in base alla combinazione di colori attuale.

Sì, puoi inserire qualsiasi codice esadecimale oppure usare il selettore di colori per scegliere colori personalizzati. L'URL si aggiorna automaticamente, così puoi condividere combinazioni di colori specifiche.