Español
Menú del sitio

contrast-minimum

El texto cumple el contraste de color mínimo (AA)

automaticWCAG 1.4.3 (AA)confianza: highgravedad: seriousperceivable

Comprueba que el texto visible tenga una proporción de contraste de al menos 4.5:1 (normal) o 3:1 (grande), cuando el contraste es calculable a partir de CSS.

Ámbito de aplicación. Se aplica al texto visible al que se aplica contrast-computable (véase esa regla para las condiciones de elegibilidad), acotado al texto cuyo fondo y primer plano son calculables. El texto elegible que no es calculable deja esta regla en notApplicable en lugar de cantTell: informar de esa incertidumbre corresponde a contrast-computable, de modo que las dos nunca informan del mismo texto dos veces.

Resultado esperado. Cada nodo de texto calculable alcanza la proporción que exige el SC 1.4.3 para su tamaño: 3:1 para texto grande, 4.5:1 para el resto. El texto es grande a partir de 24px, o a partir de 14pt (unos 18.667px) cuando el peso de fuente calculado es 700 o superior. El texto dibujado por un -webkit-text-stroke o un text-shadow se deja a contrast-computable, salvo cuando todos los colores con los que se dibuja, incluido su relleno salvo que este no dibuje nada (transparente, o del color de su fondo), están por debajo de la proporción frente a un fondo plano: entonces ninguna lectura de él puede cumplir el criterio, y falla, medido por el mejor de esos colores (drawnBy: textStroke o textShadow). Margen (contrast-ratio): de entre el texto que alcanza su proporción, el elemento más cercano a ella, con la proporción sin redondear frente a la que exige su tamaño; context.largeText indica cuál. Solo cuenta como cercano el texto que está a menos de un 10 % de su proporción, así que el texto que la supera en más no da margen. measuredCount cuenta los elementos cuyo contraste se calculó. El texto del que un ::first-line o un ::first-letter pinta una parte en un color propio se mide en ambos colores: donde ambos alcanzan su proporción, pasa; donde ambos se quedan cortos, falla (pseudoElementColor nombra el pseudoelemento), y donde discrepan se deja a contrast-computable. contrast-computable decide por qué preguntar con las proporciones de WCAG. Con proporciones propias de esta regla (la configuración de una variante), el texto en dos colores que solo discrepan en esas proporciones, y el texto dibujado por un contorno o una sombra cuyo mejor color las alcanza pero no alcanza la proporción AA de WCAG, se preguntan aquí (PSEUDO_ELEMENT_COLOR, TEXT_STROKE, TEXT_SHADOW), ya que ninguna otra regla lo haría. El texto dibujado por un contorno cuyo mejor color está entre la proporción AA de WCAG y una proporción más alta de la variante falla aquí y además se pregunta por él en contrast-computable: dos respuestas a dos requisitos, el de la variante y el SC 1.4.3 de WCAG. El placeholder de un campo por debajo de su proporción (PLACEHOLDER_BELOW_THRESHOLD) falla cuando la página eligió sus colores: el color, la opacidad o el fondo del placeholder, o el fondo del campo, difieren de los propios del navegador, leídos en un marco en blanco. Se considera que un placeholder que se deja con los colores propios del navegador cumple la proporción (WCAG G148), y cuando no se puede saber, es una ocurrencia cantTell. El texto sin ningún fondo opaco detrás, hasta la raíz, se mide sobre el lienzo que el navegador pinta bajo la página, en cualquiera de los dos modos de contraste: el color Canvas del esquema de color con el que se dibuja la página, que decide el propio color-scheme de la página (en la raíz, o en <meta name="color-scheme">), tal como lo define CSS Color Adjustment 1. Una página que no declara ningún esquema se dibuja en claro, sobre blanco, prefiera lo que prefiera el usuario; una que declara solo oscuro, sobre el lienzo oscuro. En un navegador los colores se leen de la página; un emulador (jsdom), que no resuelve ningún color del sistema, toma los de Chromium (#121212 para el lienzo oscuro, #ffffff para el texto que da un esquema oscuro). Un lienzo que indica el análisis, cuando contrast.rootCanvasFallback da uno, se mide en su lugar. Donde no se puede conocer el lienzo (en un marco, donde puede transparentarse la página que lo rodea; con colores forzados, donde es la paleta del usuario), el texto se deja a contrast-computable, o se mide sobre el valor de reserva con el modo auditorAssist. Una página que admite ambos esquemas (light dark) se dibuja en el que prefiere el usuario. El análisis ve ese (en un navegador, tal como se dibuja; jsdom dibuja en claro), y su texto se mide ahí y, cuando sus colores no pueden cambiar con el esquema, también en el otro, sobre el lienzo de ese esquema: no cuando una regla en una consulta prefers-color-scheme, un valor light-dark() o un color del sistema (distinto de los colores de texto y de enlace propios del esquema, cuando ninguna regla colorea el texto) llega al color del texto o a un fondo detrás de él. Falla donde falla en cualquiera de los esquemas medidos, y pasa donde pasa en cada uno.

Qué informa un hallazgo.

  • metrics.ratio (texto por debajo del umbral): la relación de contraste del texto con su fondo (4.5 para 4.5:1), frente a metrics.threshold, la relación que exige su tamaño.
  • colors.foregroundHex, colors.backgroundHex (texto por debajo del umbral): el color del texto (el -webkit-text-fill-color con el que se pinta; color si no está definido) y el color de fondo que hay detrás, en hexadecimal, después de mezclar cualquier transparencia. colors.foregroundRgba y colors.backgroundRgba dan los mismos dos colores en forma rgba().
  • selectField (un select desplegable con el fondo propio del navegador): backgroundHex, su fondo calculado, y fieldHex, el color Field con el que lo pinta Chromium. El texto se mide frente a ambos y se informa de la proporción más baja.
  • typography.fontSizePx, typography.fontSizePt (texto por debajo del umbral): el tamaño de fuente tal como se dibuja, en píxeles CSS y en puntos: el tamaño calculado multiplicado por el zoom de CSS o, en texto SVG, por la escala de su viewBox y su transform, y por lo que escala la fuente font-size-adjust (su valor de ajuste dividido por la proporción propia de la fuente, leída en un navegador). Es el tamaño con el que se juzga el umbral de texto grande, como el "size when the content is delivered" de WCAG.
  • typography.declaredFontSizePx, typography.sizeScaledBy (texto por debajo del umbral, dibujado con otro tamaño): el font-size calculado, y lo que hizo que se dibujara con otro (zoom, svg, font-size-adjust). Cuando eso sitúa el texto al otro lado del límite de texto grande, la sugerencia lo indica (contrast_hint_drawnSize).
  • typography.fontWeight, typography.fontWeightLabel (texto por debajo del umbral): el peso de fuente calculado como número (400, 700) y tal como está escrito.
  • typography.isBold, typography.isLargeText (texto por debajo del umbral): si el texto cuenta como negrita, y como texto grande, el tamaño que solo necesita 3:1.
  • Los campos de proporción, umbral y tipografía anteriores son un contrato estable, a diferencia del resto de data.details.
  • assumptionsApplied, assumedRootCanvasColor (texto por debajo del umbral): null salvo que la página no establezca ningún fondo opaco y el texto se midiera sobre un color de lienzo que indica el análisis (contrast.rootCanvasFallback) o, con el modo auditorAssist donde no se puede conocer el lienzo propio de la página (en un marco, con colores forzados), sobre el valor de reserva (blanco por defecto). En ese caso assumptionsApplied es ['ROOT_CANVAS_FALLBACK'] y assumedRootCanvasColor es ese color.
  • colorScheme (texto por debajo del umbral, sobre el lienzo de una página que admite claro y oscuro): 'light' o 'dark', el esquema en el que se queda corto, cuando pasa en el otro, y la sugerencia lo nombra; la proporción y los colores son los de ese esquema. Ausente cuando se queda corto en todos los esquemas medidos (entonces se informa en el esquema con el que se dibuja la página) y en una página con un solo esquema.
  • colorSchemesChecked (texto por debajo del umbral, y el pass): los esquemas en los que se midió el texto sobre el lienzo, ['light'] o ['dark'], cuando la página admite ambos y uno no se pudo medir. Un binding puede volver a analizar con el navegador en el otro esquema. Ausente cuando se midieron todos los esquemas que admite la página.
  • generatedBy (texto generado por debajo del umbral): ::before, ::after o ::marker, el pseudoelemento cuyo texto se mide; el selector nombra su elemento, y los colores y la fuente son los del pseudoelemento.
  • eligibleTextCount, computableTextCount (el pass, y el propio data.details del resultado cuando es notApplicable porque ningún texto era calculable, que no enumera ninguna ocurrencia): cuántos nodos de texto examinó la regla, y cuántos de ellos tenían colores que pudo calcular. Se repiten en metrics en un pass.
  • forcedColors (cada ocurrencia, y los detalles de ese resultado notApplicable, cuando los colores medidos eran forzados): true, y la sugerencia (hint) indica que se vuelva a comprobar la página con los colores forzados desactivados. Un análisis con colores forzados mide los colores propios de la página, así que esto solo aparece donde no pudo mantener la página en ellos.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Margen. Esta regla mide contrast-ratio como proporción, y el valor debe alcanzar el umbral. Cuando un resultado correcto quedó cerca del umbral, el campo margin del resultado indica el elemento que más se acercó sin dejar de cumplirlo, así que un resultado que un cambio pequeño haría cambiar se ve antes de que cambie. A diferencia de los campos de un hallazgo, es un contrato estable. Consulta Esquema de salida.

Ejemplos

pass
<p style="background:#ffffff; color:#767676;">Body text</p>

Aproximadamente 4.6:1, por encima del mínimo AA de 4.5:1 para texto normal.

fail
<div style="background:#ffffff;">
  <div style="opacity:0.5; background:#ffffff;">
    <p style="color:#000000;">Body text</p>
  </div>
</div>

Una opacidad del 50% de un ancestro (grupo) sobre blanco se compone en un gris plano de alrededor de 4:1, por debajo del mínimo AA.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

CONTRAST_SWITCH_OFFERED

  1. Localizar el conmutador de contraste que indica el informe y comprobar que es fácil de encontrar, cerca de la parte superior de la página o en todas las páginas, y que se puede alcanzar con el teclado.
  2. Activar el conmutador.
  3. Localizar el texto que indica el informe y medirlo frente a su fondo con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, comparándolo con 4.5:1 (3:1 para texto grande: al menos 24px, o 18.66px y en negrita).
  4. Ir a otra página y comprobar que la configuración se mantiene.

Se cumple. El conmutador es fácil de encontrar y de usar, y con él activado el texto alcanza su relación (G174).

No se cumple. El conmutador es difícil de encontrar o no eleva este texto hasta su relación, así que el texto incumple WCAG 1.4.3.

ENGINE_EXCEPTION

  1. Localizar el texto que indica el informe (la comprobación se detuvo antes de tiempo, así que no se midió nada).
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color del texto frente al fondo situado justo detrás de las letras.
  3. Anotar el tamaño y el grosor del texto y comparar la relación con 4.5:1 (3:1 para texto grande: al menos 24px, o 18.66px y en negrita).

Se cumple. La relación alcanza el umbral correspondiente a su tamaño.

No se cumple. La relación es inferior al umbral correspondiente a su tamaño, lo que incumple WCAG 1.4.3.

LOGO_TEXT_BELOW_THRESHOLD

  1. Localizar el texto que indica el informe (a menudo en la cabecera del sitio o en su enlace a la página de inicio).
  2. Decidir si forma parte de un logotipo o nombre de marca, como el nombre del sitio en su tratamiento de logotipo, y no de un eslogan, un elemento de menú u otro texto.
  3. Si no es texto de logotipo, medirlo frente a su fondo con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, y compararlo con 4.5:1 (3:1 para texto grande: al menos 24px, o 18.66px y en negrita).

Se cumple. El texto forma parte de un logotipo o nombre de marca, que no tiene requisito de contraste, o alcanza su relación.

No se cumple. El texto no forma parte de un logotipo ni de un nombre de marca y está por debajo de su relación, lo que incumple WCAG 1.4.3.

PLACEHOLDER_BELOW_THRESHOLD

  1. Localizar el campo que indica el informe y vaciarlo para que se muestre el texto provisional.
  2. En el panel Styles, comprobar si el CSS de la página define el color o la opacidad de ::placeholder, o el fondo del campo.
  3. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el texto provisional frente al fondo del campo y compararlo con 4.5:1 (3:1 para texto grande: al menos 24px, o 18.66px y en negrita).
  4. Comprobar si el texto provisional contiene información necesaria para rellenar el campo (un formato o una instrucción), y no solo un ejemplo.

Se cumple. El texto provisional alcanza 4.5:1 (o 3:1 si es grande), o se dibuja enteramente con los colores predeterminados del propio navegador.

No se cumple. La página define los colores del texto provisional o del campo y la relación es inferior al umbral, lo que incumple WCAG 1.4.3.

PSEUDO_ELEMENT_COLOR

  1. Localizar el texto que indica el informe y anotar el color de ::first-line o ::first-letter en el panel Styles.
  2. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir frente al fondo tanto el color del texto del elemento como el color de la primera línea o de la primera letra.
  3. Cambiar el tamaño de la ventana para ver a qué palabras se aplica el color de la primera línea con anchos distintos.
  4. Comparar cada relación con la que el informe indica como necesaria para ese color: 4.5:1 para la mayoría del texto, o 3:1 para texto grande (al menos 24px, o 18.66px y en negrita).

Se cumple. Ambos colores alcanzan la relación que necesitan.

No se cumple. Alguno de los colores da una relación inferior a la que necesita, por lo que el texto no supera la comprobación.

SEMIBOLD_BELOW_THRESHOLD

  1. Localizar el texto seminegrita que indica el informe.
  2. Compararlo junto a un texto en negrita (grosor 700) del mismo tamaño y fuente en la página o en las herramientas para desarrolladores, alternando font-weight.
  3. Decidir si se percibe como negrita; si es así, cuenta como texto grande y necesita 3:1; si no, 4.5:1.

Se cumple. El texto se percibe como negrita, así que es texto grande y su relación cumple 3:1.

No se cumple. El texto no se percibe como negrita, así que es texto normal por debajo de 4.5:1, lo que incumple WCAG 1.4.3.

SYMBOLIC_CHARACTER_BELOW_THRESHOLD

  1. Localizar el carácter que indica el informe (como ×, ☰, › o un glifo de una fuente de iconos).
  2. Decidir si es texto que se lee (parte de palabras, un número) o un icono que sustituye a una acción, como un símbolo de cerrar o de menú.
  3. Si es texto, medirlo frente a su fondo con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, y compararlo con 4.5:1 (3:1 para texto grande: al menos 24px, o 18.66px y en negrita).
  4. Si es un icono, comprobar primero si un texto visible junto a él dice lo mismo, como la palabra «Cerrar» al lado de un símbolo de cerrar. Si es así, el icono no es la única forma de entenderlo y no necesita la relación 3:1.
  5. Si no, medir el icono contra su fondo y comparar con 3:1, la relación de los objetos gráficos.

Se cumple. Es texto y alcanza su relación, o es un icono que alcanza 3:1 o cuyo significado también da un texto visible junto a él.

No se cumple. Es texto por debajo de 4.5:1, lo que incumple WCAG 1.4.3; o un icono por debajo de 3:1 que es la única forma visible de saber qué significa o qué hace, lo que incumple WCAG 1.4.11.

TEXT_SHADOW

  1. Localizar el texto que indica el informe y anotar su text-shadow.
  2. Ampliar y comprobar si la sombra forma un contorno o halo sólido alrededor de cada letra.
  3. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir el color que forma las letras frente al fondo.
  4. Comparar la relación con la que el informe indica como necesaria: 4.5:1 para la mayoría del texto, o 3:1 para texto grande (al menos 24px, o 18.66px y en negrita).

Se cumple. El color que forma las letras alcanza la relación necesaria.

No se cumple. El color que forma las letras da una relación inferior a la necesaria, por lo que el texto no supera la comprobación.

TEXT_STROKE

  1. Localizar el texto que indica el informe y anotar el ancho y el color de su -webkit-text-stroke.
  2. Ampliar para ver qué color forma la mayor parte de cada letra (un trazo fino cuenta menos que el relleno).
  3. Con el selector de color de las herramientas para desarrolladores del navegador, o con una calculadora de contraste y colores tomados con un cuentagotas, medir ese color frente al fondo.
  4. Comparar la relación con la que el informe indica como necesaria: 4.5:1 para la mayoría del texto, o 3:1 para texto grande (al menos 24px, o 18.66px y en negrita).

Se cumple. El color que forma las letras alcanza la relación necesaria.

No se cumple. El color que forma las letras da una relación inferior a la necesaria, por lo que el texto no supera la comprobación.

Ver código fuente