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

ID de la regla: color-contrast
Conjunto de reglas: axe-core 4.13
Impacto en el usuario: Grave
Directrices: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549, RGAA

Solucione más errores de accesibilidad con axe DevTools Pro

Encuentre y solucione más problemas con Intelligent Guided Tests™ respondiendo una serie de preguntas simples sobre el contenido de su página. Prueba gratuita. No se necesita tarjeta de crédito.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Baja Visión
  • Daltonismo

Standard(s)

  • WCAG 2.1 (AA)
  • WCAG 2.0 (AA)
  • WCAG 2.2 (AA)
  • Trusted Tester
  • EN 301 549
  • RGAA

Criterios de Éxito WCAG [WCAG 2.1 (AA)]

  • 1.4.3: Contrast (Minimum)

Criterios de Éxito WCAG [WCAG 2.0 (AA)]

  • 1.4.3: Contrast (Minimum)

Criterios de Éxito WCAG [WCAG 2.2 (AA)]

  • 1.4.3: Contrast (Minimum)

Directrices para probadores de confianza

  • 13.C: The visual presentation of text and images of text have sufficient contrast.

    RGAA

    • 3.2.1: Text has sufficient contrast against its background color.

    Cómo solucionar el problema

    Asegúrese de que todos los elementos de texto tengan suficiente contraste de color entre el texto en primer plano y el color de fondo detrás de él.

    Criterio de éxito: garantizar un contraste de color de al menos 4.5:1 para texto pequeño o 3,1:1 para texto grande, incluso si el texto es parte de una imagen. El texto grande se ha definido en los requisitos como 18 puntos (24 píxeles CSS) o 14 puntos en negrita (19 píxeles CSS). Nota: Los elementos que tengan una proporción de 1:1 se consideran "incompletos" y requieren una revisión manual.

    Utilice el analizador de contraste de color a continuación para encontrar colores que cumplan con las pautas.

    Image

    Herramientas de análisis de contraste de color: A continuación se presentan enlaces a herramientas que analizan las relaciones de contraste de color de acuerdo a las pautas:

    • Extensiones de navegador de axe DevTools — El producto empresarial de Deque, axe DevTools HTML, permite a los grupos de desarrollo integrar pruebas de accesibilidad en los procesos de pruebas automatizadas existentes y es utilizado por los clientes en conjunto con axe Monitor , el producto de Deque para el monitoreo e informes de accesibilidad. Además de proporcionar una biblioteca de códigos para la integración en muchos lenguajes de programación, axe DevTools también incluye extensiones de análisis de accesibilidad web para Google Chrome y Mozilla Firefox, lo que permite a los desarrolladores front-end empresariales ejecutar una prueba de accesibilidad rápida en cualquier momento. Las herramientas de análisis devuelven información detallada sobre las violaciones de accesibilidad e instrucciones para solucionar problemas, incluyendo enlaces para un conocimiento más profundo.
    • axe-core — El motor de accesibilidad axe es una biblioteca de reglas de accesibilidad de JavaScript de código abierto que es rápida, no devuelve errores falsos positivos ni resultados duplicados y está disponible como repositorio de GitHub, complemento de navegador o integración de framework.

    Por qué es importante

    Algunas personas con baja visión experimentan un contraste bajo, lo que significa que no hay muchas áreas brillantes u oscuras. Todo tiende a aparecer con el mismo brillo, lo que dificulta distinguir contornos, bordes, y detalles. El texto que tiene una luminancia (brillo) demasiado similar al fondo puede resultar difícil de leer.

    Hay casi tres veces más personas con baja visión que aquellas con ceguera total. Una de cada doce personas no puede ver el espectro completo de colores: aproximadamente el 8% de los hombres y el 0.4% de las mujeres en EE. UU. Una persona con baja visión o daltonismo es incapaz de distinguir el texto de un fondo sin suficiente contraste.

    En el fondo se tiene en cuenta la transparencia y la opacidad del color.

    La transparencia y la opacidad del color en el primer plano son más difíciles de detectar y tener en cuenta debido a:

    • Colores 1:1 en primer plano y fondo.
    • Degradados de fondo CSS.
    • Colores de fondo en pseudoelementos CSS.
    • Colores de fondo creados mediante bordes CSS.
    • Superposición con otro elemento en primer plano: esto a veces genera un posicionamiento complicado.
    • Elementos movidos fuera de la ventana gráfica mediante CSS.

    Descripción de la regla

    Todos los elementos de texto deben tener suficiente contraste entre el texto en primer plano y los colores de fondo detrás de él, de acuerdo con los umbrales de relación de contraste WCAG 2 AA.

    El algoritmo (en términos simples)

    Comprueba todos los elementos de texto para garantizar que el contraste entre el texto de primer plano y los colores de fondo cumplan con los umbrales de relación de contraste WCAG 2 AA.

    Nota:

    Esta regla no informará sobre elementos de texto que tengan un background-image, estén ocultos por otros elementos o sean imágenes de texto.

    Esto también verifica los elementos secundarios de los botones deshabilitados para que puedan ignorarse y evitar un valor falso.

    Recursos

    Páginas de cursos de Deque University (se requiere suscripción)

    Contribuir a axe-core en GitHub

    Otros recursos

    Quizás también quieras consultar estos otros recursos.

    Consulte la lista completa de reglas de axe 4.13 .

    ¿Le ha sido útil esta información?

    Ya has dado tu opinión, gracias..

    Su respuesta fue la siguiente:

    ¿Le ha sido útil esta información?
    Fecha y hora en que se enviaron los comentarios: