WCAG 1.4.6: Contraste (mejorado)

Qué significa esta regla

WCAG 1.4.6 Contraste (Mejorado) es un criterio de éxito de nivel AAA bajo la Pauta 1.4 (Distinguible). Exige que la presentación visual del texto y de las imágenes de texto tenga una relación de contraste de al menos 7:1 con respecto a su fondo. Para texto grande — definido como al menos 18pt (aproximadamente 24px) para peso normal, o al menos 14pt (aproximadamente 18.67px) para peso negrita — la relación de contraste requerida es de al menos 4.5:1. Esto supone un aumento significativo respecto al criterio de nivel AA 1.4.3, que solo exige 4.5:1 para texto normal y 3:1 para texto grande.

La relación de contraste se calcula utilizando la luminancia relativa de los dos colores implicados, tal como se define en la especificación WCAG. La fórmula tiene en cuenta los valores RGB linealizados de los colores de primer plano y de fondo para producir una relación que va de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro sobre blanco o blanco sobre negro).

Este criterio se aplica a todo el texto renderizado en la interfaz, incluido el texto dentro de imágenes, iconos que contienen texto y texto renderizado en elementos canvas cuando la salida renderizada es accesible. Afecta a encabezados, cuerpo de texto, etiquetas, texto de marcador de posición en campos de formulario cuando transmite información significativa, etiquetas de botones, texto de enlaces, elementos de navegación y cualquier otro contenido textual visible en la pantalla.

WCAG 1.4.6 comparte las mismas excepciones oficiales que el criterio 1.4.3. Lo siguiente está explícitamente excluido del requisito:

• Texto incidental: Texto o imágenes de texto que son puramente decorativos, que no son visibles para nadie o que forman parte de una imagen que contiene otro contenido visual significativo. Un ejemplo sería el texto visible en el fondo de una fotografía utilizada como decoración.
• Logotipos: El texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste. Esto se aplica únicamente a la parte de marca denominativa del logotipo de una empresa, no al cuerpo de texto adyacente ni a las etiquetas de la interfaz de usuario.
• Componentes inactivos de la interfaz de usuario: El texto dentro de controles de formulario deshabilitados, botones deshabilitados u otros elementos de interfaz que no son actualmente operables está exento. Sin embargo, esta exención debe aplicarse con moderación: la interfaz inactiva aún debe ser lo suficientemente perceptible como para comunicar su existencia.

Aprobar este criterio significa que cada instancia de contenido textual que no esté explícitamente exceptuada cumple o supera la relación 7:1 (o 4.5:1 para texto grande). Se produce un fallo cuando cualquier texto no exceptuado cae por debajo de estos umbrales, incluso por un pequeño margen. El contraste debe mantenerse en todos los estados admitidos — hover, focus, active, visited — ya que el criterio se aplica a la presentación renderizada en cada uno de estos estados.

Por qué es importante

Aproximadamente 2.2 mil millones de personas en todo el mundo viven con algún tipo de discapacidad visual, según la Organización Mundial de la Salud. De ellas, cientos de millones experimentan condiciones que reducen directamente la capacidad de distinguir entre colores o percibir texto de bajo contraste, incluidas cataratas, glaucoma, degeneración macular y diversas formas de deficiencia de la visión cromática. Para esta población, las interfaces que solo cumplen el umbral de contraste AA de 4.5:1 pueden seguir presentando barreras significativas para la lectura y la comprensión.

La relación 7:1 exigida por este criterio está específicamente calibrada para tener en cuenta la pérdida de sensibilidad al contraste asociada con el envejecimiento de la vista y las condiciones comunes de baja visión. La investigación en ciencia de la visión muestra que una persona con sensibilidad al contraste moderadamente reducida — aproximadamente equivalente a una persona con visión 20/80 usando lentes correctivos — puede experimentar una reducción efectiva del contraste de aproximadamente tres a uno. Una relación de diseño de 7:1, después de esta reducción perceptiva, sigue ofreciendo aproximadamente 2.3:1 de contraste percibido, que está cerca del umbral mínimo en el que el texto se vuelve legible. Sin este margen, es posible que estas personas no puedan leer el contenido en absoluto.

Considere un escenario del mundo real: una persona de 68 años, cliente de un banco, que gestiona sus finanzas en línea en una tarde soleada, con la luz del sol reflejándose en la pantalla de su portátil. Incluso con una visión clínicamente funcional, el deslumbramiento y la reducción natural de la sensibilidad al contraste que acompaña al envejecimiento pueden hacer que el texto gris medio sobre un fondo blanco sea completamente ilegible. Un diseño que logra un contraste de 7:1 en condiciones normales seguirá siendo utilizable en este contexto; uno que apenas supera 4.5:1 no lo será.

Más allá del impacto específico en la discapacidad, el texto de alto contraste beneficia prácticamente a todas las personas usuarias en entornos de lectura subóptimos: luz solar intensa en exteriores, pantallas desgastadas con retroiluminación reducida, pantallas monocromas de tinta electrónica y proyectores de baja calidad en salas de reuniones. Por lo tanto, el requisito de contraste mejorado representa no solo una mejora de accesibilidad, sino también una mejora amplia de la usabilidad.

Desde la perspectiva de la optimización para motores de búsqueda, el texto de alto contraste tiende a correlacionarse con jerarquías tipográficas más limpias y estructuradas. Aunque los motores de búsqueda no miden directamente el contraste, la disciplina de diseño necesaria para cumplir los estándares de contraste AAA suele producir páginas con una jerarquía visual más sólida y mejores índices de legibilidad, lo que contribuye a tasas de rebote más bajas y tiempos de permanencia más largos, señales que benefician indirectamente el rendimiento SEO.

Reglas relacionadas de Axe-core

• color-contrast-enhanced: Esta es la regla principal de axe-core asociada con WCAG 1.4.6. Evalúa los colores de primer plano y de fondo calculados de todos los nodos de texto en el DOM y calcula su relación de contraste utilizando la fórmula de luminancia de WCAG. La regla marca cualquier elemento de texto cuya relación de contraste caiga por debajo de 7:1 para texto de tamaño normal o por debajo de 4.5:1 para texto grande (según el font-size y font-weight calculados). Informa de la relación real encontrada, la relación requerida y el elemento responsable, lo que hace que la corrección sea sencilla. La regla diferencia entre texto normal y texto grande utilizando los mismos umbrales de tamaño que define WCAG: 18pt (24px) para peso normal y 14pt (18.67px) para negrita.
• Limitaciones que requieren pruebas manuales: Reglas automatizadas como color-contrast-enhanced no pueden detectar fallos de contraste en varios escenarios importantes. El texto renderizado dentro de elementos <canvas> es invisible para el escáner basado en el DOM y requiere inspección visual manual. El texto superpuesto sobre fondos con degradado o fotográficos presenta un desafío particularmente difícil: la relación de contraste varía a lo largo del texto según la parte del degradado o de la imagen que quede detrás de cada letra. Las herramientas automatizadas suelen muestrear un único color de fondo o informar de resultados inconclusos en estos casos. El texto que cambia de color al pasar el cursor o al recibir el foco también debe probarse manualmente en cada estado interactivo, ya que los análisis automatizados suelen capturar solo el estado renderizado por defecto. Además, el texto cuyo contraste depende de propiedades personalizadas de CSS resueltas en tiempo de ejecución mediante JavaScript puede no ser evaluable durante un análisis estático.

Cómo probar

