Cómo comprobar el contraste de los colores de una web

Identifica el texto y su fondo real

Empieza por un elemento concreto: un párrafo, una etiqueta de formulario o el texto de un botón. Anota el color del texto y el fondo que realmente queda debajo. El color definido en una clase puede estar sobrescrito por otra regla; consulta los estilos calculados de ese elemento en el navegador. Una transparencia también cambia el color efectivo al mezclarse con el fondo. El comprobador acepta colores HEX opacos, de tres o seis cifras. Si tu diseño utiliza transparencia, obtén primero el resultado de la composición. No uses el color de una captura comprimida como sustituto automático del valor CSS: el suavizado de las letras puede producir muchos tonos distintos alrededor del borde.

Interpreta la relación y los cuatro resultados

Introduce ambos códigos y pulsa Comprobar contraste. Una relación de 1:1 corresponde a colores de igual luminancia; negro sobre blanco da 21:1. Los cuatro resultados distinguen AA y AAA para texto normal y grande. AA requiere 4,5:1 para texto normal y 3:1 para grande; AAA requiere 7:1 y 4,5:1 respectivamente. La decisión utiliza el valor completo, antes de redondear la cifra mostrada. Por eso conviene dejar margen al elegir una pareja cercana al límite. Un resultado favorable comprueba este contraste de texto concreto. No certifica la página completa, que también depende del teclado, las etiquetas, el orden del contenido y otros criterios.

Haz una prueba que puedas reproducir

Carga el ejemplo negro y blanco y comprueba que la relación es 21:1 y los cuatro resultados cumplen. Después cambia el texto a #777777 sobre #FFFFFF. Obtendrás aproximadamente 4,478:1: no cumple AA para texto normal aunque una presentación con pocos decimales pueda parecer cercana a 4,5. Recupera un tono más oscuro y compara de nuevo. Cambia una sola variable cada vez para entender qué ha producido la mejora. Guarda los dos códigos con el resultado y con el componente revisado. El TXT descargado permite conservar la salida, pero un registro útil también identifica el lugar donde se utilizan esos colores. Repite la prueba después de editar el estilo.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Comprueba el tamaño sin confundir px y rem

La categoría de texto grande comienza en 24 píxeles CSS para texto de peso normal, o aproximadamente 18,67 píxeles cuando está en negrita. Revisa el tamaño y el peso calculados, no solo el aspecto de la vista previa. Si el diseño expresa tamaños en rem, utiliza el conversor con la base real del elemento html. Con una raíz de 16 px, 1,5 rem son 24 px; con una raíz de 20 px, 1,5 rem son 30 px. La base inicial del conversor es una comodidad, no una medición de tu página. Cambiar de unidad no hace legible por sí solo un texto pequeño o demasiado fino.

Revisa los estados y los fondos que cambian

Comprueba por separado los colores de enlaces visitados, foco, botones al pasar el puntero y mensajes de error. Evita que una diferencia de color sea la única forma de comunicar un estado: añade texto, un icono comprensible o una indicación adicional. Si usas el generador de degradados, recuerda que un fondo con dos colores presenta muchos tonos intermedios y cambia según el tamaño del elemento. Una pareja de muestras no valida automáticamente todo el recorrido. Revisa las zonas sobre las que aparece texto, o utiliza una superficie uniforme detrás de las palabras. Finalmente, prueba el componente en su contexto real, con ampliación del navegador y en una pantalla estrecha.