Cómo comprobar el contraste de color para WCAG

Abra el comprobador de contraste con los dos códigos hex a mano. Compare el texto de cuerpo con 4.5:1, los títulos de más de 24px con 3:1 y los iconos o bordes con 3:1. Nada se sube.

1. Conozca los umbrales

   WCAG 2 AA: 4.5:1 para texto normal y 3:1 para texto grande. AAA: 7:1 y 4.5:1. Texto grande es 24px regular o unos 18,7px en negrita. Iconos, bordes y controles de formulario necesitan 3:1.

   

2. Abra Comprobador de contraste en cv.cm

   Hay un par de ejemplo rosa sobre crema. La relación y las filas de aprueba/falla están a la derecha, bajo una muestra de texto. Nada se sube.

   Abrir Comprobador de contraste

3. Introduzca los dos colores

   Escriba un código hex como #777777 para el texto y #ffffff para el fondo, o elija con el selector de color. Los códigos de tres dígitos como #777 también sirven. La muestra se actualiza mientras escribe.

4. Lea la relación y las filas

   #777777 sobre #ffffff es 4.48:1: AA texto grande y UI aprueban, AA texto normal falla. Cada fila dice Aprueba o Falla frente a su umbral.

5. Tome el color sugerido

   Cuando el texto normal falla AA, la página sugiere el color de texto más cercano que alcanza 4.5:1, moviéndose hacia negro o blanco. Para #777777 sobre blanco sugiere #767676. Intercambiar cambia texto y fondo.

   

6. Compruebe cada estado y luego copie

   Repita para los colores de enlace, hover y deshabilitado, y para texto sobre imágenes use la parte más oscura de la imagen como fondo. Copiar pone los colores, la relación y los resultados en el portapapeles.