Cómo comprobar el contraste entre texto y fondo

Qué comprueba el verificador de contraste

Esta herramienta compara un color de primer plano con otro de fondo y calcula su relación de contraste. Después presenta evaluaciones basadas en cuatro umbrales: 4,5 y 7,0 para texto normal, y 3,0 y 4,5 para texto grande. Sirve para revisar una combinación concreta antes de utilizarla en una interfaz, una página o un diseño, pero sus resultados no constituyen una evaluación completa de accesibilidad.

Cómo comprobar una combinación de colores

1. Introduce el color del primer plano y el color del fondo. Los dos campos son opcionales: si dejas ambos vacíos, se utilizan negro (#000000) para el primer plano y blanco (#ffffff) para el fondo.

2. Escribe cada color en uno de los formatos admitidos: hexadecimal de tres o seis cifras precedido por #, como #fff o #336699, o un texto de tipo RGB que empiece por rgb y contenga tres componentes numéricos decimales separados por comas.

3. Envía la comprobación. El texto de color se limpia de los espacios que tenga al principio o al final y se convierte a minúsculas antes de interpretarse. Por eso, las mayúsculas y los espacios exteriores no deberían cambiar una entrada válida.

4. Revisa la relación de contraste y las evaluaciones para texto normal y grande. La relación se redondea a dos decimales antes de realizar esas evaluaciones.

5. Si una de las dos entradas no se puede interpretar, busca la indicación de error del resultado y corrige el formato. En ese caso no se generan las evaluaciones normales de contraste.

Cómo leer el resultado y sus límites

La relación de contraste es el valor numérico que permite comparar la diferencia entre el primer plano y el fondo. Las evaluaciones se organizan por tamaño de texto: para texto normal se consideran los umbrales 4,5 y 7,0, mientras que para texto grande se consideran 3,0 y 4,5. Consulta cada evaluación por separado en lugar de tratar el resultado como una aprobación general del diseño.

Si introduces el mismo color en ambos campos, la relación comunicada es 1,0. Si el resultado muestra un error de color, no lo interpretes como una relación baja: significa que alguna entrada no se pudo analizar y que no se produjeron las evaluaciones normales.

Ten presente también que el comprobador solo trata los formatos indicados. No presupongas que acepta nombres de color, sintaxis CSS arbitraria u otras variantes hexadecimales. En las entradas RGB, los componentes se leen como números enteros decimales y no se aplica una comprobación explícita de rango, así que conviene revisar que los valores introducidos sean los que pretendes utilizar.

Ejemplo práctico

Una persona quiere revisar una combinación oscura de texto sobre un fondo blanco antes de usarla en una pantalla.

Introduce #222222 como primer plano y #ffffff como fondo, envía la comprobación y revisa la relación junto con las cuatro evaluaciones.

El resultado debe incluir una relación de contraste redondeada a dos decimales y evaluaciones separadas para los umbrales de texto normal y texto grande.

Limitaciones

• Las evaluaciones cubren los cuatro umbrales indicados y los formatos de color admitidos; no deben presentarse como una garantía de accesibilidad completa ni como una revisión de otras partes del diseño.

Errores frecuentes

• Causa: se introduce un nombre de color, una variante hexadecimal no admitida o un texto RGB con una estructura distinta. Corrección: utiliza una forma de tres o seis cifras con #, o un texto que empiece por rgb y tenga tres componentes numéricos separados por comas.

Preguntas frecuentes

¿Puedo escribir nombres de colores o cualquier sintaxis CSS?

No. Solo se aceptan formatos hexadecimales de tres o seis cifras precedidos por # o cadenas de tipo RGB con tres componentes numéricos separados por comas. Los nombres de color y otras sintaxis CSS no están incluidos entre los formatos aceptados.

¿Qué ocurre si no introduzco ningún color?

Si dejas los campos vacíos, el primer plano toma negro (#000000) y el fondo toma blanco (#ffffff). Si escribes un valor, debe poder interpretarse con uno de los formatos admitidos.

¿Qué significa que los colores sean iguales o que aparezca un error?

La relación será 1,0 cuando ambos colores sean idénticos. Si una entrada no se puede interpretar, el resultado incluye una indicación de error y no muestra las evaluaciones normales de contraste.