⇄ Invertir los colores

Cómo usar

1. Elige un color de primer plano (texto) y un color de fondo.
2. La relación de contraste se actualiza al instante.
3. Comprueba las notas WCAG (AA/AAA) para texto normal y grande.
4. Haz clic en Invertir para intercambiar los colores.

Preguntas frecuentes

¿Qué es WCAG?

WCAG (Web Content Accessibility Guidelines) son las normas internacionales para hacer accesible el contenido web. El nivel AA es el estándar más requerido. El nivel AAA es el más alto.

¿Qué cuenta como «texto grande»?

El texto grande se define como al menos 18 pt (24 px) o 14 pt (18,66 px) en negrita. Tiene una exigencia de contraste menor porque es más fácil de leer.

¿A qué relación de contraste apuntar?

Para el cuerpo de texto, apunta al menos a 4,5 : 1 (AA). Para la mejor accesibilidad, apunta a 7 : 1 (AAA). Los títulos y textos grandes necesitan al menos 3 : 1.

Qué mide realmente WCAG

El «contraste» en la accesibilidad web no es «lo diferentes que se ven los colores», sino una relación precisa de luminancia relativa entre dos colores. La luminancia es una aproximación perceptiva de cuánto brillo aparenta un color para un observador con visión típica. La relación va de 1 : 1 (dos colores con luminancia idéntica, invisibles uno contra otro) a 21 : 1 (negro puro #000000 contra blanco puro #ffffff). Tres criterios de éxito normativos de WCAG usan esta relación:

• 1.4.3 Contraste (mínimo), nivel AA: al menos 4,5 : 1 para el texto normal y 3 : 1 para el texto grande.
• 1.4.6 Contraste (mejorado), nivel AAA: al menos 7 : 1 en normal y 4,5 : 1 en grande.
• 1.4.11 Contraste no textual, nivel AA (añadido en WCAG 2.1): al menos 3 : 1 para los componentes de la interfaz y los objetos gráficos significativos frente a los colores adyacentes.

El umbral de 4,5 : 1 no es arbitrario. La propia derivación de WCAG parte de una referencia ANSI de 3 : 1 para la visión normal multiplicada por 1,5 para los usuarios con una agudeza 20/40 (el umbral que suele usarse para definir legalmente la «baja visión»). 4,5 = 3 × 1,5. El umbral AAA de 7 : 1 extiende la misma lógica hasta una agudeza de aproximadamente 20/80. Los logotipos, los nombres de marca y el texto incidental o decorativo están exentos, pero todo lo demás cae bajo la regla.

La fórmula

La fórmula de contraste de la técnica G18 de WCAG tiene tres pasos. Las entradas son valores de canal sRGB de 8 bits (0-255), cada uno convertido primero a un rango de 0 a 1:

1. Linealizar el sRGB (deshacer la curva gamma). Para cada canal V: si V ≤ 0,04045, V_linear = V ÷ 12,92; en caso contrario, V_linear = ((V + 0,055) ÷ 1,055)^2,4. (Los documentos antiguos de WCAG usaban 0,03928; el W3C lo actualizó por fe de erratas a 0,04045 para coincidir con la especificación formal de sRGB; la diferencia numérica es insignificante.)
2. Calcular la luminancia relativa: L = 0,2126·R + 0,7152·G + 0,0722·B (linealizados). Los pesos provienen de la función de luminosidad fotópica del observador estándar CIE 1931: el ojo humano es más sensible al verde (~71 %), luego al rojo (~21 %) y luego al azul (~7 %). Por eso el texto azul puro sobre blanco puede no cumplir el contraste aunque los colores se vean muy diferentes.
3. Tomar la relación: (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es el color más claro y L2 el más oscuro. El desplazamiento de 0,05 modela el reflejo ambiental en una pantalla típica y evita que la relación se dispare cuando uno de los colores es casi negro.

Ejemplo resuelto para negro sobre blanco: el blanco tiene L = 1,0 y el negro tiene L = 0, así que la relación es (1 + 0,05) ÷ (0 + 0,05) = 21. Ese es el contraste máximo posible en sRGB.

¿Qué cuenta como «texto grande»?

WCAG define el texto de gran tamaño como de al menos 18 puntos (peso normal) o 14 puntos en negrita. Convertido a píxeles CSS con la equivalencia indicada por el W3C de 1 pt = 1,333 px:

• 18 pt = 24 px normal
• 14 pt en negrita = 18,66 px en negrita

La mayoría de los navegadores usan 16 px / 12 pt para el cuerpo de texto por defecto, no grande. Un error común es tratar cualquier título como grande; un <h3> con estilo de 18 px normal sigue cayendo bajo la regla de 4,5 : 1 para el texto normal.

El famoso caso límite: #767676 sobre blanco

Los diseñadores que persiguen el minimalismo a menudo eligen grises medios para el cuerpo de texto. Dos valores que se ven idénticos al ojo están en lados opuestos de la línea de WCAG:

Primer plano	Fondo	Relación	AA Normal
#000000	#ffffff	21.00	Cumple (máx.)
#595959	#ffffff	~7.0	Cumple + AAA
#767676	#ffffff	4.54	Cumple (por poco)
#777777	#ffffff	4.48	No cumple
#959595	#ffffff	3.00	No cumple (solo grande)
#ffff00	#ffffff	1.07	No cumple

Un cambio de un solo carácter en el hexadecimal, la diferencia entre #767676 y #777777, hace pasar el mismo gris de aprobado a suspenso, porque WCAG prohíbe explícitamente redondear las proporciones al alza. WebAIM señala específicamente #777777 como un «tono de gris de uso común» que no cumple el nivel AA. Esta única trampa explica una parte medible de los fallos de las auditorías automatizadas en los análisis de sitios reales.

Dónde se queda corta la fórmula

La fórmula de luminancia relativa es rápida y determinista, pero tiene defectos perceptivos bien documentados:

• Simetría. WCAG 2 devuelve la misma relación tanto si pones texto claro sobre fondo oscuro como texto oscuro sobre uno claro. Los estudios empíricos de lectura muestran que el claro sobre oscuro necesita más contraste que el oscuro sobre claro para resultar igual de legible, en parte por la dilatación de la pupila y por la «halación» de los glifos brillantes sobre fondos oscuros. Las interfaces en modo oscuro que cumplen WCAG 2 AA pueden seguir pareciendo deslavadas.
• Ceguera espacial. La fórmula ignora el peso de la fuente, el grosor del trazo y el tamaño de la fuente más allá del umbral del texto grande. Una fuente de trazo fino de 18 px y una de peso 900 de 18 px se tratan de forma idéntica.
• Aprobado excesivo en modo oscuro. Según la documentación de APCA, la fórmula sobrestima sistemáticamente el contraste de los colores oscuros. Dos grises oscuros que matemáticamente cumplen WCAG 2 pueden ser visualmente indistinguibles en un monitor real.

APCA (Accessible Perceptual Contrast Algorithm) es el candidato a reemplazo que se está prototipando para WCAG 3. Devuelve un único valor Lc con signo de aproximadamente −108 a +106, tiene en cuenta la polaridad e incluye una tabla de consulta de peso y tamaño de fuente. APCA es actualmente una referencia beta no comercial, no un objetivo legal de conformidad (los sitios en producción deberían seguir apuntando a WCAG 2.1 / 2.2 AA), pero es una comprobación de legibilidad más precisa, sobre todo para el modo oscuro. Las DevTools de Chrome incluyen una vista previa de APCA en su selector de color.

Por qué esto importa legalmente

WCAG 2.2 se convirtió en Recomendación del W3C el 5 de octubre de 2023, pero los criterios de contraste se mantienen sin cambios desde la 2.1. El contraste de color es uno de los problemas más citados en las demandas por accesibilidad digital, y varias jurisdicciones lo hacen efectivamente obligatorio:

• Estados Unidos, Sección 508 (renovada en 2017) está armonizada con WCAG 2.0 AA, así que 4,5 : 1 es vinculante para las contrataciones federales. Las sentencias judiciales del Título III de la ADA han citado repetidamente WCAG AA como el estándar de facto para los sitios comerciales de cara al público. El Departamento de Justicia (DOJ) adoptó una norma del Título II en abril de 2024 que exige que el contenido web de los gobiernos estatales y locales cumpla WCAG 2.1 AA, con plazos escalonados a lo largo de esta década.
• Unión Europea, EN 301 549 incorpora WCAG 2.1 AA. El plazo de cumplimiento de la Ley Europea de Accesibilidad (Directiva 2019/882) fue el 28 de junio de 2025, y abarca sitios web, aplicaciones móviles, comercio electrónico, banca, libros electrónicos y más. Las microempresas están exentas en cuanto a servicios. Las sanciones varían según el Estado miembro.
• El deber de «ajustes razonables» de la Equality Act 2010 del Reino Unido se aplica a los sectores privado y público. Los organismos del sector público están vinculados por las regulaciones de accesibilidad de 2018 que incorporan EN 301 549 / WCAG 2.1 AA.
• Canadá, AODA (Ontario) y la Accessible Canada Act federal exigen WCAG 2.0 AA, con los plazos escalonados de la AODA ya superados hace tiempo.

Contraste de color frente a daltonismo

Un punto de confusión habitual: la relación de WCAG se basa en la luminancia y sigue siendo útil para la mayoría de los usuarios daltónicos, ya que una relación de 4,5 : 1 derivada de la luminancia corresponde a una señal perceptiva fuerte incluso cuando se pierden las señales de tono. Por eso los criterios de contraste conviven con un criterio aparte, 1.4.1 Uso del color, que prohíbe basarse solo en el color para transmitir información. El contraste no te dice si un gráfico de rojo frente a verde es legible para una persona con deuteranopía, solo si cada color contrasta individualmente con el fondo del gráfico. Los gráficos y la interfaz con estados necesitan patrones, etiquetas o formas superpuestos al color.

Lista de comprobación práctica

• Cuerpo de texto sobre blanco: quédate en #595959 o más oscuro para AAA; #767676 es el gris más claro que aún cumple AA Normal.
• Azules de marca: muchos caen en el rango de 3 a 4,5. #1976d2 es un azul de Material típico de aproximadamente 4,59 : 1; apenas cumple AA Normal sobre blanco. #42a5f5, de aproximadamente 2,6 : 1, no cumple.
• Bordes de formulario: un borde 1px solid #ccc sobre blanco es de unos 2,13 : 1; no cumple el 1.4.11. Usa #767676 o más oscuro.
• Los indicadores de foco deben alcanzar 3 : 1 frente al fondo. El contorno por defecto del navegador a menudo se anula con un CSS de reinicio sin un reemplazo que cumpla el umbral.
• El texto de marcador de posición es técnicamente incidental, pero los usuarios sí lo leen; trátalo como si se le aplicara el 4,5 : 1.
• No te fíes del ojo para el modo oscuro. Las relaciones de WCAG 2 aprueban en exceso de forma sistemática los fondos oscuros. Contrástalo con APCA en las DevTools de Chrome.

Más preguntas

¿Por qué el amarillo puro sobre blanco no cumple si se ve brillante?

El amarillo (#ffff00) sobre blanco es de 1,07 : 1, casi sin contraste alguno. La fórmula de luminancia pondera el verde al 71 % y el rojo al 21 %, así que el amarillo (R+G) tiene una luminancia muy cercana a la del blanco. El amarillo sobre negro, en cambio, es de 19,56 : 1, una de las combinaciones más legibles que se conocen, razón por la cual se usa en las señales de tráfico y en las advertencias de los cascos de obra.

¿Debería apuntar siempre a AAA?

No. La propia WCAG dice: «No se recomienda que se requiera la conformidad de nivel AAA como política general para sitios completos, porque no es posible satisfacer todos los Criterios de Éxito de nivel AAA para algunos contenidos.» El nivel AA es el objetivo legal casi en todas partes; el AAA es para la lectura informativa de alto riesgo (contenido extenso, documentos gubernamentales destinados al público general, publicaciones que priorizan la accesibilidad).

¿Pueden las herramientas automatizadas detectar todos los fallos de contraste?

No. Las auditorías como axe-core, Lighthouse y similares detectan de forma fiable los fallos de texto sobre color plano, pero no pueden comprobar el texto superpuesto a imágenes de fondo, degradados CSS, fondos de pseudoelementos o colores de borde CSS; esos se marcan como «incompletos» y necesitan revisión manual. Un selector en vivo como este resulta útil por sí solo para muestrear el color de fondo dominante de una imagen y comprobar solo el par de texto y fondo antes de publicar.

¿Esta herramienta admite transparencia / alfa?

Esta página comprueba pares de colores hexadecimales opacos. Si tu texto o fondo usa alfa, el contraste real depende de lo que haya detrás; tendrás que calcular primero el primer plano compuesto y comprobar el color opaco resultante.

¿Se envía algo a un servidor?

No. La fórmula de luminancia y la relación se calculan en tu navegador; los colores nunca salen de tu dispositivo. La página funciona sin conexión una vez cargada.

Herramientas relacionadas