1. Análisis automatizado con axe DevTools: Instale la extensión de navegador axe DevTools (Chrome o Firefox). Abra la página objetivo, active la extensión y ejecute un análisis de página completa. En el panel de resultados, filtre por el ID de regla color-contrast-enhanced o busque "enhanced" en la lista de problemas. Para cada elemento marcado, el panel muestra el elemento, la relación de contraste real y la relación requerida. Tome nota de cualquier elemento informado como "requiere revisión" en lugar de un aprobado o fallo definitivo; estos suelen implicar fondos calculados que no pudieron resolverse y requieren verificación manual.
2. Análisis automatizado con Lighthouse: Abra Chrome DevTools, vaya a la pestaña Lighthouse y ejecute una auditoría de accesibilidad. Lighthouse utiliza axe-core internamente, por lo que mostrará las mismas infracciones de color-contrast-enhanced. El informe las agrupa bajo Accesibilidad y enlaza con cada elemento que falla. Tenga en cuenta que Lighthouse audita la página en su estado por defecto y no prueba estados interactivos como hover o focus.
3. Muestreo manual de color: Utilice el selector de color de las herramientas de desarrollo del navegador o una herramienta dedicada como Colour Contrast Analyser (TPGi) para muestrear manualmente los colores de primer plano y de fondo de los elementos de texto. Esto es especialmente importante para texto sobre imágenes, degradados o fondos semitransparentes. Muestree varios puntos a lo largo del texto donde el fondo varía y compruebe que la relación de contraste mínima en todos los puntos muestreados cumple 7:1 para texto normal o 4.5:1 para texto grande.
4. Pruebas de estados interactivos: Usando las DevTools del navegador, fuerce los elementos a sus estados hover, focus, active y visited (mediante el panel :hov en Chrome DevTools o equivalente). Vuelva a ejecutar la comprobación de contraste en cada estado para asegurarse de que los cambios de color aplicados mediante pseudoclases CSS no introducen fallos de contraste. Preste especial atención a los estados visited de los enlaces, los estados hover de los botones y los indicadores de foco de los campos de formulario.
5. Verificación con lector de pantalla (NVDA + Firefox): Aunque los lectores de pantalla no prueban directamente el contraste, verificar que el texto es accesible para NVDA confirma que se trata de texto real en el DOM (no una imagen de texto sin alternativa). Inicie Firefox, abra NVDA y navegue por la página usando el cursor de lectura. Cualquier texto que NVDA no pueda leer debe investigarse para determinar si se trata de una imagen de texto que requiere pruebas de contraste a nivel de imagen.
6. Verificación con lector de pantalla (VoiceOver + Safari en macOS): Active VoiceOver con Command+F5 y navegue por la página usando VO+Flecha derecha. Al igual que con NVDA, el texto que VoiceOver omite o lee incorrectamente puede indicar un renderizado de texto no estándar que requiere inspección manual del contraste.
7. Simulación en escala de grises: Active el modo de visualización en escala de grises mediante la configuración de accesibilidad del sistema operativo (disponible en Windows, macOS, iOS y Android). Esto elimina toda la información de color y hace que las diferencias de contraste sean inmediatamente visibles. El texto que se vuelve difícil de leer en modo de escala de grises casi con certeza no cumple el requisito de contraste mejorado.

Cómo corregir

Cuerpo de texto sobre fondo claro — Incorrecto

<!-- Fails 1.4.6: #767676 on #ffffff yields approximately 4.54:1,
     which passes AA (1.4.3) but falls far short of the 7:1 AAA requirement -->
<p style='color: #767676; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Cuerpo de texto sobre fondo claro — Correcto

<!-- Passes 1.4.6: #595959 on #ffffff yields approximately 7.0:1,
     meeting the enhanced contrast requirement for normal-weight body text -->
<p style='color: #595959; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Encabezado de color sobre fondo de marca — Incorrecto

<!-- Fails 1.4.6: brand blue #4A90D9 on white #ffffff yields approximately 3.0:1.
     Even though this is a heading and may appear large, bold headings at
     common web sizes (e.g. 20px bold) may not qualify as WCAG "large text"
     depending on rendering, and 3.0:1 fails even the large-text 4.5:1 threshold -->
<h2 style='color: #4A90D9; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Encabezado de color sobre fondo de marca — Correcto

<!-- Passes 1.4.6: dark navy #1A3A5C on white #ffffff yields approximately 12.6:1.
     Exceeds the 7:1 requirement for normal text and comfortably surpasses
     the 4.5:1 large-text requirement. Brand identity is preserved through
     the use of a darker shade within the same hue family. -->
<h2 style='color: #1A3A5C; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Texto sobre un fondo con degradado — Incorrecto

