Los elementos deben alcanzar los umbrales mínimos de relación de contraste de color

El texto demasiado pálido sobre su fondo es difícil o imposible de leer para los clientes con baja visión, daltonismo o vista cansada por la edad, y para cualquiera que use el móvil a pleno sol. Los precios, los códigos de descuento, las indicaciones de los formularios y los textos de los botones que no se pueden leer provocan errores y pedidos perdidos.

ID de la regla
color-contrast
Origen
axe-core 4.13.0
Impacto
Grave
Nivel de corrección
ASSISTED
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Comprueba que el contraste entre los colores de primer plano y de fondo alcanza los umbrales mínimos de relación de contraste del nivel AA de las WCAG 2

Son candidatos los elementos con un nodo de texto visible propio, más los campos input, select y textarea, incluso vacíos, salvo un select sin opciones y un campo cuyo text-indent desplaza el texto fuera del control. Se omiten los campos sin texto, por ejemplo las casillas de verificación, así como los elementos deshabilitados o inertes, las etiquetas de controles deshabilitados y el texto formado solo por emojis o signos de puntuación.

La comprobación lee el color de texto calculado y construye el fondo a partir de los elementos apilados detrás del texto, combinando las capas semitransparentes sobre una página blanca. El texto cuenta como grande a partir de un font-size de 18 pt (24 px), o de 14 pt (18,66 px) cuando font-weight es 700 o más.

Cuando la comprobación no puede decidir, el resultado es «pendiente de revisión», como ocurre con una imagen o un degradado de fondo, una imagen o un vídeo detrás del texto, otro elemento superpuesto, un ::before o ::after grande con posición absoluta y con fondo, o un texto de un solo carácter que no supera la prueba. El escáner de Validiscan no convierte estos resultados en hallazgos, así que ese texto necesita la revisión de una persona.

Los colores se leen en el estado en que se carga la página, con el esquema de color claro, en cada viewport escaneado. vs-hover-focus-contrast mide los estados hover y focus.

Cómo corregirlo

Aumente el contraste del texto normal a al menos 4,5:1 y el del texto grande (24 px, o 18,66 px en negrita) a al menos 3:1. Ajuste el color en la configuración del tema o en las variables CSS en lugar de hacerlo elemento por elemento, manteniendo el tono de la marca y cambiando la luminosidad, y revise también el texto sobre imágenes y las etiquetas de oferta.

Criterios de conformidad de las WCAG

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
Criterio de las WCAG Versión 3.2.1 Versión 4.1.1
1.4.3 9.1.4.3 9.1.4.3

Recetas que enumeran esta regla

Esta regla tiene el nivel ASSISTED. En un proyecto, un hallazgo de esta regla sigue la vía ASSISTED, y estas recetas no se le aplican.

Shopify: receta contrast-tokens

Mostrar el antes y el después (1)
Antes y después Datos de ejemplo

assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 3; eliminadas: 3)

Cambios en assets/base.css.liquid (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
745 745 font-size: 0.8125rem;
746 746 letter-spacing: 0.04em;
747 747 text-transform: uppercase;
748 Eliminada color: #929292;
748 Añadida color: #767676;
749 749 }
750 750
751 751 .rating {
1013 1013
1014 1014 .copyright__content {
1015 1015 margin: 0;
1016 Eliminada color: #929292;
1016 Añadida color: #6f6f6f;
1017 1017 }
1018 1018
1019 1019 .policies {
1077 1077
1078 1078 .cookie-banner__text,
1079 1079 .cookie-banner__link {
1080 Eliminada color: #9a9a9a;
1080 Añadida color: #767676;
1081 1081 }
1082 1082
1083 1083 .cookie-banner__icon-button {

Shopware: receta contrast-tokens

Mostrar el antes y el después (1)
darkens the unit price colour to 4.5:1 with the same hue; axe clears it on both pages Datos de ejemplo

Resources/app/storefront/src/scss/_variant-broken.scss Cambios en Resources/app/storefront/src/scss/_variant-broken.scss (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/app/storefront/src/scss/_variant-broken.scss (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
45 45 /* Light grey unit prices, 3.1:1 (color-contrast). */
46 46 .product-price-unit,
47 47 .product-detail-price-unit {
48 Eliminada color: #929292;
48 Añadida color: #757575;
49 49 }
50 50
51 51 /* Fixed two-line product names (vs-text-spacing). */

WooCommerce: receta contrast-tokens

Mostrar el antes y el después (1)
darkens the footer text colour when every element it styles was measured Datos de ejemplo

assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 1; eliminadas: 1)

Cambios en assets/css/main.css (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
676 676 .kb-footer-about,
677 677 .kb-footer-newsletter-intro,
678 678 .site-info {
679 Eliminada color: #888;
679 Añadida color: #6e6e6e;
680 680 }
681 681
682 682 .site-footer ul.menu {

Magento: receta contrast-tokens

Mostrar el antes y el después (1)
darkens the single #929292 token and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1099 1099 // VALIDISCAN-SEEDED color-contrast: #929292 on white is 3.1:1.
1100 1100 .block-promo .info,
1101 1101 .toolbar-amount {
1102 Eliminada color: #929292;
1102 Añadida color: #767676;
1103 1103 }
1104 1104
1105 1105 // VALIDISCAN-SEEDED vs-reflow: the promo row keeps a 1100px minimum width at every breakpoint.

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1075 1075
1076 1076 .block-promo .info,
1077 1077 .toolbar-amount {
1078 Eliminada color: #929292;
1078 Añadida color: #767676;
1079 1079 }
1080 1080
1081 1081 .block-promo-wrapper {

Empiece con una revisión gratuita de su tienda.

Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.

Solicitar revisión gratuita

O escriba a info@validiscan.com.

Qué cubre la revisión gratuita y qué deja fuera
Usted envía
la dirección de su tienda
Páginas escaneadas
hasta 15
Usted recibe
todos los fallos que el escaneo puede demostrar, con la página y el código
En su tienda
solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
Lo que no es
una auditoría completa

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad