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
- 1.4.3 Contrast (Minimum), nivel AA
Apartados de la norma EN 301 549
| 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)
assets/base.css.liquid 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)
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)
| 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)
assets/css/main.css 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)
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)
| 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)
| 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 gratuitaO 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