Verifica contrasto colori

Tutti gli strumenti
Verifica contrasto colori
Controlla il rapporto di contrasto WCAG tra un colore del testo e uno di sfondo — visualizza i giudizi AA/AAA per testo normale, testo grande e componenti UI, con anteprima live e suggerimenti di colori accessibili.
Colore testo
Tinta
Colore sfondo
Tinta
Rapporto di contrasto
--:1
Testo normale
Testo corpo sotto 18px (o sotto 14px grassetto)
AA AAA
Testo grande
18px+ normale, o 14px+ grassetto
AA AAA
Componenti UI
Icone, bordi, controlli form e grafica
AA AAA
Anteprima live

La rapida volpe bruna

Il testo grande si legge comodamente quando il contrasto è sufficiente.

Questo è un paragrafo di esempio di testo corpo normale. Un buon contrasto cromatico mantiene i tuoi contenuti leggibili per tutti, incluse le persone con visione ridotta o daltonismo. un link di esempio.

Caratteri piccoli e didascalie sono i più difficili da leggere — richiedono il maggiore contrasto.
Pulsante di esempio Pulsante di esempio
Suggerimento

Tutto viene calcolato in tempo reale nel tuo browser usando la formula di luminanza relativa WCAG 2.x — nessun upload, nessuna registrazione, completamente gratuito.

Condividi
Strumenti correlati
Simulatore daltonismo

Guarda la tua immagine o palette come la vedono le persone con protanopia, deuteranopia, tritanopia o acromatopsia — gira tutto nel browser, nessun upload.
Convertitore codici colore

Converti i colori tra HEX, RGB, RGBA, HSL, HSLA e HSV — scegli un colore, regola l'alpha e copia qualsiasi formato all'istante.
Esportatore palette

Incolla o importa un insieme di colori ed esportali immediatamente come variabili CSS, SCSS, configurazione Tailwind, JSON o campioni SVG — il passaggio finale per qualsiasi palette.
Ricerche popolari
verifica contrasto colori rapporto contrasto wcag verifica contrasto accessibilita verifica contrasto testo test contrasto aa aaa controlla contrasto colori online

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.