WCAG 1.4.3: Contraste (mínimo)

Qué significa esta regla

WCAG 1.4.3 — Contraste (Mínimo) es un criterio de éxito de Nivel AA bajo la Pauta 1.4 (Distinguible) de las Web Content Accessibility Guidelines 2.2. Exige que la presentación visual del texto y de las imágenes de texto mantenga una relación de contraste de luminancia suficiente con respecto a su fondo, de modo que las personas con baja visión moderada puedan leer el contenido sin depender de tecnología de apoyo que mejore el contraste.

Las relaciones de contraste requeridas son las siguientes. El texto normal — cualquier texto más pequeño de 18 puntos (aproximadamente 24 píxeles CSS) o 14 puntos en negrita (aproximadamente 18,67 píxeles CSS) — debe alcanzar una relación de contraste de al menos 4,5:1. El texto grande, definido como texto de 18 puntos o más en peso normal o 14 puntos o más en negrita, requiere una relación de contraste mínima de 3:1. Los mismos umbrales se aplican a las imágenes de texto: las imágenes rasterizadas o vectoriales que representen caracteres legibles también deben cumplir estas relaciones en relación con cualquier color de fondo adyacente.

La relación de contraste se calcula utilizando la fórmula de luminancia relativa definida en la especificación WCAG. La luminancia relativa (L) se calcula a partir de los valores de color sRGB después de la corrección gamma, y la relación se expresa como (L1 + 0,05) / (L2 + 0,05), donde L1 es el valor de luminancia más claro de los dos y L2 es el más oscuro. Una relación de 1:1 significa ausencia total de contraste (colores idénticos), mientras que 21:1 es el máximo, alcanzable solo con negro puro sobre blanco puro.

El criterio abarca todo el texto en primer plano renderizado por el navegador, incluido el texto dentro de botones, enlaces, etiquetas, campos de formulario, celdas de tabla, tooltips, texto de marcador de posición dentro de inputs y texto superpuesto sobre imágenes o degradados. También abarca elementos de texto SVG y texto renderizado mediante contenido generado por CSS (pseudo-elementos ::before y ::after).

WCAG 1.4.3 define varias excepciones oficiales que quedan explícitamente excluidas del requisito:

• Texto incidental: El texto o las imágenes de texto que son puramente decorativos, no son visibles o forman parte de un componente de interfaz de usuario inactivo (deshabilitado) están exentos. Por ejemplo, la etiqueta atenuada de un campo de formulario deshabilitado no necesita cumplir la relación.
• Logotipos: El texto que forma parte de un logotipo o nombre de marca no tiene un requisito mínimo de contraste, porque la identidad de marca suele depender de elecciones de color específicas y se espera que las personas reconozcan los logotipos visualmente.
• Texto grande: Como se indicó anteriormente, el texto grande tiene una relación relajada de 3:1 en lugar de 4,5:1, reconociendo que las formas de letra más grandes son más fáciles de distinguir con menor contraste.

Se considera un aprobado cuando la relación de contraste calculada es igual o superior al umbral aplicable para cada fragmento de texto visible y no exento. Se considera un fallo cuando cualquier texto visible y no exento, o imagen de texto, queda por debajo del umbral, incluso por una fracción de punto de relación.

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. Un subconjunto significativo de estas personas — incluidas aquellas con baja visión debida a cataratas, glaucoma, degeneración macular y retinopatía diabética — todavía puede leer texto en pantalla cuando el contraste es suficiente, pero tiene dificultades o no puede leer en absoluto cuando el contraste es deficiente. Contraste (Mínimo) aborda directamente las necesidades de esta población al establecer un umbral mínimo medible y comprobable por debajo del cual el texto se vuelve inaccesible.

Más allá de la baja visión diagnosticada, se estima que el 8% de los hombres y el 0,5% de las mujeres de ascendencia nórdica europea experimentan algún tipo de deficiencia en la visión del color (daltonismo). Aunque el daltonismo es distinto del bajo contraste, muchas formas de daltonismo reducen la diferencia de luminancia percibida entre ciertos tonos, lo que hace que un contraste inadecuado sea aún más problemático. Una etiqueta roja sobre un fondo verde puede parecer casi un gris uniforme para alguien con deuteranopia, haciendo que el texto sea invisible si el contraste de luminancia subyacente es insuficiente.

Las personas mayores se ven afectadas de forma desproporcionada. El ojo envejecido pierde sensibilidad al contraste y el tamaño de la pupila disminuye, reduciendo la cantidad de luz que llega a la retina. Una persona de setenta años puede necesitar un contraste de luminancia significativamente mayor para lograr la misma legibilidad que una persona de treinta, incluso sin un diagnóstico clínico de baja visión.

Considere un escenario concreto del mundo real: un sitio web de comercio electrónico turco utiliza texto gris claro (#999999) sobre un fondo blanco (#FFFFFF) para descripciones de productos e información de precios, una tendencia de diseño común favorecida por su estética minimalista. La relación de contraste de esta combinación es de aproximadamente 2,85:1, muy por debajo del umbral de 4,5:1. Una persona con degeneración macular en etapa temprana puede ser completamente incapaz de leer el precio de un producto, lo que la obliga a abandonar la compra. Esto no solo excluye a una persona de una transacción comercial fundamental, sino que también representa una pérdida directa de ingresos para el comerciante y una exposición legal en jurisdicciones que exigen el cumplimiento de la accesibilidad.

Desde el punto de vista de la usabilidad y el SEO, el texto de alto contraste beneficia a todas las personas en entornos desafiantes: luz solar intensa en una pantalla móvil, paneles de visualización de baja calidad o simplemente una persona que no ha calibrado su monitor. Las elecciones de color accesibles reducen la fatiga visual de las personas videntes durante sesiones de lectura prolongadas, y las mejoras en la legibilidad se correlacionan con menores tasas de rebote y mayor tiempo en página, señales que los motores de búsqueda utilizan como indicadores de calidad.

Reglas relacionadas de Axe-core

• color-contrast: Esta es la regla automatizada principal que aplica WCAG 1.4.3 en Nivel AA. El motor axe-core calcula los colores de primer plano y de fondo de cada nodo de texto en el DOM, resolviendo la cascada de CSS, la opacidad, el apilamiento de z-index y la transparencia alfa. Señala cualquier elemento de texto cuya relación de contraste esté por debajo de 4,5:1 para texto normal o 3:1 para texto grande. La regla informa de la relación real encontrada, la relación requerida y el elemento específico que falló, lo que hace que la corrección sea sencilla. Sin embargo, axe-core solo puede analizar los colores que puede determinar a partir de los estilos calculados; el texto renderizado dentro de <canvas>, sobre degradados CSS complejos o sobre imágenes de fondo puede no ser completamente resoluble sin contexto adicional, y axe marcará esos casos como "needs review" en lugar de un aprobado o fallo definitivo. El texto de marcador de posición en inputs de formulario también se comprueba con esta regla.
• color-contrast-enhanced: Esta regla aplica los umbrales más estrictos de WCAG 1.4.6 — Contraste (Mejorado) de 7:1 para texto normal y 4,5:1 para texto grande (Nivel AAA). Aunque 1.4.6 no es obligatorio para la conformidad AA, ejecutar esta regla durante el desarrollo es valioso para equipos que aspiran a una accesibilidad mejorada o se preparan para entornos normativos que puedan adoptar requisitos AAA. Axe-core informa de las infracciones de esta regla por separado para que los equipos puedan priorizar los fallos AA (color-contrast) frente a las mejoras AAA aspiracionales (color-contrast-enhanced).

Se requiere prueba manual en varios escenarios que las herramientas automatizadas no pueden resolver completamente. Cuando el texto se superpone a una imagen de fondo o un degradado CSS, el color de fondo efectivo varía a lo largo del cuadro delimitador del texto. Las herramientas automatizadas deben muestrear el color dominante, asumir la región de peor caso o remitir a una revisión manual. De manera similar, el texto dentro de elementos <canvas> se renderiza como píxeles sin información semántica de color disponible para el árbol de accesibilidad, por lo que la inspección manual con una herramienta cuentagotas es el único enfoque fiable. El texto que aparece solo en estados :hover o :focus también puede requerir interacción manual para activarse antes de que las herramientas automatizadas puedan evaluarlo.

Cómo probar

1. Análisis automatizado con axe DevTools: Instale la extensión de navegador axe DevTools (disponible para Chrome, Firefox y Edge). Navegue a la página que se va a probar, abra el panel de la extensión y ejecute un análisis de página completa. En el panel de resultados, filtre por los IDs de regla color-contrast y color-contrast-enhanced. Para cada infracción, la herramienta resalta el elemento que falla, informa de la relación de contraste real (por ejemplo, "2,85:1"), la relación requerida (por ejemplo, "4,5:1") y los colores de primer plano y de fondo calculados en hex. Exporte los resultados como CSV o JSON para su seguimiento. Repita en todos los breakpoints, porque los diseños responsivos pueden cambiar los tamaños de fuente (afectando al umbral de texto grande) o intercambiar esquemas de color.
2. Auditoría con Lighthouse: Abra Chrome DevTools, vaya a la pestaña Lighthouse, seleccione "Accessibility" y ejecute la auditoría. Lighthouse muestra las infracciones de contraste de color en su sección de Accesibilidad con referencias a los elementos. Tenga en cuenta que Lighthouse utiliza una versión más antigua de axe-core en algunos entornos; usar directamente axe DevTools puede detectar más problemas.
3. Medición manual del contraste: Utilice el selector de color integrado en las DevTools del navegador o una herramienta dedicada como el WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) o la aplicación de escritorio TPGi Colour Contrast Analyser. Seleccione los colores de primer plano y de fondo con el cuentagotas y verifique que la relación informada cumpla el umbral. Para texto sobre degradados o imágenes, tome muestras en varios puntos del área de texto y utilice la medición de menor contraste como valor definitivo.
4. Pruebas de estados interactivos: Active manualmente los estados :hover, :focus, :active y :visited en enlaces y elementos interactivos, y luego mida el contraste para cada estado por separado. Algunos diseños utilizan colores de hover con menor contraste que fallan inadvertidamente. Utilice la función "Force element state" de las DevTools del navegador para mantener un estado mientras mide.
5. Revisión con lector de pantalla y teclado (contextual): Aunque el contraste es un criterio visual y no es detectable directamente por los lectores de pantalla, probar con NVDA + Firefox, VoiceOver + Safari o JAWS + Chrome confirma que el texto está presente en el árbol de accesibilidad y no está oculto mediante técnicas CSS (como color: transparent) que lo harían visualmente inaccesible. Si un lector de pantalla anuncia texto que parece invisible en pantalla, investigue si la representación visual cumple los requisitos de contraste para las personas videntes.
6. Zoom y escalado de fuente: Aumente el tamaño de fuente predeterminado del navegador (Configuración → Apariencia → Tamaño de fuente) y el zoom al 200%. Verifique que el texto que pasa de "normal" a "grande" con estos tamaños siga cumpliendo el umbral correspondiente. Una fuente que es de 14px con el zoom predeterminado puede convertirse en 28px al 200% de zoom, cambiando el umbral que se aplica.

