Guía de accesibilidad de Xbox 102: Contraste

Objetivo

El objetivo de esta guía de accesibilidad de Xbox (XAG) es proporcionar suficiente contraste entre los elementos visuales y sus fondos para que los jugadores con visión baja puedan interpretar estos elementos.

Visión general

Hay aproximadamente 2.900 millones de personas en el mundo con baja visión. La configuración predeterminada en un juego a menudo puede dar lugar a elementos de la interfaz de usuario que no tienen contrastes fuertes con su fondo, lo que dificulta a los jugadores con poca visión, o jugadores con deficiencias de visión de color, para percibir y usar estos elementos.

Una relación de contraste es la diferencia en los valores de luminancia entre el primer plano y el fondo de un elemento. El soporte para la configurabilidad del contraste se puede usar como herramienta por jugadores con discapacidades para ayudar a aumentar la visibilidad de los elementos en pantalla sobre el fondo. Normalmente, cuanto mayor sea la relación de contraste, mayor será la visibilidad de un elemento. Si un jugador no puede percibir un elemento visual debido al contraste bajo y la visibilidad, es posible que se excluyan de aspectos del juego que requieren la capacidad de comprender o usar ese elemento. En última instancia, esto puede dar lugar a la exclusión del juego por completo. Por ejemplo, considere un mini-mapa en pantalla que proporciona información crítica para el juego, pero no tiene un contraste lo suficientemente fuerte entre sus elementos y sus fondos para que sean visibles para un jugador. Es posible que ahora no puedan navegar a su siguiente objetivo, identificar dónde se encuentran los enemigos o los puntos de control, ni realizar otras tareas críticas que dependen de la información del mini-mapa.

Preguntas para determinar el ámbito

¿Los elementos visuales importantes del juego son visibles en su fondo?

• ¿El texto y su color de fondo en las interfaces de menú?

• El color de los elementos de la pantalla de visualización frontal (HUD) sobre su fondo (como medidores de salud, texto y elementos del mini-mapa)?

• Los elementos esenciales del juego contra su fondo (por ejemplo, los iconos de objetivo son grises y deben distinguirse con un fondo de entorno de juego habitualmente oscuro).

Información básica y de fondo

Contraste y visión

Mantener relaciones de contraste fuerte entre los elementos visuales y su fondo aumenta la visibilidad de estos elementos para los jugadores con baja visión. Estos son algunos ejemplos de relaciones de contraste entre los colores de texto y sus fondos para el contexto. Además, en este ejemplo se proporciona una simulación de cómo el texto con bajas relaciones de contraste puede ser más difícil de leer si un jugador tiene un tipo de baja visión que afecta la claridad o está en un deterioro situacional, como cuando se juega bajo luz solar directa o desde una distancia. Tenga en cuenta que, con una disminución de la nitidez, el texto con una relación de contraste fuerte es mucho más visible que el texto con una relación de contraste débil.

Ejemplo de relación de contraste de texto de dos columnas. La columna izquierda está etiquetada como Relaciones de contraste de texto de ejemplo. En ella hay diferentes cuadros de color con texto dentro que describe la relación de contraste del texto del cuadro en el que se encuentra. Las relaciones de contraste van de 1.2:1 a 21:1. La columna derecha está etiquetada como Texto de ejemplo con una disminución de nitidez del 74%. Debajo de esta etiqueta se muestran los mismos cuadros de la columna izquierda, pero son más borrosos para mostrar que un texto con mayor contraste es más legible, incluso cuando es borroso.

También es importante tener en cuenta que los jugadores con discapacidades cognitivas, como la dificultad de lectura, pueden encontrar texto en interfaces de usuario de contraste alto difíciles de percibir. Aunque las experiencias de contraste alto deben admitirse como mínimo, las opciones de contraste configurable ayudan a garantizar que se puedan satisfacer las necesidades de más jugadores.

Áreas clave en las que las relaciones de contraste accesibles son importantes

Es importante asegurarse de que los elementos visuales y de texto mantienen relaciones de contraste fuertes con respecto a su fondo en todos los contextos de la experiencia del juego. Estas son sugerencias para las áreas clave que se van a evaluar.

Elementos de texto

Para obtener información general más detallada sobre dónde se encuentran los elementos de texto importantes con frecuencia en los juegos, consulta XAG 101: Visualización de texto.

• Texto en las INTERFACES de menú

• Texto que aparece en pantalla durante el juego activo

• Texto en ventanas de chat de grupo (texto del campo de entrada, texto del marcador de posición, texto de mensajes enviados y recibidos)

• Texto para subtítulos y subtítulos para sordos