<!-- Fails 1.4.6: The gradient transitions from a dark color that provides
     adequate contrast on the left to a light color that provides insufficient
     contrast on the right. Text spanning the full width will fail at some point. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff;'>Create your account today and get started.</p>
</div>

Texto sobre un fondo con degradado — Correcto

<!-- Passes 1.4.6: A semi-transparent dark overlay behind the text ensures
     that foreground text maintains at least 7:1 contrast regardless of
     the underlying gradient value at any point beneath the text block. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff; background-color: rgba(0,0,0,0.75); padding: 8px 12px; display: inline-block;'>
    Create your account today and get started.
  </p>
</div>

Texto de marcador de posición en campo de formulario — Incorrecto

<!-- Fails 1.4.6: default browser placeholder styling is typically around
     #aaaaaa on white, yielding approximately 2.32:1. If placeholder text
     conveys meaningful information (e.g. format hints), it must meet contrast requirements. -->
<input type='text' placeholder='DD/MM/YYYY' style='background: #ffffff;'>

Texto de marcador de posición en campo de formulario — Correcto

<!-- Passes 1.4.6: Override the default placeholder color to achieve 7:1 contrast.
     Also adds a visible label as best practice, since placeholders disappear on input. -->
<label for='dob'>Date of Birth</label>
<input type='text' id='dob' placeholder='DD/MM/YYYY'
  style='background: #ffffff; color: #000000;'>
<style>
  input::placeholder {
    color: #595959; /* approximately 7.0:1 on white — meets AAA */
  }
</style>

Errores comunes

• Confiar únicamente en combinaciones de color que aprueban AA sin comprobar los umbrales AAA: Muchas personas diseñadoras usan el gris medio común #767676 sobre blanco, que aprueba 1.4.3 con aproximadamente 4.54:1 pero falla 1.4.6 por un margen significativo. Verifique siempre con respecto al objetivo 7:1, no solo 4.5:1.
• Suponer que las exenciones para texto grande se aplican demasiado ampliamente: La excepción para texto grande (4.5:1 en lugar de 7:1) se aplica solo al texto que tiene al menos 18pt (24px) en peso normal o al menos 14pt (18.67px) en negrita. El texto de 20px en peso normal no califica y aún debe cumplir 7:1.
• Ignorar el contraste en estados interactivos: Aplicar un color más claro al pasar el cursor para crear una affordance visual sin comprobar si el estado hover sigue cumpliendo 7:1. Por ejemplo, oscurecer el fondo de un botón al pasar el cursor mientras se mantiene el texto blanco puede seguir aprobando, pero aclarar el texto al pasar el cursor con frecuencia provoca fallos.
• Pasar por alto cadenas de propiedades personalizadas de CSS: Definir un color de texto como var(--color-primary) donde --color-primary se establece globalmente pero se sobrescribe localmente en el ámbito de un componente sin volver a verificar el contraste. El color renderizado efectivo puede diferir del valor del token global y producir una relación de contraste deficiente en contextos específicos de componentes.
• Tratar la exención del estado deshabilitado como una licencia de diseño: Usar la exención de interfaz inactiva como justificación para diseñar elementos deshabilitados con contraste 1:1 (texto invisible), lo que impide que las personas usuarias sepan siquiera que existe un campo. Los elementos deshabilitados deben seguir siendo visualmente perceptibles incluso si están exentos del requisito 7:1.
• No probar el texto renderizado sobre imágenes o vídeo: Colocar texto directamente sobre una imagen principal o un fondo de vídeo y comprobar el contraste solo frente al color promedio en lugar de la parte más clara de la imagen que recorre el texto. El contraste mínimo debe mantenerse en cada píxel bajo el texto, no en promedio.
• Aplicar correcciones de contraste solo a puntos de corte de escritorio: Diseños responsivos que usan colores de fondo diferentes en puntos de corte móviles — por ejemplo, cambiar de un fondo blanco en escritorio a un fondo de tarjeta beige claro — pueden introducir nuevos fallos de contraste en tamaños de pantalla más pequeños que no estaban presentes durante las pruebas en escritorio.
• Olvidar el contraste del texto en el indicador de foco: Cuando un anillo de foco personalizado o un estado de foco cambia tanto el fondo como el color del texto de un elemento enfocado, la nueva combinación texto-fondo en el estado enfocado debe cumplir de forma independiente la relación 7:1, independientemente de lo que logre el estado por defecto.
• Suponer que la exención del logotipo se extiende al texto descriptivo adyacente: Colocar un eslogan o una descripción de producto en el mismo bloque tipográfico que un logotipo de marca y reclamar la exención del logotipo para todo el bloque. La exención se aplica estrictamente al texto que es parte integral del propio logotipo, no a cualquier texto cercano.
• No validar el contraste después de sobrescrituras de frameworks CSS: Importar una biblioteca de componentes de terceros o un framework CSS que restablece o sobrescribe los colores de texto con valores por debajo de 7:1 y luego publicar esos valores por defecto sin auditoría. Los valores por defecto de los frameworks casi nunca están calibrados para estándares de contraste AAA.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad digital para una amplia gama de instituciones y organizaciones que operan en Turquía. La circular exige la conformidad con WCAG 2.2 en nivel AA como estándar base. Los tipos de entidades cubiertas incluyen instituciones y organismos públicos, plataformas de comercio electrónico, bancos y proveedores de servicios financieros, hospitales y organizaciones sanitarias, empresas de telecomunicaciones con 200,000 o más suscriptores, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE).