Cómo corregir

Texto de cuerpo con contraste insuficiente — Incorrecto

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Texto de cuerpo con contraste insuficiente — Correcto

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Botón de llamada a la acción con bajo contraste — Incorrecto

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Botón de llamada a la acción con bajo contraste — Correcto

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

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

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

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

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Texto sobre una imagen de fondo o degradado — Incorrecto

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Texto sobre una imagen de fondo o degradado — Correcto

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Errores comunes

• Suponer que un color se ve bien en su monitor calibrado: Las pantallas de alta gama con amplias gamas de color y alto brillo pueden hacer que combinaciones de bajo contraste parezcan legibles para diseñadores con visión normal en un entorno controlado, mientras que el mismo texto es ilegible en la pantalla de un portátil económico o bajo iluminación fluorescente de oficina. Verifique siempre con una herramienta de relación de contraste, no solo con el juicio visual.
• Olvidar probar los estados interactivos por separado: Un enlace puede cumplir 4,5:1 en su estado predeterminado pero bajar a 2,8:1 en :hover cuando el color se aclara. Cada estado interactivo debe cumplir de forma independiente el umbral.
• Tratar los campos de formulario deshabilitados como universalmente exentos: La exención se aplica solo a los componentes de IU inactivos. Si un campo está visualmente estilizado como deshabilitado pero sigue programáticamente habilitado (le falta el atributo disabled), no está exento y debe cumplir los requisitos de contraste.
• Usar opacidad para atenuar texto sin tener en cuenta el color efectivo: Establecer opacity: 0.5 en texto oscuro lo mezcla efectivamente con el fondo, produciendo un color compuesto más claro. La relación de contraste debe calcularse con el color compuesto resultante, no con el valor CSS original. Por ejemplo, #000000 al 50% de opacidad sobre blanco se representa aproximadamente como #808080, que tiene una relación de contraste de aproximadamente 3,9:1, por debajo del umbral de 4,5:1 para texto normal.
• Pasar por alto el texto dentro de elementos SVG: Los elementos SVG <text> estilizados con fill en lugar de CSS color siguen estando sujetos a 1.4.3. Las herramientas automatizadas pueden omitirlos dependiendo de cómo se incruste el SVG (inline frente a <img> frente a <object>). El SVG inline es el enfoque más fiable para las pruebas.
• Identificar mal el tamaño de texto para la exención de texto grande: Los umbrales de 18pt / 14pt en negrita se refieren al tamaño renderizado en el navegador de la persona, no al valor en píxeles CSS en el código fuente. CSS font-size: 24px equivale exactamente a 18pt (ya que 1pt = 1,333px), pero si la persona ha configurado un tamaño de fuente predeterminado mayor, un elemento de 16px puede renderizarse más grande que 18pt. Pruebe con los tamaños de fuente predeterminados del navegador y revise cuidadosamente sus cálculos de tamaño.
• Confiar únicamente en el color para distinguir el texto enlazado del texto de cuerpo: Si un enlace se estiliza sin subrayado y utiliza solo el color para diferenciarse del texto circundante, el color del enlace debe alcanzar 3:1 frente al color del texto de cuerpo además de 4,5:1 frente al fondo de la página. Muchos diseños fallan uno o ambos requisitos. Añadir subrayados (u otro indicador visual que no sea el color) es el enfoque más seguro.
• Ignorar el texto dentro de widgets de terceros y plugins de chat: Los widgets incrustados — ventanas de chat en vivo, banners de consentimiento de cookies, carruseles de reseñas, feeds de redes sociales — forman parte de la página y están dentro del alcance del cumplimiento de WCAG 1.4.3. El texto de bajo contraste dentro de un widget de terceros es un fallo incluso si su propio código es totalmente conforme.
• No volver a probar después de activar el modo oscuro o el modo de alto contraste: Un esquema de color que cumple en modo claro puede fallar en modo oscuro si las propiedades personalizadas de CSS no se gestionan cuidadosamente. De manera similar, el Modo de Alto Contraste de Windows anula muchas declaraciones de color CSS; verifique que el texto siga siendo legible y que ningún CSS personalizado reintroduzca inadvertidamente pares de bajo contraste en entornos de colores forzados.
• Usar CSS background-clip: text o técnicas de texto degradado sin un fallback: El texto relleno con degradado creado mediante -webkit-background-clip: text; color: transparent presenta un desafío de contraste complejo porque el color del texto varía a lo largo del glifo. Las herramientas automatizadas normalmente no pueden resolver esto, y la luminancia real de cada parte de la forma de la letra debe verificarse manualmente frente al fondo de la página.

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