• Texto en las pantallas de carga que proporciona información valiosa

• Texto en mensajes de error, mensajes emergentes u otras notificaciones específicas del título

Elementos visuales que no son de texto

• Indicaciones visuales:

  Ejemplo (expandible)

  Los elementos visuales que no son de texto en el juego, como los iconos de puntería, o los efectos de "halo" que proporcionan información direccional al jugador sobre de dónde les disparan, también son áreas que suelen resultar difíciles de ver sin un fuerte contraste.

  

  Fenyx Immortals Rising utiliza una flecha direccional blanca con un contorno negro para notificar visualmente a los jugadores sobre un ataque entrante y la dirección de la que proviene el ataque.

  Nota:

  El uso de rojo y verde para resaltar iconos u otros elementos importantes puede dificultar a los jugadores con determinados tipos de daltonismo. Para obtener más orientación sobre las mejores prácticas de accesibilidad para el daltonismo, consulte XAG 103: Canales adicionales para indicaciones visuales y de audio.

• Los elementos HUD en pantalla, como medidores de salud, indicaciones direccionales y elementos del mapa:

  Ejemplo (expandible)

  Los medidores de salud, los medidores de bonificación y los objetivos de pantalla también proporcionan información importante a los jugadores. Estos elementos también se deben explorar al evaluar el contraste.

  

  En The Outer Worlds, el contorno blanco alrededor de los indicadores rojos y púrpuras brillantes, así como el texto amarillo brillante sobre los fondos opacos de los elementos del HUD, aumenta la visibilidad.

• Botones, controles deslizantes y otros controles:

  Ejemplo (expandible)

  Muchos juegos tienen mini-mapas en los periféricos de una pantalla para ayudar a los jugadores. Los elementos de estos mapas suelen ser difíciles de distinguir visualmente y se beneficiarían de relaciones de contraste fuerte entre los elementos y su fondo. Del mismo modo, independientemente del tamaño, todos los mapas que proporcionan información clave para el juego, los símbolos de texto y otros elementos que aparecen en la pantalla de mapa también deben tener un contraste fuerte.

  

  En Forza Horizon 4, los elementos de mapa tienen un relleno amarillo sólido debajo de un contorno negro y texto negro para mejorar el contraste y la visibilidad de estos elementos en el resto del mapa.

• Símbolos o glifos:

  Ejemplo (expandible)

  Es importante que un jugador distinga claramente un control deslizante o un botón de su fondo. Los elementos de tipo deslizante se usan con frecuencia en menús de configuración de accesibilidad, como ajustar volúmenes o escalas de texto.

  

  En Minecraft, las pestañas deslizantes son gris claro con un contorno negro, que es visible frente al fondo gris oscuro. El texto en blanco "Chat Text Opacity: 79%" también mantiene altas relaciones de contraste contra el fondo general del control deslizante, y contra el propio control deslizante.

  

  En Gears Tactics, la pestaña deslizante circular es un círculo blanco brillante que mantiene un alto contraste contra el degradado de azul oscuro a negro del fondo.

  Si los símbolos, glifos o imágenes transmiten información importante a un jugador, es importante que estos elementos se distingan fácilmente en su fondo.

  

  En este ejemplo de For Honor, los símbolos dentro de los escudos del equipo se presentan con un fondo sólido. El contorno blanco garantiza que los símbolos permanezcan visibles en fondos oscuros (como el símbolo de espadas naranjas contra la pared oscura), mientras que el contorno negro garantiza que los símbolos permanezcan visibles en fondos claros (como el símbolo del castillo azul contra el fondo del castillo claro).

• Caracteres y plataformas:

  Ejemplo (expandible)

  La esquematización de caracteres u otros elementos clave del juego es útil para aumentar la relación de contraste de los elementos en su fondo. El color usado para el contorno también debe ser configurable o proporcionar un contraste fuerte con todos los fondos con los que aparecen de forma predeterminada.

  

  En Eagle Island, los jugadores pueden elegir atenuar su telón de fondo en el menú de configuración. Cuando se atenúa al 100 por ciento, el telón de fondo va de un entorno de bosque a un fondo negro sólido. Además, los jugadores pueden "delimitar personajes" y "delimitar plataformas". Esto agrega un contorno blanco alrededor de estos elementos, lo que aumenta aún más el contraste y la visibilidad.

  

  En este ejemplo se muestra cómo luce el fondo del juego Eagle Island cuando no está atenuado, y los "personajes de contorno" y "plataformas de contorno" no están habilitados para la comparación.

• Imágenes que contienen información clave.

Medición del contraste

