Primero, identifique el objeto que se va a medir.
Introduzca el color del texto y el color de fondo real, utilizando tres o seis bits en formato hexadecimal. Esta herramienta calcula en función de los colores sRGB opacos; para colores transparentes, imágenes de fondo y degradados, primero debe determinar el fondo compuesto real en la ubicación del texto, y no puede simplemente usar uno de los valores de color como sustituto.
Los resultados de la comprobación del contraste de texto de esta paleta de colores no indican que la página completa cumpla con las directrices WCAG. El tamaño de la fuente, el tipo de letra, los estados interactivos y otros requisitos de accesibilidad aún deben revisarse en la página.
Cómo calcular la proporción
Divide cada canal de color de 8 bits por 255 para obtener c. Si c ≤ 0,04045, el valor lineal es c ÷ 12,92; de lo contrario, es ((c + 0,055) ÷ 1,055) elevado a la potencia de 2,4. El brillo relativo L = 0,2126R + 0,7152G + 0,0722B, donde R, G y B utilizan los valores lineales anteriores.
(L más alta + 0.05) ÷ (L más baja + 0.05). Blanco y negro dan 21:1; colores idénticos dan 1:1. Intercambiar texto y fondo mantiene la relación de contraste, aunque cambia la apariencia.
No confunda redondear con pasar.
El texto normal requiere al menos 4.5:1 para AA y 7:1 para AAA. El texto grande requiere 3:1 y 4.5:1, respectivamente. Texto grande significa al menos 18pt, o 14pt en negrita. No apliques sus umbrales al texto pequeño.
La relación de contraste de #777777 sobre fondo blanco es aproximadamente 4,478:1, lo que no cumple con el requisito de 4,5:1 para texto normal (AA). Aunque una interfaz lo muestre como 4,5, el valor mostrado no se puede utilizar para la evaluación. Este sitio muestra tres decimales; la evaluación condicional utiliza el valor calculado completo.
Vuelve a colocar los pares de colores en la interfaz real.
La vista previa solo muestra los colores de entrada, utilizando 16 píxeles para el texto principal y 24 píxeles para los encabezados. Primero, compruebe el color, el fondo, el tamaño y el grosor de la fuente reales en la página de destino; luego, verifique los estados normal, al pasar el cursor y al enfocar. No se limite a comprobar la combinación de colores que mejor se vea en el borrador de diseño.
Tras oscurecer gradualmente el texto o aclarar el fondo, se repite el cálculo y, a continuación, se comprueba la fuente y la experiencia de lectura en un dispositivo real. La prueba de contraste de color no mide la identificación del daltonismo, la semántica de los iconos ni el cumplimiento de la página completa; los valores de color y las ubicaciones de verificación se conservan para su posterior revisión.