Comprobador de contraste de color

La relación compara la luminancia relativa de los colores de primer plano y fondo utilizando la fórmula de contraste WCAG. La escala va de 1:1 para luminancia idéntica a 21:1 para la diferencia más fuerte entre blanco y negro. El cálculo utiliza los valores de color introducidos, por lo que no tiene en cuenta automáticamente la transparencia, los degradados, las imágenes de fondo, las sombras, el suavizado, las condiciones de visualización o un color diferente mostrado en un estado interactivo. Pruebe los colores reales renderizados para los estados normal, hover, foco, activo, deshabilitado y visitado cuando difieran.

Para texto ordinario, WCAG AA utiliza una relación mínima de 4.5:1 y AAA utiliza 7:1. El texto grande utiliza umbrales más bajos porque los caracteres más grandes y suficientemente en negrita son más fáciles de distinguir: 3:1 para AA y 4.5:1 para AAA. Si el texto califica como grande depende de su tamaño y peso renderizados, no solo de una etiqueta de diseño. Un par puede, por lo tanto, aprobar para un encabezado grande y fallar para el texto del cuerpo. Compruebe el requisito que coincida con la tipografía real y el objetivo de conformidad.

Sí. El contraste del texto es solo una parte de la accesibilidad del color. La información visual necesaria para identificar controles de interfaz de usuario, estados de componentes, objetos gráficos e indicadores de foco de teclado comúnmente necesita al menos 3:1 de contraste contra colores adyacentes según la guía de contraste no textual de WCAG. Los elementos decorativos y los controles inactivos tienen consideraciones diferentes. Pruebe bordes, iconos, gráficos, estados seleccionados, mensajes de validación y contornos de foco en contexto. Un par de texto que aprueba AA no prueba que cada elemento interactivo o gráfico en la misma pantalla sea accesible.

Introduzca los colores efectivos de primer plano y fondo en el punto donde aparece el texto o un gráfico esencial. Las capas semitransparentes se mezclan con lo que está detrás, y los degradados o fotografías crean diferentes relaciones de contraste en el mismo elemento. Muestree el área relevante más débil y luego pruebe otras posiciones probables y recortes responsivos. Si el contraste depende de una sombra, contorno o superposición, incluya el efecto real renderizado en la revisión manual. Prefiera un fondo sólido estable detrás del texto importante cuando la imagen subyacente pueda cambiar.

No. El contraste es un requisito medible. El diseño accesible también necesita tipografía legible, espaciado suficiente, estructura semántica, etiquetas, operación con teclado, foco visible, alternativas significativas, zoom y reflujo utilizables, movimiento controlado e instrucciones que no dependan solo del color. Los pares de colores pueden aprobar matemáticamente y aun así ser difíciles en fuentes delgadas, tamaños pequeños, deslumbramiento, diferencias de visión del color o diseños densos. Utilice el resultado como una verificación en una revisión más amplia y pruebe la interfaz real con contenido y estados representativos.