Avvio veloce
-
Pick Colori
Utilizza il selezionatore di colori o digita # RRGGBB.
-
Leggi i risultati
Vedi rapporto e WCAG AA / AAA pass / fail.
Controllo di contrasto colore
Immettere i colori di primo piano e di sfondo a hex per calcolare il rapporto di contrasto e la conformità AA / AAA.
Privacy: elaborato localmente, mai caricato.
↓ Incolla nell 'area di input qui sotto per vedere i risultati istantaneamente
检查前景色与背景色的对比度是否符合 WCAG 2.x 建议。
前景色
背景色
Aa
对比度
17.4
WCAG AA
通过
WCAG AAA
通过
AA 大文本
通过
Note
WCAG 阈值
AA 正文 ≥4.5:1，大文本 ≥3:1; AAA 正文 ≥7:1，大文本 ≥4.5:1。
Immettere i colori di primo piano e di sfondo a hex per calcolare il rapporto di contrasto e la conformità AA / AAA.
Livelli WCAG
AA testo normale ha bisogno di ≥ 4.5 1; testo grande (18pt + o 14pt grassetto) ha bisogno di ≥ 3: 1.
Caratteristiche e casi d'uso
Controllare i rapporti di contrasto WCAG per le coppie di primo piano / sfondo e i livelli di conformità AA / AAA.
Utilizzare quando si finalizzano i sistemi di progettazione, la leggibilità dei pulsanti, la sintonizzazione della modalità oscura e gli auto-audit a11y.
Tipico Workflow
Quando i progettisti devono verificare se i colori dell 'interfaccia soddisfano gli standard di accessibilità, prima immettere il colore del testo (ad esempio #333333) e il colore di sfondo (ad esempio #FFFFFF) nello strumento. Visualizza istantaneamente il rapporto di contrasto (4,68: 1) e la valutazione WCAG (AAA). Questo è più efficiente rispetto ai calcoli manuali o alle regolazioni per prova ed errore, soprattutto per i cicli di sviluppo agili.
Quando si implementa la modalità scura, gli sviluppatori possono testare le schemi di colore in batch. Ad esempio, controllare il testo principale (#E0E0E0) sia in grigio scuro (#121212) che in nero puro (#000000). Lo strumento mantiene la storia per un facile confronto. Nota: AA richiede ≥ 4,5: 1 contrasto (testo normale), AAA richiede ≥ 7: 1.
Esempi
Esempio
Input
#1a1a1a on #ffffff
Output
ratio ~16.1, AA pass
FAQ
Supporto RGB / HSL?
Hex solo per ora; utilizzare prima lo strumento di convertitore di colore.
Come controllare il contrasto su sfondi gradienti?
Per i gradienti CSS, testare il testo contro entrambe le estremità e i colori chiave del mezzo. Se il gradiente ha più colori, usare il rapporto di contrasto più basso come riferimento. In pratica, prendere in l'utilizzo di colori solidi o sovrapposizioni semitransparenti in aree con gradienti per mantenere la leggibilità.