Verificador de contraste

Verifique a conformidade WCAG 2.1 de acessibilidade

{{ __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)

Por que verificar o contraste?

Cerca de 8 % dos homens e 0,5 % das mulheres têm alguma forma de daltonismo. Baixo contraste dificulta a leitura — sobretudo em fontes pequenas e telas ruins. As normas WCAG definem mínimos que são exigidos por lei em muitos países (UE EN 301 549, EUA ADA).

Limiares WCAG 2.1

Nível AA exige 4,5:1 para texto normal (abaixo de 24 px ou 18,66 px bold) e 3:1 para texto grande. Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Componentes de UI e gráficos precisam de pelo menos 3:1. Esses valores se baseiam na luminância relativa segundo a fórmula WCAG.