1. Introduzca el color del texto
Escriba un código de color (p. ej., #333333) en formato HEX, RGB o HSL, o elija un color desde el selector de colores.
Comprueba el contraste de colores y legibilidad según WCAG
Introduzca 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.
Loading tool editor...
¿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, millones padecen daltonismo (alrededor del 8 % de los hombres y el 0,5 % de las mujeres), y muchos más experimentan un deterioro visual relacionado 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:
2. Introduzca el color de fondo
Introduzca 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. Ajuste los colores
Si el contraste es demasiado bajo, la función Coincidencia sugiere automáticamente una variante de color que cumple con el umbral seleccionado.
¿Qué formatos de color se admiten?
HEX
Formato hexadecimal - el más común en diseño web. Comienza con # y contiene 3 o 6 caracteres (dígitos 0-9 y letras A-F).
#fff- blanco (forma abreviada)#ffffff- blanco (forma completa)#1a73e8- azul
Relación de contraste
8.59:1
Texto normal
AA (mín. 4,5:1)AAA (mín. 7:1)
Texto normal de ejemplo
Texto grande
AA (mín. 3:1)AAA (mín. 4,5:1)
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 a encabezados, botones y resaltados.
- 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: encabezados, botones, resaltados.
- 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 mínimo exigido por las normativas de accesibilidad digital en muchos países, incluida la directiva de la UE sobre accesibilidad web. 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 necesita buscar el color adecuado por ensayo y error. La función Coincidencia encuentra automáticamente una variante de color de texto que cumple con el umbral de contraste seleccionado.
Cómo funciona la coincidencia:
- Seleccione el objetivo de coincidencia de la lista, p. ej., AA para texto normal o AAA para texto grande.
- Haga clic en el botón Coincidencia.
- 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?
| Feature | 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 | ||
| Obligatorio por Real Decreto 1112/2018 (sector público) | ||
| Obligatorio por Acta Europea de Accesibilidad (sector privado desde VI 2025) | ||
| Obligatorio por directiva UE 2016/2102 (sector público) | ||
| Recomendado para contenido clave |
Nivel AA (mínimo)
- 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
- Obligatorio por Real Decreto 1112/2018 (sector público)
- Obligatorio por Acta Europea de Accesibilidad (sector privado desde VI 2025)
- Obligatorio por directiva UE 2016/2102 (sector público)
- Recomendado para contenido clave
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
- Obligatorio por Real Decreto 1112/2018 (sector público)
- Obligatorio por Acta Europea de Accesibilidad (sector privado desde VI 2025)
- Obligatorio por directiva UE 2016/2102 (sector público)
- Recomendado para contenido clave
Solución de problemas del comprobador de contraste de colores
Veo un error de formato de color
Compruebe el formato del color. Un código HEX debe empezar con # y contener 3 o 6 caracteres (p. ej., #fff o #ffffff). Para formato RGB, compruebe que los valores están separados por comas y en el rango 0–255.
La función Coincidencia 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, considere 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 online
Precios, botones de Comprar, información del producto. Una legibilidad baja puede significar pedidos perdidos.Presentaciones
Las diapositivas mostradas por proyector suelen tener un contraste más débil que en un monitor. Compruebe 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 que afecta a aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres. Las personas con daltonismo pueden tener dificultades para distinguir ciertos pares de colores, incluso si el contraste de luminancia es suficiente.
Tipos más comunes de daltonismo:
- Deuteranopía – dificultad para distinguir entre verde y rojo (la forma más común)
- 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.
Legislación española sobre contraste de color y accesibilidad digital
En España, el contraste de color es una obligación legal para el sector público, y desde 2025 también para el privado.
Real Decreto 1112/2018
Transpone la Directiva europea de accesibilidad web a la legislación española. Todos los sitios web y aplicaciones móviles del sector público deben cumplir la norma EN 301 549, que referencia WCAG 2.1 nivel AA. Esto incluye un contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande.
Ley General de derechos de personas con discapacidad (RDL 1/2013)
Garantiza la igualdad de oportunidades y no discriminación de las personas con discapacidad en todos los ámbitos, incluidos los servicios digitales. Establece que las administraciones públicas deben adoptar las medidas necesarias para que sus servicios sean accesibles.
Acta Europea de Accesibilidad (2019/882)
Desde el 28 de junio de 2025, el sector privado también debe cumplir requisitos de accesibilidad: comercio electrónico, banca online, transporte, libros electrónicos y terminales de autoservicio. Las empresas españolas que vendan online deberán respetar WCAG 2.1 AA.
Latinoamérica
En México, la NOM-DGTI-SEGOB regula la accesibilidad de sitios gubernamentales. En Argentina, la Ley de Accesibilidad de la Información (26.653) exige WCAG 2.0 AA para sitios públicos. El estándar WCAG 2.1 AA es la referencia común en toda la región hispanohablante.
¿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 coinciden con los requisitos de WCAG 2.1, que constituyen la base de las normativas de accesibilidad digital en la UE y muchos otros países.Coincidencia automática de color con el umbral
La función Coincidencia 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. 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 (encabezados, botones) e iconos: no es necesario probar cada tipo por separado.
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. El nivel AA (4,5:1 para texto normal) es el mínimo exigido por las normativas de accesibilidad en la Unión Europea. El nivel AAA (7:1) proporciona mejor legibilidad, pero es más difícil de alcanzar. Para contenido crítico (avisos, instrucciones de seguridad), considere 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. Preste 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), abra las herramientas de desarrollo (clic derecho → Inspeccionar). En la pestaña Styles verá 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.
¿Es el contraste de color legalmente obligatorio en España?
Sí. El Real Decreto 1112/2018 exige que los sitios web del sector público cumplan la norma EN 301 549 (WCAG 2.1 nivel AA), que incluye un contraste mínimo de 4,5:1 para texto normal. Desde junio de 2025, el Acta Europea de Accesibilidad extiende estos requisitos al sector privado: tiendas online, banca y transporte.
¿Qué norma técnica aplica en España para el contraste?
España referencia la norma europea EN 301 549, que a su vez incorpora los criterios WCAG 2.1 nivel AA. Los umbrales de contraste son: 4,5:1 para texto normal (criterio 1.4.3), 3:1 para texto grande (criterio 1.4.3), y 3:1 para componentes de interfaz (criterio 1.4.11). El Real Decreto 1112/2018 establece EN 301 549 como el estándar de referencia.
¿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, introduzca 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).
¿Cómo afecta la EAA a mi sitio web en España?
La Ley Europea de Accesibilidad (EAA) está en vigor desde junio de 2025. Obliga a empresas del sector privado que operan en la UE - comercio electrónico, banca, transporte - a garantizar la accesibilidad digital. La norma referenciada es EN 301 549, que mapea a WCAG 2.1 AA, incluidos los umbrales de contraste 4,5:1 y 3:1.
¿Los sitios web en Latinoamérica también deben cumplir el contraste?
Varios países tienen legislación: Argentina (Ley 26.653), Colombia (Resolución 1519/2020) y México (normas en desarrollo). Todos referencian WCAG. Aunque la aplicación varía, los umbrales de contraste 4,5:1 y 3:1 son universales.
¿Cuál es el color gris mínimo seguro sobre fondo blanco?
El gris más oscuro que pasa WCAG AA sobre blanco (#ffffff) es #767676, con una relación exacta de 4,54:1. Grises más claros como #999999 (2,85:1) no cumplen. Para AAA (7:1) se necesita al menos #595959.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea para una nueva función, encontraste un error o quieres sugerir otra herramienta que facilite tu trabajo? Escríbenos – respondemos en 24 horas.