contrast-enhanced
El texto cumple el contraste de color mejorado (AAA)
Comprueba que el texto visible tenga una proporción de contraste de al menos 7:1 (normal) o 4.5: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.6 para su tamaño: 4.5:1 para texto grande, 7: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. 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 el esquema de color con el que se dibuja la página y, en una página que admite claro y oscuro, también en el otro cuando sus colores no pueden cambiar con el esquema, como describe contrast-minimum. El texto de tamaño normal cuyo fondo no se puede determinar falla igualmente cuando su color no puede alcanzar 7:1 sobre ningún fondo (CONTRAST_UNREACHABLE_ANY_BACKGROUND, metrics.bestRatio: su proporción frente al blanco o al negro, la que sea mayor). 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.
Qué informa un hallazgo.
metrics.ratio(unfail): la relación de contraste del texto, por ejemplo 4.5 para 4.5:1, sin redondear, frente ametrics.threshold(7, o 4.5 para texto grande).colors.foregroundHex,colors.backgroundHex(unfail): los colores del texto y del fondo a partir de los que se calculó la relación, en hexadecimal (el del texto en el -webkit-text-fill-color con el que se pinta;colorsi no está definido). Un color de texto semitransparente se mezcla primero con el fondo.selectField(un select desplegable con el fondo propio del navegador):backgroundHex, su fondo calculado, yfieldHex, 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.colors.foregroundRgba,colors.backgroundRgba(unfail): los mismos colores como cadenasrgba().typography.fontSizePx,typography.fontSizePt(unfail): el tamaño de fuente tal como se dibuja (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), en píxeles CSS y en puntos.typography.declaredFontSizePx,typography.sizeScaledBy(unfaildibujado 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,typography.isBold(unfail): el peso de fuente calculado como número,bold(700 o más) onormal, y si cuenta como negrita.typography.isLargeText(unfail): si el texto cuenta como grande, lo que fija el umbral.- Los campos de proporción, umbral y tipografía anteriores son un contrato estable, a diferencia del resto de
data.details. assumptionsApplied,assumedRootCanvasColor(unfail):nullsalvo que el fondo de la página nunca llegara a ser opaco y se supusiera que se asienta sobre un color de lienzo: uno que indica el análisis (contrast.rootCanvasFallback) o, con el modoauditorAssistdonde no se puede conocer el lienzo propio de la página (en un marco, con colores forzados), el valor de reserva. En ese casoassumptionsAppliedes["ROOT_CANVAS_FALLBACK"]yassumedRootCanvasColores ese color. El texto sobre el lienzo que le da el esquema de color de la página se mide sobre ese lienzo, sin ninguno de los dos.colorScheme(unfailsobre el lienzo de una página que admite claro y oscuro):'light'o'dark', el esquema en el que el texto se queda corto, cuando pasa en el otro; ausente cuando se queda corto en todos los esquemas medidos.colorSchemesChecked(unfail, y elpass): los esquemas en los que se midió el texto sobre el lienzo, cuando la página admite ambos y uno no se pudo medir.generatedBy(unfailen texto generado):::before,::aftero::marker, el pseudoelemento cuyo texto se mide; el selector nombra su elemento, y los colores y la fuente son los del pseudoelemento.eligibleTextCount,computableTextCount(elpass, y el propiodata.detailsdel resultado cuando esnotApplicableporque ningún texto era calculable, que no enumera ninguna ocurrencia): cuántos nodos de texto estaban en el alcance, y cuántos de ellos tenían colores que se pudieron determinar. Elpassrepite ambos enmetrics.forcedColors(cada ocurrencia, y los detalles de ese resultadonotApplicable, 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
<p style="background:#ffffff; color:#000000;">Body text</p>
Negro sobre blanco es aproximadamente 21:1, muy por encima del umbral AAA de 7:1.
<p style="background:#ffffff; color:#767676;">Body text</p>
Gris sobre blanco es aproximadamente 4.6:1: cumple el mínimo AA pero no alcanza el umbral AAA más estricto de 7:1.
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_UNREACHABLE_ANY_BACKGROUND
- Localizar el texto que indica el informe y anotar su color, que el informe proporciona.
- Con una calculadora de contraste, medir ese color frente al blanco y frente al negro.
- Comparar la mayor de las dos relaciones con 7:1.
Se cumple. Frente al blanco o al negro, el color del texto alcanza 7:1, así que algún fondo puede llevarlo a la relación; medirlo entonces frente a su propio fondo.
No se cumple. Tanto frente al blanco como frente al negro, el color del texto queda por debajo de 7:1, así que ningún fondo lo lleva a la relación, lo que incumple WCAG 1.4.6.
ENGINE_EXCEPTION
- Localizar el texto que indica el informe (la comprobación se detuvo antes de tiempo, así que no se midió nada).
- 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.
- Anotar el tamaño y el grosor del texto y comparar la relación con 7:1 (4.5: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.6.
PLACEHOLDER_BELOW_THRESHOLD
- Localizar el campo que indica el informe y vaciarlo para que se muestre el texto provisional.
- 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.
- 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 7:1 (4.5:1 para texto grande: al menos 24px, o 18.66px y en negrita).
- 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 7:1 (o 4.5: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.6.
SYMBOLIC_CHARACTER_BELOW_THRESHOLD
- Localizar el carácter que indica el informe (como ×, ☰, › o un glifo de una fuente de iconos).
- 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ú.
- 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 7:1 (4.5:1 para texto grande: al menos 24px, o 18.66px y en negrita).
- 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.
- 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 7:1, lo que incumple WCAG 1.4.6; 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.