Calculadora de contraste

La relación de contraste mide qué tan legible es el texto en comparación con su fondo en una escala de luminancia de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). WCAG 2.x utiliza luminancia relativa calculada a partir de valores hexadecimales sRGB, no solo el tono o la saturación. Dos azules con la misma luminosidad pueden comportarse de manera diferente si uno está más cerca del gris medio, razón por la cual observar pares de colores no pasa la revisión de accesibilidad.

El nivel AA requiere al menos 4,5:1 para cuerpo de texto normal y 3:1 para texto grande (18 pt normal o 14 pt en negrita y más grande). El nivel AAA eleva el listón a 7:1 para texto normal y 4,5:1 para texto grande. Los componentes de la interfaz de usuario que no son texto y los objetos gráficos necesitan 3:1 frente a colores adyacentes según el criterio de éxito 1.4.11 de WCAG 2.1: esta calculadora se centra en pares de texto, pero se aplica la misma proporción matemática.

introduce valores hexadecimales de primer plano (texto) y de fondo. El orden no cambia la proporción: #333 en #FFF es igual a #FFF en #333 matemáticamente, aunque solo se puede utilizar un par para tipografía. El hexadecimal no válido devuelve un guión hasta que ambos campos se analizan.

Ejemplo resuelto con los campos predeterminados: primer plano #333333 en segundo plano #FFFFFF. El gris oscuro sobre blanco produce aproximadamente 12,63:1, muy por encima de AA y AAA para texto normal. El resumen muestra "Pasa el texto normal WCAG AA". Las filas AA grandes y AAA dicen Pasar. Para un gris casi accidental como el #767676 sobre blanco, la relación cae a aproximadamente 4,54:1, apenas pasando lo normal AA.

Las paletas de marcas a menudo incluyen colores de acento que fallan en el blanco; arregle con tonos más oscuros para las funciones de texto y mantenga acentos más brillantes para titulares o íconos grandes de más de 18 puntos. No confíe únicamente en el peso de la fuente para rescatar el bajo contraste; La negrita ayuda a calificar para los umbrales de "texto grande", pero las versalitas finas aún cuentan como texto normal.

Los errores comunes incluyen verificar muestras hexadecimales mientras que la interfaz de usuario real usa superposiciones semitransparentes (alfa reduce el contraste efectivo), ignorar los colores del anillo de enfoque y probar solo negro puro #000 en lugar de grises suavizados del cuerpo. Otro error es asumir que los colores de estado verde/rojo son legibles de forma predeterminada; muchos fallan con fondos blancos o gris oscuro.

Esta herramienta es una verificación matemática, no una auditoría de cumplimiento legal. Las revisiones de accesibilidad reales cubren el orden de enfoque, las rutas del teclado, el movimiento y los indicadores de estado sin color. Pruebe siempre con los usuarios y la tecnología de asistencia cuando envíe la interfaz de usuario de producción.

Límites: solo pares hexadecimales sRGB; no se permiten composiciones alfa, degradados ni texto sobre fotografías, a menos que muestre un color plano. El suavizado de subpíxeles y las sombras de texto coloreadas pueden cambiar ligeramente el contraste percibido con respecto a la proporción calculada.