¿Tiene mi texto suficiente contraste? (WCAG)
Escribe un color de texto y un color de fondo: la herramienta calcula la relación de contraste (1:1 a 21:1) y muestra si pasa AA / AAA para texto pequeño, texto grande y componentes de UI.
Más un cuentagotas de pantalla (Chrome/Edge): muestrea cualquier elemento.
Ves el par en vivo: texto pequeño, texto grande, botones de ejemplo. En local: los colores no salen del navegador.
Crítico para la accesibilidad (a11y): WCAG 2.1 AA es el mínimo que exige la mayoría de regulaciones (Section 508, Directiva UE de Accesibilidad Web, Equality Act del Reino Unido).
Cómo usarlo
- A la derecha: dos campos, "Primer plano" (texto) y "Fondo". Cada uno acepta HEX, RGB, picker nativo y, opcionalmente, un cuentagotas de pantalla.
- El centro muestra el par en vivo: texto pequeño (15px), texto grande (28px), muestra completa de pangrama y dos estilos de botón.
- Barra inferior: ratio (p. ej. "4,83:1") y cuatro insignias PASA/FALLA: AA-pequeño (4,5:1), AAA-pequeño (7:1), AA-grande (3:1), AA-UI (3:1).
- Cuando falla AA-pequeño (el problema más común), aparece un botón "Autoarreglo" que oscurece/aclara el color del texto en OKLCH (conservando el tono) hasta que el ratio llega a 4,5:1.
- "Intercambiar" invierte primer plano ↔ fondo: útil cuando no sabes qué lado ajustar.
Cuándo es útil
Dónde brilla el verificador de contraste - escenarios típicos:
- Diseño web / auditorías a11y: AA-pequeño 4,5:1 es el estándar para texto cuerpo, AA-grande 3:1 para titulares, AA-UI 3:1 para bordes de botones e iconos.
- Colores de marca: confirma que tus colores siguen utilizables en superficies distintas.
- Modo claro / oscuro: prueba combinaciones para ambos modos.
- Plantillas de email: Outlook renderiza colores fatal. Más contraste = texto legible.
- Imprenta: aunque WCAG apunta a pantallas, 4,5:1+ también funciona bien en papel.
- Educación: hazte una intuición de por qué el texto "sutil" (gris claro sobre blanco) se lee 1,5:1: apenas visible.
Si necesitas convertir el color que falla a otro formato para comparar valores, usa el conversor de colores. Para una visión a11y más amplia, simula protanopia / deuteranopia / tritanopia en el simulador de daltonismo.