Verifica i rapporti di contrasto WCAG 2.1 tra qualsiasi colore in primo piano e sfondo, anteprima del testo di esempio e visualizza istantaneamente i risultati di superamento AA/AAA.
Features
- Selezione colore dal vivo: Regola i colori in primo piano e sfondo con il selettore Ant Design o digita valori HEX precisi.
- Matrice WCAG: Visualizza i requisiti AA/AAA per testo normale, testo grande e grafici UI in un'unica tabella.
- Luminanza precisa: I rapporti di contrasto seguono WCAG 2.1 utilizzando canali RGB linearizzati e includono letture di luminanza per colore.
- Blocco di anteprima: Testa intestazioni e paragrafi all'interno di una scheda di esempio dal vivo con la tua palette scelta.
Usage Guide
- Scegli i colori: Seleziona o incolla valori HEX per primo piano e sfondo.
- Rivedi il rapporto: Controlla il rapporto di contrasto calcolato e la tabella AA/AAA per informazioni su superato/fallito.
- Regola la copia: Modifica il testo di esempio per vedere etichette, pulsanti o testi di marketing reali.
Technical Details
Luminanza relativa
Ogni canale RGB viene convertito in un valore lineare utilizzando la curva gamma WCAG prima di calcolare la luminanza con i coefficienti 0.2126, 0.7152 e 0.0722.
Rapporto di contrasto
La formula del rapporto (L1 + 0.05) / (L2 + 0.05) confronta i colori più chiari e più scuri per garantire una leggibilità coerente su tutti i dispositivi.
Soglie
Il testo normale AA richiede ≥ 4.5:1, il testo grande ≥ 3:1, il normale AAA necessita 7:1, il grande AAA 4.5:1, e gli oggetti grafici dovrebbero soddisfare 3:1.
Frequently Asked Questions
- Il testo grande utilizza soglie diverse?
- Sì. Il testo ≥ 18px normale o 14px grassetto si qualifica come grande e necessita solo di 3:1 per AA o 4.5:1 per AAA.
- Come testo i gradienti?
- Controlla le fermate più chiare e più scure nel gradiente. Ogni coppia di fermate dovrebbe soddisfare il rapporto desiderato.
- Le icone contano come testo?
- Le icone solide e i grafici UI essenziali dovrebbero soddisfare almeno un contrasto 3:1 rispetto al loro sfondo.
Related Documentation
- WCAG 2.1 Contrasto (Criterio di successo 1.4.3) - Guida ufficiale sui livelli di contrasto minimi per testo e immagini di testo.
- WCAG 2.1 Contrasto (1.4.6) - Requisiti di contrasto avanzati per conformità AAA.
- MDN - Calcolo della luminanza - Contesto sulla formula RGB lineare utilizzata negli strumenti di accessibilità.
- W3C - Matematica del rapporto di contrasto - Dettagli sulla formula del rapporto, arrotondamento e motivazione.
- Schede di design inclusivo - Suggerimenti su come abbinare colori e tipografia per pubblici diversi.