Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Un contrast checker è uno strumento di accessibilità che misura la differenza di luminanza tra i colori di primo piano e di sfondo. Calcola il rapporto di contrasto e valuta se la tua combinazione di colori soddisfa gli standard WCAG 2.1. Il contrast checker di Color Taste fornisce risultati immediati di superamento/fallimento per i livelli AA e AAA, insieme a suggerimenti di correzione automatica quando i tuoi colori non soddisfano i requisiti.
Verifica che i tuoi colori soddisfino gli standard WCAG AA: 4.5:1 per il testo normale e 3:1 per il testo grande e i componenti UI.
Controlla rispetto allo standard AAA più rigoroso: 7:1 per il testo normale e 4.5:1 per il testo grande.
Testa il contrasto per testo normale, testo grande (18pt+), pulsanti, bordi di input, icone e altri elementi UI.
Digita o incolla il colore del testo/primo piano in formato HEX, RGB o HSL nel primo campo di input.
Inserisci il colore di sfondo nel secondo campo. Vedi l'anteprima dal vivo aggiornarsi in tempo reale.
Il rapporto di contrasto viene calcolato automaticamente. I segni di spunta verdi indicano il superamento, le croci rosse indicano il fallimento dei livelli WCAG.
Quando la tua combinazione fallisce, clicca sul suggerimento di correzione automatica per regolare i tuoi colori mantenendo l'intento progettuale.
Ottieni calcoli del rapporto di contrasto in tempo reale con risultati di superamento/fallimento per entrambi gli standard AA e AAA.
Quando il contrasto fallisce, ricevi suggerimenti intelligenti che regolano minimamente i tuoi colori per soddisfare i requisiti di accessibilità.
Vedi esattamente come appare il tuo testo sul colore di sfondo con anteprime in tempo reale per diverse dimensioni di testo.
Lavora nel tuo formato colore preferito. Il checker gestisce automaticamente tutte le conversioni.
Verifica l'accessibilità durante il processo di progettazione.
Convalida il contrasto nel codice prima del rilascio.
Assicurati che le palette di token soddisfino gli standard WCAG.
Controlla e correggi i problemi di contrasto su larga scala.
WCAG 2.1 definisce rapporti di contrasto minimi per diversi tipi di contenuto e livelli di conformità:
4.5:1 per il testo normale, 3:1 per il testo grande (18pt o 14pt grassetto). Questo è l'obiettivo di conformità più comune.
7:1 per il testo normale, 4.5:1 per il testo grande. Lo standard d'oro per la massima accessibilità.
Minimo 3:1 per pulsanti, bordi di input, icone e qualsiasi elemento grafico che trasmetta significato.
Per WCAG AA: il testo normale necessita di almeno 4.5:1, il testo grande (18pt o 14pt grassetto) necessita di almeno 3:1, e i componenti UI non testuali necessitano di almeno 3:1.
AAA è uno standard più rigoroso: 7:1 per il testo normale e 4.5:1 per il testo grande. La maggior parte dei design system punta ad AA come minimo, con AAA come obiettivo ambizioso per i contenuti critici.
Sì. Il contrast checker di Color Taste accetta formati colore HEX, RGB e HSL. Inserisci i tuoi colori in qualsiasi formato e lo strumento gestisce la conversione automaticamente.
Quando la tua combinazione di colori fallisce, Color Taste suggerisce colori regolati che soddisfano i requisiti WCAG rimanendo il più possibile vicini al tuo intento progettuale originale. Clicca sul suggerimento per applicarlo immediatamente.
Sì, il contrast checker di Color Taste è completamente gratuito. Nessuna registrazione, nessuna filigrana, nessun limite di utilizzo. Controlla tutte le combinazioni di colori di cui hai bisogno.