Comprueba el contraste de colores y legibilidad según WCAG

Última revisión del contenido:2026-09-30

Introduce un color de texto y de fondo, y la herramienta mostrará si el contraste es suficiente. Los cálculos se basan en el estándar internacional de accesibilidad WCAG 2.1, que define valores mínimos de contraste para diferentes tipos de contenido.

Relación de contraste

21.00 : 1

Texto normal

AA (mín. 4,5:1)AAA (mín. 7:1)

Texto de ejemplo de contraste WCAG 2.1

Texto grande / negrita

AA (mín. 3:1)AAA (mín. 4,5:1)

Texto de ejemplo de contraste WCAG 2.1

Icono

AA (mín. 3:1)

¿Por qué importa la legibilidad del color?

La legibilidad es la diferencia de luminancia entre el color del texto y el color del fondo. Cuanto mayor sea la diferencia, más fácil será leer el texto. Un contraste demasiado bajo hace que el contenido sea difícil de leer, especialmente para personas con deficiencias visuales, personas mayores o en condiciones de iluminación difíciles (p. ej., en un teléfono bajo luz solar directa).

Según la Organización Mundial de la Salud (OMS), aproximadamente 2 200 millones de personas en todo el mundo tienen algún tipo de deficiencia visual. Además, el daltonismo rojo-verde afecta hasta al 8 % de los hombres y al 0,5 % de las mujeres de ascendencia noreuropea, y la visión de los colores también empeora con la edad.

La herramienta calcula la relación de contraste utilizando la fórmula especificada en las WCAG 2.1 (Web Content Accessibility Guidelines) – directrices internacionales de accesibilidad digital. El resultado permite una evaluación objetiva de si los colores son lo suficientemente legibles, independientemente de la configuración del monitor o la percepción individual del color.

Cómo usar el comprobador de contraste de colores

Comprobar la legibilidad lleva solo unos segundos:

1. Introduce el color del texto
Escribe un código de color (p. ej., #333333) en formato HEX, RGB o HSL, o elige un color desde el selector de colores.
2. Introduce el color de fondo
Introduce el color de fondo sobre el que se mostrará el texto: puede ser el color de fondo de una sección, bloque o página completa.
3. Lea el resultado
La herramienta calculará la relación de contraste y mostrará si los colores cumplen con los requisitos WCAG para texto normal, texto grande e iconos.
4. Ajusta los colores
Si el contraste es demasiado bajo, la función Ajustar sugiere automáticamente una variante de color que cumple con el umbral seleccionado.

¿Qué formatos de color se admiten?

HEX

Formato hexadecimal - la notación de CSS y de los programas de diseño. El código tiene 3 o 6 caracteres (dígitos 0-9 y letras A-F), o 4 y 8 cuando los últimos indican la transparencia. El # puede omitirse, así que un código copiado sin él, como 1B2632, también funciona.

#fff - blanco (forma abreviada)
#ffffff - blanco (forma completa)
#1a73e8 - azul
#00000080 - negro con 50 % de opacidad

RGB / RGBA

Formato basado en tres canales: Rojo (Red), Verde (Green), Azul (Blue). Cada canal acepta un valor de 0 a 255. La variante RGBA añade un cuarto parámetro - la transparencia (alpha) de 0 a 1.

rgb(255, 255, 255) - blanco
rgba(0, 0, 0, 0.8) - negro al 80% de opacidad

HSL / HSLA

Formato basado en tono (Hue, 0-360°), saturación (Saturation, 0-100%) y luminosidad (Lightness, 0-100%). La variante HSLA añade la transparencia. Este formato es útil para modificar el brillo o la saturación de un color.

hsl(0, 0%, 100%) - blanco
hsla(217, 91%, 60%, 0.9) - azul al 90% de opacidad

Cómo interpretar los resultados de la prueba de legibilidad

Después de introducir los colores, la herramienta muestra los resultados en tres secciones:

Texto normal - requiere un contraste de 4,5:1 (AA) o 7:1 (AAA). Se aplica al texto menor de 18pt (24px) o menor de 14pt en negrita.
Texto grande / negrita - requiere un contraste de 3:1 (AA) o 4,5:1 (AAA). Se aplica al texto desde 18pt (24px) o desde 14pt (18,5px) en negrita, como los encabezados grandes.
Iconos - requiere un contraste de 3:1 (AA). Se aplica a iconos y elementos gráficos de interfaz que transmiten información.

Indicador verde significa que se cumple el requisito. Indicador rojo significa que el contraste es demasiado bajo y necesita mejora.

¿Qué significan los resultados de la prueba de legibilidad?

La herramienta muestra la relación de contraste en una escala de 1:1 (sin contraste) a 21:1 (contraste máximo: negro sobre blanco). El resultado se compara con los umbrales definidos en el estándar WCAG:

Texto normal – requiere al menos 4,5:1 para el nivel AA (estándar mínimo) o 7:1 para el nivel AAA (estándar mejorado). Se aplica al texto menor de 18pt (24px) o menor de 14pt (18,5px) en negrita.
Texto grande / negrita – requiere al menos 3:1 para el nivel AA o 4,5:1 para el nivel AAA. Se aplica al texto desde 18pt (24px) o desde 14pt (18,5px) en negrita, por ejemplo los encabezados grandes.
Iconos y elementos de interfaz – requieren al menos 3:1 para el nivel AA. Se aplica a iconos, botones, campos de formulario y otros elementos de interfaz que transmiten información.

El nivel AA es el nivel al que se refieren muchas políticas de accesibilidad de instituciones públicas, por lo que es un buen punto de partida. El nivel AAA proporciona mejor legibilidad, pero no siempre es práctico de alcanzar para todos los elementos.

Coincidencia automática de colores con los requisitos WCAG

Si el contraste es demasiado bajo, no necesitas buscar el color adecuado por ensayo y error. La función Ajustar encuentra automáticamente una variante de color de texto que cumple con el umbral de contraste seleccionado.

Cómo funciona la coincidencia:

Selecciona el objetivo de coincidencia de la lista, p. ej., AA para texto normal o AAA para texto grande.
Haz clic en el botón Ajustar.
La herramienta buscará entre las variantes de luminosidad del color del texto y sugerirá la más cercana que cumpla con los requisitos.
El color sugerido se puede copiar al portapapeles o establecer inmediatamente como el nuevo color del texto.

El algoritmo preserva el tono y la saturación del color original, cambiando solo la luminosidad. El color sugerido se mantiene coherente con la identidad visual al tiempo que cumple con el estándar de accesibilidad.

¿Qué significan los niveles AA y AAA en el estándar WCAG?

	Nivel AA (mínimo)	Nivel AAA (mejorado)
Texto normal - mín. 4,5:1	✓	✓
Texto normal - mín. 7:1	—	✓
Texto grande / negrita - mín. 3:1	✓	✓
Texto grande / negrita - mín. 4,5:1	—	✓
Iconos y elementos de interfaz - mín. 3:1	✓	✓
Recomendado para contenido clave	✓	✓

¿Qué formas de escribir el color admite esta herramienta?

Pega el color tal como lo tienes: un código con almohadilla o sin ella, una línea entera de la hoja de estilos, una constante del código de Android, un nombre de CSS o solo tres números. La herramienta lee todas estas formas sola. La columna central muestra el color leído y la siguiente su contraste sobre fondo blanco: ambos los calculó la herramienta.

Lo que escribes	Cómo lo lee la herramienta	Contraste sobre blanco	Cómo lo leemos
1B2632	rgb(27, 38, 50)	15,33:1	La almohadilla no hace falta, un código sin ella lo leemos igual
color: #1B2632;	rgb(27, 38, 50)	15,33:1	Pega la línea entera de la hoja de estilos o de las herramientas del navegador, el color lo sacamos nosotros
#00000080	rgba(0, 0, 0, 0.502)	4,00:1	En un código de ocho caracteres la opacidad está en los dos últimos, y la tenemos en cuenta al calcular el contraste
0x80000000	rgba(0, 0, 0, 0.502)	4,00:1	En una constante de código Android o Kotlin la opacidad está en los dos primeros caracteres, y ahí es donde la buscamos
rgb(59 130 246 / 50%)	rgba(59, 130, 246, 0.5)	1,84:1	La sintaxis CSS moderna, con espacios y opacidad tras la barra, la aceptamos sin cambios
rgba(0, 0, 0, 0,5)	rgba(0, 0, 0, 0.5)	3,98:1	La opacidad escrita con coma decimal funciona igual que con punto
rgba(0, 0, 0, .5)	rgba(0, 0, 0, 0.5)	3.98:1	El cero delante del punto se puede omitir: .5 significa para nosotros lo mismo que 0.5
59, 130, 246	rgb(59, 130, 246)	3,68:1	Tres números sin rgb() bastan, el resto de la notación la completamos nosotros
RGB(59,130,246)	rgb(59, 130, 246)	3.68:1	Las mayúsculas en el nombre de la función y la falta de espacios tras las comas no molestan
rgb(300, 0, 0)	rgb(255, 0, 0)	4,00:1	Un canal por encima de 255 lo ajustamos a 255, igual que el navegador
hsl(217 91% 60%)	rgb(60, 131, 246)	3,63:1	Una notación HSL, con comas o con espacios, la pasamos nosotros a RGB
navy	rgb(0, 0, 128)	16,01:1	Conocemos los 148 nombres de color de CSS, así que basta con escribir la palabra
transparent	rgba(0, 0, 0, 0)	1,00:1	Un texto totalmente transparente da un contraste de 1:1 sobre cualquier fondo, y así lo indicamos

La herramienta coloca el texto semitransparente sobre el fondo antes del cálculo, y el fondo semitransparente sobre blanco.

Solución de problemas del comprobador de contraste de colores

Veo un error de formato de color

Comprueba el formato del color. Un código HEX tiene 3, 4, 6 u 8 caracteres, con o sin # (p. ej., #fff o 1B2632). Los valores RGB y HSL van dentro de rgb() o hsl(), separados por comas o espacios. También funcionan los nombres de colores de CSS, como navy o rebeccapurple.

La función Ajustar no encuentra un color adecuado

Cuando el fondo y el texto tienen una luminosidad similar en el mismo tono, el algoritmo puede no encontrar una variante que cumpla los requisitos sin cambiar el tono. En este caso, considera cambiar el color de fondo o elegir un color de texto completamente diferente.

El color en el selector no corresponde al código introducido

El selector de colores del navegador solo admite el formato HEX sin transparencia. Si introduce un color en formato RGBA o HSLA con transparencia, el selector mostrará solo la parte de color (sin alfa). Los cálculos de contraste siguen teniendo en cuenta la transparencia.

¿Dónde debería comprobar la legibilidad del color?

La legibilidad importa en todos los lugares donde alguien necesita leer texto o reconocer un elemento de interfaz:

Sitios web
Texto en páginas, botones, enlaces, formularios. Especialmente importante para sitios empresariales donde los visitantes tienen diferentes edades y capacidades visuales.
Tiendas
Precios, botones de Comprar, información del producto. Una legibilidad baja puede significar pedidos perdidos.
Presentaciones
Un proyector puede mostrar los colores con menos contraste que un monitor. Comprueba los colores antes de presentar.
Carteles y folletos
Los materiales impresos vistos en diversas condiciones de iluminación requieren un alto contraste.
Aplicaciones móviles
Los teléfonos se usan bajo luz solar directa, de noche y por personas de todas las edades.
Menús de restaurante
A menudo impresos en papel de color o con fuentes decorativas: es fácil acabar con un contraste demasiado bajo.

Legibilidad del color para personas con daltonismo

El daltonismo es un trastorno de la percepción del color: el daltonismo rojo-verde afecta hasta al 8 % de los hombres y al 0,5 % de las mujeres de ascendencia noreuropea. Las personas con daltonismo pueden tener dificultades para distinguir ciertos pares de colores, incluso si el contraste de luminancia es suficiente.

Tipos de daltonismo:

Deuteranopía – dificultad para distinguir entre verde y rojo
Protanopía – dificultad para ver el color rojo
Tritanopía – dificultad para ver azul y amarillo (poco frecuente)

Esta herramienta comprueba el contraste de luminancia, que es importante para todos los usuarios. Sin embargo, al diseñar, conviene evitar combinaciones de colores problemáticas (p. ej., texto rojo sobre fondo verde) y no depender únicamente del color para transmitir información: use también formas, iconos y texto.

¿Qué hace especial a este comprobador de contraste y legibilidad?

Evaluación objetiva basada en una fórmula matemática
La relación de contraste se calcula utilizando la fórmula WCAG: el resultado no depende de la configuración del monitor ni de la percepción individual del color.
Conformidad con el estándar internacional WCAG
Los resultados siguen los umbrales de WCAG 2.1, las pautas del W3C a las que se refieren muchas políticas de accesibilidad.
Coincidencia automática de color con el umbral
La función Ajustar encuentra una variante de color de texto que cumple con el umbral de contraste seleccionado: preserva el tono, cambia solo la luminosidad.
Cinco formatos de color
Formatos compatibles: HEX, RGB, RGBA, HSL y HSLA, además de los nombres de colores de CSS, como navy. El código de color se puede pegar directamente desde Figma, Photoshop o una hoja de estilos CSS.
Tres tipos de contenido en una sola prueba
Una sola comprobación muestra el resultado para texto normal, texto grande (por ejemplo, encabezados grandes) e iconos: no es necesario probar cada tipo por separado.

Última revisión del contenido: 30 de septiembre de 2026 · redactado y verificado por el equipo de Arteon

Preguntas frecuentes sobre el comprobador de contraste de colores

¿Qué es una relación de contraste de colores?

Una relación de contraste es una medida de la diferencia de luminancia entre dos colores. La escala va de 1:1 (sin diferencia, p. ej., texto blanco sobre fondo blanco) a 21:1 (diferencia máxima, texto negro sobre fondo blanco). Cuanto mayor sea la relación, más fácil será distinguir el texto del fondo.

¿Qué contraste es suficiente según WCAG?

Para texto normal, el mínimo es 4,5:1 (Nivel AA). Para texto grande (encabezados desde 18pt o texto en negrita desde 14pt), 3:1 es suficiente. Para iconos y componentes de interfaz, también se requiere 3:1. Estos umbrales garantizan la legibilidad para la mayoría de los usuarios, incluidos los que tienen problemas de visión.

¿El contraste de colores es importante para los usuarios daltónicos?

El comprobador evalúa el contraste de luminancia, que es importante para todos los usuarios, incluidos los daltónicos. Sin embargo, el daltonismo es un problema de percepción del color, no de luminancia, por lo que, además del contraste, hay que evitar pares de colores problemáticos (p. ej., texto rojo sobre fondo verde) y no depender únicamente del color para transmitir información.

¿Por qué mi color no cumple los requisitos aunque lo veo bien?

La percepción personal del color depende de la configuración del monitor, la iluminación de la sala y las capacidades visuales individuales. WCAG se basa en una fórmula matemática objetiva que tiene en cuenta diferentes deficiencias visuales. Un color legible en una pantalla puede ser ilegible en otra o para otra persona.

¿Necesito cumplir el nivel de contraste AAA?

No siempre. Muchas políticas de accesibilidad de instituciones públicas se refieren al nivel AA (4,5:1 para texto normal). El nivel AAA (7:1) proporciona mejor legibilidad, pero es más difícil de alcanzar. Para contenido crítico (avisos, instrucciones de seguridad), considera aspirar al AAA.

¿Qué es el estándar WCAG?

WCAG (Web Content Accessibility Guidelines) es un conjunto internacional de directrices de accesibilidad web desarrollado por la organización W3C. Define, entre otros aspectos, valores mínimos de contraste de colores, estructura de encabezados, soporte de teclado y otros requisitos que hacen que los sitios web sean accesibles para personas con diversas discapacidades.

¿Qué pares de colores de mi sitio debería comprobar primero?

Los más importantes: texto sobre el fondo principal, texto en banners y secciones de color, botones (color del texto y fondo del botón respecto al fondo de la página), enlaces e iconos. Presta especial atención a los elementos que aparecen sobre diferentes fondos según la sección.

¿Dónde puedo obtener los códigos de color de mi sitio web?

En el navegador (Chrome, Firefox, Edge), haz clic derecho y elige Inspeccionar para abrir las herramientas de desarrollo. En la pestaña Styles verás los colores utilizados en la página. Alternativamente, extensiones del navegador como ColorZilla permiten obtener el color de cualquier elemento sin entrar en el código.

¿Funciona esta herramienta para diseños en modo oscuro?

Sí. La herramienta comprueba la relación de contraste entre dos colores cualesquiera, independientemente de cuál sea más claro. Para modo oscuro, introduce un color de texto claro y un color de fondo oscuro. Los mismos umbrales WCAG aplican: 4,5:1 para texto normal (AA) y 7:1 (AAA).

¿Cuál es el color gris mínimo seguro sobre fondo blanco?

El gris más claro que pasa WCAG AA sobre blanco (#ffffff) es #767676, con una relación de 4,54:1. El siguiente tono más claro, #777777, da 4,48:1 y no cumple, y #999999 solo 2,85:1. Para AAA (7:1) se necesita #595959 o uno más oscuro.