Comprobador de contraste de colores

El Comprobador de Contraste de Colores ayuda a diseñadores, desarrolladores y profesionales de la accesibilidad a garantizar que las combinaciones de colores cumplan con los estándares de accesibilidad WCAG 2.x. El contraste adecuado entre el texto y los colores de fondo es esencial para la legibilidad, especialmente para usuarios con baja visión o deficiencias en la visión del color.

¿Qué es la relación de contraste de color?

La relación de contraste de color mide la diferencia en la luminancia percibida (brillo) entre dos colores. Varía desde 1:1 (colores idénticos, sin contraste) hasta 21:1 (contraste máximo: negro sobre blanco). La relación se calcula utilizando la fórmula WCAG 2.x basada en los valores de luminancia relativa de ambos colores.

Requisitos de contraste WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen dos niveles de conformidad para el contraste de color:

¿Qué cuenta como "texto grande"?

WCAG define el texto grande como aquel que tiene al menos 18 puntos (24px) de peso normal, o al menos 14 puntos (18.66px) de peso negrita. El texto grande tiene requisitos de contraste más bajos porque los caracteres más grandes son naturalmente más fáciles de leer.

Cómo usar esta herramienta

1. Ingrese sus colores: Elija los colores de primer plano (texto) y fondo utilizando los selectores de color, escriba códigos hexadecimales o haga clic en un ejemplo preestablecido.
2. Verifique la vista previa en vivo: Vea cómo se ven sus colores en elementos reales de la interfaz de usuario (encabezados, texto de cuerpo, botones, enlaces, entradas de formulario) al instante.
3. Haga clic en "Verificar contraste": Obtenga la relación de contraste exacta y el estado de cumplimiento de WCAG para texto normal, texto grande y componentes de IU.
4. Aplique sugerencias: Si sus colores fallan, use las sugerencias automáticas para encontrar la alternativa accesible más cercana.

Entendiendo los resultados

Relación de contraste

El número principal (por ejemplo, 8.59:1) indica qué tan diferentes aparecen los dos colores. Cuanto más alto, mejor para la legibilidad. Una relación de al menos 4.5:1 garantiza que la mayoría de los usuarios puedan leer cómodamente el texto de tamaño normal.

Calificación general

• AAA (Excelente): Cumple con todos los criterios de WCAG, incluido el mejorado (7:1+). La mejor accesibilidad posible.
• AA (Bueno): Cumple con los requisitos estándar (4.5:1+). Satisface los requisitos legales en la mayoría de las jurisdicciones.
• AA Grande (Parcial): Solo cumple con el texto grande o componentes de IU (3:1+). El texto normal falla.
• Falla (Pobre): No cumple con ningún criterio de contraste de WCAG. El texto será difícil de leer para muchos usuarios.

Sugerencias de color

Cuando sus colores no cumplen con los requisitos de contraste, la herramienta sugiere el color accesible más cercano ajustando la ligereza mientras preserva el tono y la saturación. Puede aplicar las sugerencias con un solo clic.

Por qué es importante el contraste de color

• Cumplimiento legal: Muchos países exigen por ley la conformidad con WCAG AA (ADA, Sección 508, EN 301 549, EAA).
• Experiencia de usuario: Un buen contraste mejora la legibilidad para todos los usuarios, no solo para aquellos con discapacidades.
• Impacto en SEO: Los motores de búsqueda consideran cada vez más la accesibilidad en sus clasificaciones.
• Alcance de la audiencia: Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen deficiencia en la visión del color.

Consejos para elegir colores accesibles

• Comience con un contraste suficiente y luego refine el diseño; es más difícil corregir el contraste retroactivamente.
• Evite colocar texto coloreado sobre fondos coloreados sin realizar pruebas. Incluso los colores que "parecen diferentes" pueden fallar en las comprobaciones de contraste.
• El texto gris claro sobre fondos blancos es uno de los fallos de accesibilidad más comunes.
• Use esta herramienta durante el diseño, no solo durante la auditoría; detectar los problemas a tiempo ahorra un trabajo significativo.
• No confíe únicamente en el color para transmitir información; utilice también formas, patrones o etiquetas.

Preguntas frecuentes

¿Qué es la relación de contraste de color?

La relación de contraste de color mide la diferencia en la luminancia percibida entre dos colores. Varía desde 1:1 (sin contraste, el mismo color) hasta 21:1 (contraste máximo, negro sobre blanco). La relación se calcula utilizando la fórmula WCAG 2.x: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 es la del color más oscuro.

¿Qué relación de contraste se requiere para el cumplimiento de WCAG AA?

WCAG AA requiere una relación de contraste mínima de 4.5:1 para texto normal (menos de 18pt o 14pt negrita) y 3:1 para texto grande (18pt+ o 14pt+ negrita). Para componentes de IU que no son texto y objetos gráficos, el mínimo es 3:1.

¿Cuál es la diferencia entre WCAG AA y AAA?

WCAG AA es el nivel de cumplimiento estándar que requiere 4.5:1 para texto normal y 3:1 para texto grande. WCAG AAA es el nivel mejorado que requiere 7:1 para texto normal y 4.5:1 para texto grande. AA es requerido por la mayoría de las leyes de accesibilidad, mientras que AAA es recomendado pero no suele ser obligatorio para sitios web completos.

¿Qué se considera texto grande en las pautas WCAG?

En las pautas WCAG, el texto grande se define como texto que tiene al menos 18 puntos (24px) de peso normal, o al menos 14 puntos (aproximadamente 18.66px) 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.

¿Cómo soluciono el bajo contraste de color?

Para solucionar el bajo contraste de color: (1) Oscurezca el color del texto o aclare el fondo, o viceversa. (2) Use nuestra función de sugerencia de color que encuentra automáticamente el color más cercano que aprueba. (3) Aumente el tamaño de la fuente para calificar como "texto grande", que tiene requisitos menores. (4) Evite usar el color solo para transmitir información.

¿El contraste de color solo se aplica al texto?

No. El Criterio de Éxito 1.4.11 de WCAG 2.1 requiere una relación de contraste mínima de 3:1 para elementos que no son texto, incluidos los bordes de entrada de formularios, iconos y objetos gráficos esenciales para comprender el contenido. Esto se aplica a componentes de IU como botones, campos de formulario e indicadores de enfoque.

Recursos adicionales

• WCAG 2.1: Comprender el contraste (mínimo)
• WCAG 2.1: Comprender el contraste (mejorado)
• Pautas de Accesibilidad para el Contenido Web - Wikipedia