Comprobador de contraste (WCAG AA / AAA)

Cómo funciona la relación de contraste

WCAG (Web Content Accessibility Guidelines) define el contraste como la relación entre la luminancia relativa de dos colores. La fórmula linealiza cada canal sRGB, los pondera por sensibilidad del ojo humano (R 0.2126, G 0.7152, B 0.0722), luego calcula (más claro + 0.05) / (más oscuro + 0.05). El resultado va de 1:1 (idénticos) a 21:1 (negro sobre blanco).

Calculamos esto en tu navegador con la fórmula oficial WCAG 2.x. Los cuatro badges comprueban los umbrales 4.5:1 (normal) y 3:1 (grande) de AA, y 7:1 (normal) y 4.5:1 (grande) de AAA. 'Texto grande' es 24px / 18pt, o 18.66px / 14pt negrita.

Por qué pasar AA como mínimo

AA es el nivel legalmente exigible en muchas jurisdicciones (US ADA, EU EN 301 549, UK Equality Act para servicios digitales). Fallar AA en texto de cuerpo es el problema de accesibilidad más común y el más fácil de arreglar durante el diseño en vez de tras lanzar.

AAA se recomienda para lectura larga, servicios gubernamentales e interfaces críticas. Es estricto — el primer instinto de un diseñador de gris pálido sobre blanco suele fallar AAA fácilmente. Si tu sitio sirve sobre todo contenido de vistazo rápido, apunta a AA; si publicas libros, artículos o información crítica, apunta a AAA.

Errores comunes

'Se ve bien en mi pantalla.' Pantallas calibradas, luces fluorescentes de oficina y uso de móvil al aire libre cambian todos el contraste percibido. Usa la relación, no tu ojo.

Diseñar dark mode invirtiendo códigos hex. La inversión cambia matiz y rompe contraste. Re-prueba cada par de colores tras cambiar de tema.

Confiar en guías de marca. Muchas paletas de marca se eligieron antes de la conciencia WCAG. Si rosa de marca sobre blanco falla, propón un rosa ligeramente más oscuro para el cuerpo y reserva el original para uso decorativo.