Comprobador de contraste
Comprueba si tu combinación de colores cumple los estándares de accesibilidad WCAG.
Acerca de Comprobador de contraste
El Verificador de Contraste de Color de GuruAlpha mide la relación de contraste entre los colores de primer plano y de fondo según los estándares WCAG (Pautas de Accesibilidad para el Contenido Web). Introduce dos colores cualesquiera y la herramienta calcula su relación de contraste, indicándote si la combinación cumple con los estándares de accesibilidad AA o AAA para texto normal y grande.
La accesibilidad web es tanto un imperativo moral como un requisito legal. Las pautas WCAG 2.1 establecen relaciones de contraste mínimas para garantizar que el texto sea legible para personas con discapacidad visual, incluidas el daltonismo, la baja visión y el deterioro visual relacionado con la edad. El verificador de contraste facilita el cumplimiento al ofrecer retroalimentación instantánea sobre tus elecciones de color.
La herramienta calcula las relaciones de contraste usando la fórmula de luminancia relativa especificada en WCAG 2.1. Una relación de 1:1 significa que no hay contraste (mismo color). Una relación de 21:1 es el contraste máximo (negro sobre blanco). Los requisitos WCAG son: texto normal AA requiere 4.5:1, texto grande AA requiere 3:1, texto normal AAA requiere 7:1 y texto grande AAA requiere 4.5:1. La herramienta muestra claramente si tu combinación de colores cumple cada umbral.
La vista previa visual muestra el color de tu texto sobre el color de fondo, ofreciéndote una visión real de la legibilidad. La vista previa incluye muestras de texto normal (16px) y grande (24px+), ya que los diferentes tamaños tienen distintos requisitos WCAG. Los indicadores de aprobado/fallido se actualizan en tiempo real a medida que ajustas los colores.
Para desarrolladores y diseñadores web, el verificador de contraste es esencial para garantizar que los sitios web sean accesibles para todos los usuarios. Se integra de forma natural en el flujo de trabajo de diseño: elige colores, comprueba el contraste, ajusta si es necesario y avanza con la confianza de que tu texto es legible.
Características principales de Comprobador de contraste
- Cálculo de la relación de contraste entre dos colores cualesquiera
- Comprobación de cumplimiento de WCAG AA y AAA
- Umbrales de texto normal (4.5:1) y texto grande (3:1)
- Vista previa en vivo del texto sobre el fondo
- Ajustes de color sugeridos para cumplir los estándares
- Compatible con entrada HEX, RGB y HSL
- Funciona en todos los dispositivos
- No requiere registro
Cómo usar Comprobador de contraste
- Abre el Verificador de Contraste en GuruAlpha.
- Introduce o selecciona el color de primer plano (texto).
- Introduce o selecciona el color de fondo.
- Consulta la relación de contraste y el estado de cumplimiento WCAG.
- Comprueba los requisitos tanto de texto normal como grande.
- Ajusta los colores si la combinación no cumple.
- Usa los ajustes sugeridos para cumplir AA o AAA.
Consejos para usar Comprobador de contraste
- El cumplimiento AA (4.5:1) es el mínimo para sitios web públicos.
- El cumplimiento AAA (7:1) es preferible para la máxima accesibilidad.
- El texto grande (18px en negrita o 24px normal) tiene requisitos de contraste más bajos.
- No dependas solo del color para transmitir información: añade etiquetas de texto o patrones.
- Prueba con simuladores de daltonismo para una verificación de accesibilidad adicional.
Preguntas frecuentes sobre Comprobador de contraste
¿Qué es WCAG?
WCAG (Pautas de Accesibilidad para el Contenido Web) es el estándar internacional de accesibilidad web. Define los requisitos para hacer que el contenido sea accesible para personas con discapacidad.
¿Qué relación de contraste necesito?
Texto normal AA: 4.5:1. Texto grande AA: 3:1. Texto normal AAA: 7:1. Texto grande AAA: 4.5:1. Apunta al menos al cumplimiento AA.
¿Qué se considera "texto grande"?
18px (24pt) de peso normal o 14px (18.66pt) de peso negrita. El texto grande tiene requisitos de contraste más bajos porque los caracteres más grandes son más fáciles de leer.
¿Comprueba elementos que no son texto?
La herramienta se centra en el contraste del texto. WCAG también requiere un contraste de 3:1 para los componentes de UI que no son texto, que puedes comprobar manualmente con la misma herramienta.