Hay muchas herramientas que se pueden usar para medir el contraste de un elemento y su fondo para asegurarse de que se cumplen las relaciones de contraste.

Herramientas de medición de contraste:

1. Información de accesibilidad para Windows

2. Analizador de contraste de color del grupo Paciello

Accessibility Insights para Windows: video sobre la medición del contraste

Enfoques generales para mejorar el contraste

El mejor enfoque para garantizar que el texto sea accesible para tantos jugadores como sea posible es proporcionar a los jugadores opciones para configurar la interfaz de usuario para satisfacer mejor sus necesidades.

A menudo, el entorno de juego está en flujo visual constante, y en elementos de pantalla como texto, símbolos o indicaciones visuales no cumplen las relaciones de contraste en todo momento en todos los escenarios de juego.

Estos son algunos enfoques generales que pueden ayudar a aumentar el contraste.

• Proporcione a los jugadores la opción de colocar un fondo sólido detrás de cualquier texto en pantalla o dar a los jugadores la opción de ajustar la opacidad de ese fondo.

• Proporcione opciones de color para el texto y los elementos en pantalla, de modo que los jugadores puedan elegir los colores que sean más visibles para ellos.

• Soporta un modo de contraste alto en diferentes aspectos de tu juego.

• Agregue bordes alrededor del texto o los elementos.

Vídeo de opacidad de fondo de chat de texto

En Minecraft, los jugadores pueden ajustar la opacidad del fondo del chat de texto.

En Fallout: New Vegas, el jugador puede cambiar el color de HUD.

Directrices de implementación

Estas son algunas directrices para asegurarse de que tu juego proporciona la cantidad mínima de capacidad de configuración para los ajustes de contraste para satisfacer las necesidades de accesibilidad de más jugadores.

• El texto a gran escala y los elementos visuales a gran escala deben cumplir un contraste mínimo de 3:1 en su fondo.

  • En la consola, el texto grande se define como:

    • 52 px a 1080p

    • 104 píxeles a resolución 4K

  • En PC/VR, el texto grande se define como:

    • 36 píxeles en 1080p

    • 72 px en 4K

  • En el streaming de juegos para dispositivos móviles o Xbox, el texto grande se define como:

    • 36 px a 100 PPP

    • 72 px a 200 PPP

    • 144 px a 400 PPP

    • Escalar linealmente a medida que aumenta el dpi

• Los elementos visuales y texto de tamaño estándar (aquellos que no se consideran a gran escala) que proporcionan información importante o contexto para el juego deben tener una relación de contraste de al menos 4.5:1 en su fondo.

• El texto de los elementos inactivos debe cumplir una relación de contraste mínima de 3:1 en su fondo.

  • Los elementos inactivos pueden incluir texto dentro de símbolos, glifos u otros elementos visuales que aparecen dentro de la interfaz de usuario, pero no se pueden interactuar con debido a escenarios como:
    • El jugador aún no ha desbloqueado el área del juego, el elemento o la opción asociada con el elemento inactivo
    • La opción o elemento visual está deshabilitado debido a la falta de compatibilidad entre las especificaciones técnicas de hardware o software del reproductor y los requisitos de la opción inactiva
    • Cualquier otro escenario en el que un elemento visual presente en la interfaz de usuario no se pueda interactuar debido a circunstancias específicas de ese reproductor
  Ejemplo (expandible)

  

  Aunque este no es un ejemplo de texto inactivo, en Fenyx Inmortals Rising, los elementos en el juego que aún no se han desbloqueado aparecen rojo brillante con un icono de bloqueo encima de ellos, lo que les hace destacar visualmente dentro del entorno del juego.

  

  Vínculo de vídeo: representación de elementos inactivos

  En la tienda Sea of Thieves, cuando un jugador mueve el foco sobre un artículo que no se puede comprar individualmente, las palabras "solo en paquete" se superponen encima del artículo. El texto "sólo en paquetes" cumple con el requisito mínimo de relación de contraste de 3:1.

• El texto del marcador de posición o el texto especificado en un campo de entrada deben cumplir una relación de contraste mínima de 4.5:1 (3:1 para texto a gran escala) en el fondo del campo de entrada.

  Ejemplo (expandible)

  

  En Dragon Quest XI S: Ecos de una Edad Elusiva, los iconos de estrellas de marcador que informan al jugador de cuántas letras puede tener su nombre de personaje cumplen la relación de contraste 4.5:1.

• Se debe proporcionar un modo de contraste alto (claro, oscuro o ambos). Cuando está habilitada, las relaciones de contraste deben ser iguales o superiores a 7:1 para todos los elementos de la interfaz de usuario en su fondo.

  Ejemplo (expandible)

  

  El juego Hyperdot cuenta con un modo de contraste alto claro y oscuro. Cuando este modo está habilitado, todos los elementos visuales presentados tienen una relación de contraste de 7:1 con respecto a su fondo.

Gráfico de resumen de relación de contraste

• Cuando se muestra texto sobre un fondo de color no sólido, la relación de contraste de texto debe medirse entre el texto y el área de contraste más baja del fondo.

  Ejemplo (expandible)

  

  En El mar de ladrones, hay parches de turquesa más claro y oscuro detrás del texto. Al tomar la medida de contraste, se debe usar el más claro de los dos colores turquesas para el color de fondo.

• Cuando esté disponible, lea la configuración de contraste proporcionada por la plataforma para determinar si los modos de contraste alto deben activarse o desactivarse en el inicio del juego de forma predeterminada y, a continuación, ajustar la interfaz de usuario del juego en consecuencia.

  Ejemplo (expandible)

  Si un juego puede leer la configuración de la plataforma del sistema, se deben aplicar automáticamente al inicio inicial del juego. Si un jugador tiene el modo de contraste alto habilitado en el nivel de sistema o plataforma y un juego también ofrece un modo de contraste alto, se debe habilitar en el inicio del juego hasta que el jugador vuelva a configurar la configuración del juego. En este ejemplo, la configuración del sistema del jugador tiene habilitado el modo de contraste alto. Cuando abren Microsoft Solitaire, también se abre la versión de contraste alto del juego.

  Modo de juego estándar

  

  Modo de contraste alto

  

• El reproductor puede configurar o establecer colores de texto de primer plano y de fondo.

• Evite confiar solo en el color para comunicar información. Cuando esto no sea posible, proporcione a los jugadores la opción de elegir el color de los elementos clave del juego.

  Ejemplo (expandible)

  

  El menú de accesibilidad de Battlefield 2042 tiene opciones de daltonismo para personalizar los colores del icono del HUD. Las opciones son para Deuteranopia, Tritanopia, Protanopia y personalizado. La opción personalizada permite a los jugadores elegir colores y tonos específicos para satisfacer mejor sus necesidades. También se proporciona una vista previa que muestra los colores seleccionados del jugador en el juego en entornos de juego sombreados, midtone y brillantes.

• Las imágenes no deben contener texto excepto los tipos de logotipo.

  Ejemplo (expandible)

  Un archivo de imagen no debe contener texto porque ese texto y su fondo no se pueden ajustar para satisfacer las relaciones de contraste si se encuentran dentro de un archivo de imagen estático.

  

  En este ejemplo de Gears 5, el texto "Versus" y el descriptor de oración debajo son elementos de texto, en lugar de formar parte de la imagen de fondo. El texto debe ser su propio elemento de interfaz de usuario que se puede superponer en la parte superior de las imágenes, idealmente con la capacidad de colocar fondos semi opacos detrás del texto para aumentar las relaciones de contraste. El texto no debe formar parte de la propia imagen. Esto puede ayudar a garantizar la compatibilidad con la narración de pantalla.

• Los elementos visuales o de texto que forman parte de un logotipo o nombre de marca no tienen ningún requisito mínimo de contraste.

  Ejemplo (expandible)

  Los logotipos, como el logotipo de un título de juego en una pantalla de menú, no es necesario probar las relaciones de contraste.

  

  En este ejemplo de Age of Empires II, el texto "Age of Empires II" en la parte superior del menú no estaría sujeto a requisitos de contraste, ya que el texto forma parte del logotipo del juego.

• Los elementos visuales o de texto que son una decoración pura, que no son visibles para nadie, o que forman parte de una imagen que contiene contenido visual significativo, no tienen ningún requisito de contraste.

  Ejemplo (expandible)

  Las imágenes y los elementos que son puramente decorativos y no proporcionan información importante al jugador no tienen que probarse para las relaciones de contraste.

  

  En la pantalla del menú Versus de Gears 5, los elementos resaltados son puramente decorativos. Su única contribución a la página es puramente estética. Por lo tanto, no están sujetos a directrices de contraste.

  Nota:

  Esta imagen se ha editado para incluir un indicador rectangular verde en la parte superior derecha de la pantalla y dos flechas en la parte inferior central de la pantalla para resaltar las imágenes decorativas a las que hace referencia este ejemplo. Estos elementos verdes no forman parte de la interfaz de usuario de Gears 5.

Impacto potencial del jugador

Las directrices de este XAG pueden ayudar a reducir las barreras para los siguientes jugadores.

Recursos y herramientas