La Circular Presidencial n.º 2025/10 de Turquía, publicada en el Boletín Oficial (Resmî Gazete) n.º 32933 el 21 de junio de 2025, establece un marco nacional vinculante para la accesibilidad digital. La Circular exige la conformidad con normas de accesibilidad web reconocidas internacionalmente — alineando de hecho los requisitos normativos turcos con WCAG 2.2 — e introduce el Erişilebilirlik Logosu (Logotipo de Accesibilidad), emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı), como marca oficial de certificación para productos y servicios digitales conformes.

WCAG 1.4.3 — Contraste (Mínimo) es un criterio de éxito de Nivel AA, y la conformidad de Nivel AA es la base necesaria para optar al Logotipo de Accesibilidad. Esto significa que cualquier entidad que busque el logotipo debe garantizar que todo el texto visible y no exento, así como las imágenes de texto en sus sitios web y aplicaciones, cumplan los umbrales de contraste de 4,5:1 (texto normal) y 3:1 (texto grande) definidos por este criterio. El incumplimiento de 1.4.3 es una de las infracciones automatizadas más detectadas y constituiría un obstáculo directo para la certificación.

La Circular se aplica a una amplia gama de entidades del sector público y privado. Las entidades cubiertas incluyen instituciones y organismos públicos a nivel de gobierno central y local; bancos e instituciones financieras regulados por la Agencia de Regulación y Supervisión Bancaria (BDDK); hospitales y proveedores de atención sanitaria, tanto públicos como privados; operadores de telecomunicaciones con 200.000 o más abonados; plataformas de comercio electrónico que cumplan los umbrales aplicables de ingresos o volumen de transacciones; agencias de viajes; empresas de transporte privado; y escuelas privadas e instituciones educativas autorizadas por el Ministerio de Educación Nacional (MEB).

Para estas entidades, abordar el cumplimiento del contraste no es simplemente una recomendación de buenas prácticas: tiene peso normativo. Las organizaciones que no cumplan se arriesgan a un escrutinio administrativo y a consecuencias reputacionales, mientras que las organizaciones conformes pueden mostrar el Erişilebilirlik Logosu como una señal de confianza para las aproximadamente 8,5 millones de personas con discapacidad en Turquía, así como para las personas mayores, las personas usuarias de dispositivos móviles y el público en general que se benefician de un diseño legible y de alto contraste.

Las organizaciones que operan en Turquía y que aún no han realizado una auditoría de WCAG 1.4.3 deberían priorizar el análisis automatizado de todos los puntos de contacto digitales de cara al público — web, web móvil y aplicaciones nativas cuando corresponda — seguido de una revisión manual de fondos con degradados, superposiciones de imágenes y componentes incrustados de terceros. Establecer un sistema de design tokens con pares de colores preaprobados y verificados en contraste es la solución más escalable a largo plazo, garantizando que los nuevos componentes de la interfaz de usuario hereden combinaciones de colores accesibles por defecto y que futuros rediseños no introduzcan inadvertidamente fallos de contraste.