Verifica contrasto colore

Verifica conformità WCAG 2.1 per l'accessibilità

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Perché controllare il contrasto?

Circa l'8 % degli uomini e lo 0,5 % delle donne ha qualche forma di daltonismo. Un basso contrasto rende difficile la lettura — soprattutto a piccole dimensioni e su schermi scarsi. WCAG definisce valori minimi richiesti per legge in molti paesi (UE EN 301 549, USA ADA).

Soglie WCAG 2.1

Il livello AA richiede 4,5:1 per testo normale (sotto 24 px o 18,66 px bold) e 3:1 per testo grande. AAA richiede 7:1 per testo normale e 4,5:1 per grande. Componenti UI e grafici almeno 3:1. I valori si basano sulla luminanza relativa secondo la formula WCAG.