Comprobador de contraste

Verifica el cumplimiento WCAG 2.1 de accesibilidad

{{ __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 qué comprobar el contraste?

Aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres tienen alguna forma de daltonismo. El bajo contraste dificulta la lectura — especialmente en tamaños pequeños y pantallas pobres. Los estándares WCAG definen valores mínimos que son obligatorios por ley en muchos países (UE EN 301 549, EE.UU. ADA).

Umbrales WCAG 2.1

Nivel AA requiere 4,5:1 para texto normal (menos de 24 px o 18,66 px bold) y 3:1 para texto grande. Nivel AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. Los componentes UI y gráficos necesitan al menos 3:1. Estos valores se basan en la luminancia relativa según la fórmula WCAG.