Come si usa
- Scegli i colori o digita i valori: hex, rgb(), hsl(), oklch() oppure un nome di colore.
- Leggi il rapporto e i quattro risultati WCAG e controlla l'anteprima in tempo reale sotto.
- Se il controllo fallisce, fai clic su Usa questo colore accanto a un suggerimento per applicarlo.
Opzioni spiegate
- AA
- Almeno 4,5:1 per testo normale e 3:1 per testo grande (18 pt / 24 px oppure 14 pt / circa 18,7 px in grassetto). La maggior parte delle normative e dei sistemi di design richiede AA.
- AAA
- Almeno 7:1 per testo normale e 4,5:1 per testo grande, per i contenuti in cui la leggibilità è più importante.
- Colore suggerito
- Mantiene tonalità e croma nello spazio colore OKLCH e cambia solo la luminosità per trovare il colore più vicino che supera appena il controllo.
- Colori trasparenti
- Un colore del testo con trasparenza viene misurato come appare sopra lo sfondo.
Come si calcola il rapporto
Ogni colore viene convertito da sRGB a luce lineare, poi a luminanza relativa:
lineare = c ÷ 12,92 se c ≤ 0,04045
lineare = ((c + 0,055) ÷ 1,055) ^ 2,4 altrimenti (c va da 0 a 1)
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
rapporto = (L_più chiaro + 0,05) ÷ (L_più scuro + 0,05)Il verde conta di più perché è il colore a cui l’occhio è più sensibile. Alcuni risultati su sfondo bianco:
| Colore del testo | Rapporto | Risultato |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5,57 : 1 | AA per testo normale, non AAA per testo normale |
| #767676 | 4,54 : 1 | AA per testo normale |
| #777777 | 4,48 : 1 | Non supera AA per testo normale, lo supera per testo grande |
Le definizioni WCAG sono in Understanding Success Criterion 1.4.3.
Domande frequenti
Come viene calcolato il contrasto?
Con la formula WCAG 2.x: (luminanza relativa più chiara + 0,05) ÷ (luminanza relativa più scura + 0,05), da 1:1 a 21:1. Nero su bianco è 21:1.
Perché si cita così spesso #767676?
È il grigio più chiaro che raggiunge 4,5:1 (circa 4,54:1) sul bianco, quindi è un limite inferiore comune per il testo secondario.
Devo controllare anche icone e bordi?
Sì. Dalla WCAG 2.1, componenti dell'interfaccia e grafica — bordi dei pulsanti, campi, icone — devono avere almeno 3:1 rispetto ai colori adiacenti.
Privacy
Questo strumento funziona interamente nel tuo browser. File e testi vengono elaborati sul tuo dispositivo e non vengono mai caricati sui nostri server.