Verificador de contraste de color

Verificador de contraste de color WCAG para colores de texto e interfaz

Usa este verificador de contraste de color para comparar un primer plano y un fondo, resolver la transparencia sobre un lienzo explícito e inspeccionar la relación de contraste resultante. El verificador de contraste WCAG informa de los umbrales de texto AA y AAA, además de un resultado de par de colores 3:1 para controles y gráficos, lo que lo hace útil como un verificador de color de accesibilidad durante el trabajo de interfaz.

Cómo comprobar el contraste del primer plano y el fondo

1. Introduce los colores de primer plano, de fondo y del lienzo en formato HEX, RGB o HSL. Usa el canal alfa cuando el primer plano o el fondo sean translúcidos, o convierte primero un código HEX a RGB o HSL si solo tienes un formato.
2. Revisa los colores resueltos, el ratio, los resultados para texto normal y grande, y la vista previa del componente.
3. Elige un objetivo de 3:1, 4.5:1 o 7:1, aplica un color de primer plano sugerido y luego copia, descarga o comparte el CSS.

Umbrales de WCAG AA, AAA, texto grande y 3:1

Usa esto como un comprobador de contraste AA para texto normal y grande, o como un comprobador de contraste AAA cuando se aplican los objetivos más altos. WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande; AAA eleva esos objetivos a 7:1 y 4.5:1. Por lo general, texto grande significa al menos 18 puntos en normal o 14 puntos en negrita. El resultado de contraste de 3:1 para primer plano y fondo evalúa únicamente el par de colores probado para un control o gráfico; por sí solo no establece la conformidad para elementos que no son de texto.

Por qué los colores translúcidos necesitan un lienzo explícito

Un color translúcido no tiene un contraste final hasta que se conocen todas las capas que tiene detrás. Este comprobador de contraste de texto compone primero el lienzo opaco, luego el fondo y después el primer plano. Por lo tanto, el ratio mostrado describe los colores resueltos del navegador en lugar de asumir silenciosamente un fondo blanco detrás de cada valor transparente.

Los colores de alto contraste dependen del par y del contexto

¿Qué son los colores de contraste? Son colores cuya diferencia de luminancia resuelta crea un par legible o distinguible para un uso específico. Una combinación de colores accesible para un componente puede no serlo en otro estado, y los mejores colores de contraste no son universales: el negro puede funcionar sobre un fondo amarillo pálido, mientras que un gris más claro no. La elección de un color de contraste para un fondo amarillo debe medirse igualmente con el amarillo exacto, el tamaño del texto, el grosor y el estado del componente que vayas a publicar.

Encontrar un primer plano accesible más oscuro o más claro

Cuando el par actual no alcanza el objetivo seleccionado, el comprobador busca rutas sRGB deterministas más oscuras y más claras para encontrar los valores de primer plano exportados más cercanos que sí lo cumplan. Conserva el canal alfa del primer plano cuando es posible y etiqueta claramente una alternativa opaca cuando la transparencia hace que el objetivo sea inalcanzable. Para ajustar el color de primer plano a mano y ver sus tintes y sombras, ábrelo en el selector de color.

Un par de colores aprobado no es una auditoría de accesibilidad completa

Este cálculo no demuestra que una página entera cumpla con las normas. La tipografía real, los degradados, las imágenes, los iconos, los estados de interacción, los indicadores de foco, los controles deshabilitados, los bordes y los colores circundantes aún necesitan inspección en la interfaz renderizada. Usa el resultado como una medida precisa dentro de una revisión de accesibilidad más amplia.

Verificación de contraste privada en tu navegador

El análisis, la composición alfa, el cálculo de contraste, las sugerencias, la renderización de la vista previa y la generación de CSS se realizan localmente en este navegador. Las analíticas excluyen los colores exactos, las proporciones, los resultados de aprobado o suspenso, el CSS generado y los valores de estado compartido. Una URL para compartir contiene colores solo cuando la creas explícitamente.

Preguntas frecuentes

¿Qué relación de contraste requiere la norma WCAG AA?

La norma WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande. El verificador informa de ambos resultados por separado porque el tamaño y el grosor de la fuente determinan qué umbral se aplica.

¿Qué relación de contraste requiere la norma WCAG AAA?

WCAG AAA requiere al menos 7:1 para texto normal y 4.5:1 para texto grande. AAA es un objetivo de mayor contraste para el texto, no una declaración de que se cumplen todos los demás requisitos de accesibilidad.

¿Qué se considera texto grande para las pruebas de contraste?

El texto grande generalmente significa texto normal de al menos 18 puntos o texto en negrita de 14 puntos. Los píxeles de CSS y las métricas de la fuente renderizada pueden variar, así que verifica el tamaño y el grosor reales utilizados en la interfaz.

¿Los controles y los iconos necesitan un contraste de 3:1?

Muchos controles significativos, indicadores de foco y objetos gráficos necesitan una relación de contraste de 3:1 con los colores adyacentes. Esta herramienta informa solo sobre el par probado; que el requisito se aplique depende del elemento y su estado.

¿Un par de colores aprobado demuestra que mi página es conforme?

No. Un par aprobado cubre un único cálculo de contraste. La tipografía, las imágenes, los degradados, los iconos, los controles, los estados de 'hover' y deshabilitado, los indicadores de foco, la estructura, el acceso por teclado y la página completa renderizada todavía requieren revisión.