WCAG 1.4.6 Contraste (Mejorado) es un criterio de nivel AAA y, por lo tanto, no es un requisito obligatorio bajo la Circular Presidencial. Las organizaciones que solo logren el cumplimiento de nivel AA — la base legalmente exigida — no estarán infringiendo la circular por omitir el requisito de contraste mejorado de 7:1, siempre que cumplan el umbral AA de 4.5:1 para texto normal definido por el criterio 1.4.3.

Sin embargo, lograr la conformidad AAA en contraste representa un compromiso significativo con el diseño inclusivo que va mucho más allá del cumplimiento legal mínimo. Para las instituciones públicas, que tienen la obligación más amplia de servir a toda la ciudadanía independientemente de su situación de discapacidad, adoptar voluntariamente el estándar de contraste mejorado señala una dedicación genuina al acceso universal. Las organizaciones sanitarias y los hospitales — sectores en los que las personas pacientes pueden estar ya bajo estrés físico o cognitivo, o pueden estar interactuando con sistemas digitales en condiciones difíciles como una iluminación clínica intensa — tienen un argumento práctico especialmente sólido para superar el umbral mínimo de contraste. Del mismo modo, los bancos y proveedores de servicios financieros cuyos clientes incluyen cada vez más a personas mayores están en una posición especialmente buena para beneficiarse de la credibilidad y la confianza de las personas usuarias que comunica el cumplimiento de contraste AAA.

Las organizaciones que busquen la certificación ISO 30071-1, la alineación con la norma europea EN 301 549 o cualquier proceso internacional de contratación pública que evalúe la madurez en accesibilidad descubrirán que la conformidad de contraste de nivel AAA refuerza su posición. A medida que la aplicación de la accesibilidad digital madura a nivel global y específicamente en Turquía, los criterios que actualmente están en nivel AAA históricamente han migrado hacia un estatus obligatorio en sucesivas actualizaciones normativas. Adoptar el contraste mejorado ahora sitúa a las organizaciones por delante de los requisitos futuros probables y reduce el coste de la eventual corrección.

Para las organizaciones que utilizan el SDK de overlay de Accsible, las herramientas de ajuste de contraste de la plataforma pueden ayudar a las personas usuarias a aplicar modos de alto contraste a nivel de widget, proporcionando una capa compensatoria que ayuda a salvar la brecha entre los niveles de contraste del diseño publicado y las necesidades individuales de cada persona usuaria. Esto no sustituye el cumplimiento del criterio a nivel de código fuente, pero proporciona un apoyo significativo en tiempo de ejecución para las personas que requieren contraste mejorado y visitan sitios que aún no han alcanzado la conformidad AAA completa.