Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Controlla i rapporti di contrasto cromatico istantaneamente e verifica la conformità WCAG 2.1. Incolla due colori qualsiasi per vedere se superano gli standard AA o AAA per testo normale, testo grande e componenti UI. Ottieni suggerimenti di correzione automatica quando i tuoi colori non soddisfano i requisiti di accessibilità.
Testa rispetto agli standard AA (4,5:1 per testo normale, 3:1 per testo grande) e AAA (7:1 / 4,5:1). Vedi lo stato di superamento/fallimento a colpo d'occhio.
Quando il contrasto fallisce, ottieni suggerimenti di regolazione del colore che mantengono l'intento del tuo design rispettando gli standard di accessibilità.
Vedi come appare realmente il tuo testo sul colore di sfondo. Anteprima di testo normale, testo grande ed elementi UI in tempo reale.
Inserisci i colori come HEX, RGB o HSL. Il verificatore gestisce la conversione automaticamente, così puoi lavorare nel tuo formato preferito.
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 testo normale e 4,5:1 per testo grande. La maggior parte dei sistemi di design punta ad AA come minimo, con AAA come obiettivo ambizioso.
No. WCAG 2.1 richiede anche un contrasto di 3:1 per componenti UI (pulsanti, bordi di input, icone) e oggetti grafici che trasmettono significato.
Circa l'8% degli uomini e lo 0,5% delle donne presenta qualche forma di deficit nella visione dei colori. Un buon contrasto garantisce che i tuoi contenuti siano leggibili per tutti, incluse persone con ipovisione, in piena luce solare o su schermi di bassa qualità.