Identidad visual y diseño
Si tu educación al jugador parece hecha por un departamento de cumplimiento, los jugadores la leerán como un documento de cumplimiento — es decir, no la leerán. Este módulo sitúa el listón a nivel de marketing. Te da tres reglas para alcanzarlo: el modelo de identidad adaptable (los operadores conservan su marca, la estructura se mantiene), la contención Tier 1 vs Tier 2 (misma calidad, distinto presupuesto de fricción) y el WCAG 2.1 AA como piso, no como techo.
Operator note: Sustituye
{{PROGRAM_NAME}}por el nombre de tu programa en todo el texto. La paleta predeterminada, el sistema tipográfico y las reglas de nivel forman parte del sistema de marca y no deben modificarse. Lo que sí personalizas — tus colores, tus fuentes, tu logotipo — es exactamente lo que el modelo de identidad adaptable está diseñado para dejarte cambiar. Los guiones del narrador deben grabarse en la voz Tier 1 de Playbook salvo que una sección esté marcada como Tier 2.
Programa: Brand Foundations | Duración: ~20 min | Requisitos previos: Fundamentos del JR
Índice rápido
| Sección | Qué cubre | Tiempo |
|---|---|---|
| Objetivos de aprendizaje | Lo que sabrás tras este módulo | — |
| Sección 1: Principios del sistema visual | Identidad adaptable, color, tipografía, iconos, fotografía | ~7 min |
| Sección 2: Reglas visuales Tier 1 vs Tier 2 | En qué se diferencian visualmente los dos niveles, la prueba de publicación de cuatro puntos | ~7 min |
| Sección 3: Requisitos de accesibilidad | Línea base WCAG 2.1 AA, modo oscuro, lista de verificación previa a la publicación | ~4 min |
| Prueba del módulo | 5 preguntas calificadas, 80 % para aprobar | ~2 min |
| Puntos clave | Resumen | — |
| Referencias | Enlaces a recursos de marca de Playbook | — |
Objetivos de aprendizaje
Al completar este módulo, podrás:
- Usar el modelo de identidad adaptable para dar instrucciones a un diseñador sobre un nuevo despliegue en un operador
- Aplicar las reglas visuales Tier 1 vs Tier 2 a cualquier pieza — incluidos los casos en que cambian a mitad de recorrido
- Verificar el cumplimiento de WCAG 2.1 AA en cuanto a contraste, áreas táctiles y elección de fuentes en piezas reales
Por qué esto importa: Eres tú quien da el visto bueno. Un diseñador puede crear una tarjeta preciosa, pero si se publica con un ratio de contraste suspendido o un toque suelto de naranja en una pantalla de crisis, eso recae en quien la revisa — y quien la revisa eres tú. Este módulo te da las reglas para tomar esas decisiones rápido y defenderlas cuando alguien las cuestione.
Piensa en esto: Imagina el último aviso de juego responsable que viste — un enlace al pie, un recuadro de advertencia, un folleto junto a la puerta. ¿Parecía pertenecer a la marca que lo rodeaba, o parecía acoplado? Guarda esa imagen. Al final de este módulo, sabrás exactamente qué le falla.
Sección 1: Principios del sistema visual
Lectura
La mayoría del contenido de juego responsable parece diseñado por un departamento de cumplimiento. Porque normalmente lo fue. {{PROGRAM_NAME}} hace lo contrario. La educación al jugador debe ser indistinguible en calidad del contenido comercial del operador.
La regla de calidad visual: el contenido de {{PROGRAM_NAME}} debe igualar la calidad de producción del marketing comercial del operador. Si parece genérico, los jugadores lo tratarán como letra pequeña.
El modelo de identidad adaptable. {{PROGRAM_NAME}} no es un aspecto rígido que cada operador copia de la misma forma. Es una identidad adaptable. Los operadores conservan sus propios colores y fuentes. La estructura se mantiene. Los operadores personalizan la paleta de colores, las fuentes de título y de cuerpo, el logotipo y el co-branding, y el estilo fotográfico. Lo que se mantiene coherente en todos los operadores es el diseño y el espaciado, la jerarquía de la información, el sistema de iconos de doble grosor y la estructura de componentes. El resultado: un jugador que encuentra contenido de {{PROGRAM_NAME}} en un operador reconoce la forma de ese contenido en otro, aunque ambos tengan un aspecto distinto. Reconocible sin ser idéntico.
La paleta predeterminada. Los colores predeterminados de {{PROGRAM_NAME}} se eligen para evocar una marca de estilo de vida, no un programa de salud. Hay tres colores de marca. El azul marino profundo (#1B2838) es el primario — encabezados, fondos, identidad. Se lee como autoridad y sofisticación. El verde azulado eléctrico (#00D4AA) es el secundario — elementos interactivos y resaltados. Se lee como energía y modernidad. El naranja intenso (#FF6B35) es el acento — llamadas a la acción y atención. Se lee como acción y urgencia, y aparece solo en Tier 1.
- Azul marino profundo #1B2838Primario — encabezados, fondos, identidad.
- Verde azulado eléctrico #00D4AASecundario — enlaces, resaltados, acciones.
- Naranja intenso #FF6B35Acento — solo Tier 1. Desaparece en Tier 2.
- Superficie #F5F5FAEl fondo claro sobre el que se asientan la mayoría de los diseños.
- Blanco #FFFFFFTarjetas y paneles. Marino sobre blanco = 14,9:1.
Los colores semánticos son aparte, y son funcionales. Junto a los colores de marca hay un pequeño conjunto de colores de estado: éxito (#00C853) para un cuestionario aprobado o un límite fijado, advertencia (#FFB300) para un límite que se acerca, peligro (#FF3D00) solo para crisis de Tier 2, e información (#2979FF) para consejos y explicaciones. Mantén estos estándar aunque personalices todo lo demás. Los jugadores aprenden estas asociaciones en cada producto que tocan. Tus colores de marca expresan identidad; los colores semánticos expresan función. Mezcla ambos y pierdes la señal — un botón de llamada a la acción rojo junto a una alerta de peligro roja deja de significar nada.
La tipografía usa tres fuentes, cada una con un trabajo. Inter lleva los títulos y la interfaz — titulares, encabezados de sección, preguntas de cuestionario, llamadas a la acción, el logotipo. Source Sans 3 lleva el texto de cuerpo — párrafos, descripciones, etiquetas de formulario. Source Code Pro lleva los datos y los números de ayuda — cuotas, valores de RTP, números de teléfono. Esa última elección es funcional, no decorativa: Source Code Pro hace que 0 y O, y 1 y l e I, se distingan visualmente. Cuando alguien intenta contactar con una línea de ayuda, distinguir esos caracteres puede marcar la diferencia entre obtener ayuda y marcar un número equivocado.
La iconografía refleja el logotipo. El logotipo separa Play (pesado, peso 800) de BOOK (ligero, peso 300). El sistema de iconos refleja ese contraste con dos grosores de trazo: trazos primarios de 2 px para las formas exteriores y la estructura, trazos de detalle de 1 px para los acentos interiores. Esa proporción 2:1 crea jerarquía dentro de cada icono y conecta todo el conjunto con el logotipo. La biblioteca abarca 31 iconos en seis categorías: tipos de juego, probabilidades y matemáticas, herramientas del jugador, contenido y educación, social y compartir, y apoyo y seguridad.
La fotografía debe evocar un editorial de estilo de vida. Espontánea, bien iluminada, personas reales, ambiente cinematográfico. La pregunta clave para cualquier imagen: ¿esta imagen hace que el juego parezca un entretenimiento divertido entre amigos, o una actividad aislada de altas apuestas? Busca luz cálida y direccional, personas reales, detalle en primer plano, el propio punto de vista del jugador. Evita la iluminación tenue y sombría que se siente aislante, y evita el material de archivo genérico sin personas y sin historia. Una regla estricta por encima de todo: nunca coloques texto blanco directamente sobre una foto sin procesar. {{PROGRAM_NAME}} coloca el texto sobre una superposición de degradado para que el contraste siempre se sostenga — marino para la mayoría de los tratamientos, verde azulado para los mensajes positivos y orientados a la acción, marino con un acento naranja para el desmontaje de mitos.
Guion del narrador
Narrator: [transition slide] El sistema visual de {{PROGRAM_NAME}} empieza con tres colores de marca. El marino es el primario — confianza y autoridad. El verde azulado es el secundario — elementos interactivos, enlaces, llamadas a la acción. El naranja intenso es el acento — energía para el material Tier 1, y desaparece por completo en el Tier 2.
[show three-color palette] Junto a esos hay un conjunto aparte de colores semánticos — éxito, advertencia, peligro, información. Mantén esos estándar aunque cambies todo lo demás, porque los jugadores los aprenden en cada producto que usan.
[show type system] Tres fuentes, tres trabajos. Inter para los títulos, Source Sans para el cuerpo y Source Code Pro para los números de ayuda — porque evita que un cero parezca una O cuando alguien necesita marcar para pedir ayuda.
[show iconography] El conjunto de iconos lleva la misma idea: dos grosores de trazo que reflejan el pesado Play y el ligero BOOK, una sola biblioteca coherente en todos los operadores.
[pause 3s] Todo el sistema es deliberadamente contenido. El ruido visual es el enemigo de la educación al jugador.
Sección 2: Reglas visuales Tier 1 vs Tier 2
Lectura
Repaso rápido de Fundamentos del JR. El Tier 1 es el ~95 % — alfabetización de entretenimiento: seguro, ingenioso, con la marca al frente. El Tier 2 es el ~5 % — apoyo y crisis: cálido, directo, humor en cero. Fundamentos del JR cubrió cómo suena cada nivel. Esta sección cubre cómo se ve cada uno.
Ambos niveles usan el mismo sistema de diseño. La diferencia es cuánto de él activas.
El Tier 1 es alfabetización de entretenimiento. Es la mayoría de la producción de {{PROGRAM_NAME}}, y debe ser atractivo, dinámico y con la marca al frente — paleta completa, diseños ricos, fotografía, animación, personalidad. Fíjate en el ADN compartido: fondos marinos, acentos verde azulado, títulos en Inter, el logotipo PlayBOOK, naranja para la atención. Las plantillas Tier 1 abarcan tarjetas sociales, stories, carteles, correos, señalética en el local, tarjetas de exhibición y pantallas digitales. Cada una está diseñada para competir con el mejor contenido comercial del operador.
El Tier 2 es apoyo y crisis, y la contención es justo el objetivo. La meta de diseño es cero fricción — nada compite con la información de apoyo. Así que reduces a lo esencial: contraste máximo, sin decoración, color mínimo, áreas táctiles grandes, columna única. Y el Tier 2 siempre se muestra en modo claro, aunque el jugador tenga activado el modo oscuro, porque el modo oscuro puede sentirse aislante en una crisis. Aquí está el contraste de un vistazo: donde el Tier 1 usa la paleta completa, el Tier 2 usa neutros más verde azulado únicamente. Donde el Tier 1 varía los pesos tipográficos con libertad, el Tier 2 se mantiene grande, claro y plano. Donde el Tier 1 construye cuadrículas y tarjetas dinámicas, el Tier 2 es una columna única con espaciado generoso. Donde el Tier 1 se apoya en la fotografía, la ilustración y la visualización de datos, el Tier 2 no lleva imagen alguna — solo texto y enlaces. El Tier 1 invita a la interacción mediante cuestionarios, herramientas y animación; el Tier 2 ofrece botones simples y nada más.
Ver la diferencia lado a lado:
Ambos niveles usan la misma calidad de marca. La diferencia es la contención, no la calidad. El Tier 2 no es un «Tier 1 más feo» — es deliberadamente escaso, porque el ruido visual es fricción cuando alguien necesita ayuda.
La prueba de integración de cuatro puntos. Antes de publicar cualquier pieza de {{PROGRAM_NAME}}, sométela a cuatro preguntas. Si pasa las cuatro, se publica. ¿Encaja? Colócala junto al contenido comercial del operador — ¿parece propia, o parece acoplada de otra marca? ¿Lo aprobaría un director de marketing? Si parece hecha por cumplimiento, devuélvela; el listón es calidad de marketing, no una casilla regulatoria. ¿Se siente moderna? Si pudiera haberse diseñado en 2010, no es lo bastante buena — los jugadores consumen contenido de vanguardia todo el día. ¿Es accesible? Mide los ratios de contraste, comprueba las áreas táctiles, pruébala con un lector de pantalla. La accesibilidad es un requisito previo, no una idea de último momento.
Guion del narrador
Narrator: [transition slide] El Tier 1 y el Tier 2 usan la misma calidad de marca. La diferencia es la contención, no la calidad.
[show tier 1 sample board] El Tier 1 recibe el sistema visual completo. Fondos marinos, acentos verde azulado, resaltados naranja intenso, iconos lúdicos, ilustración de marca. Aquí es donde vive la personalidad.
[show tier 2 sample board] El Tier 2 lo reduce todo. El naranja desaparece. La decoración desaparece. La paleta baja a neutros más verde azulado para las acciones esenciales. El diseño pasa a columna única, el espacio en blanco se abre, y el Tier 2 siempre se muestra en modo claro — aunque el jugador tenga activado el modo oscuro.
[pause 3s] Cuando alguien necesita ayuda, cada elemento visual de más es fricción.
Sección 3: Requisitos de accesibilidad
Lectura
La accesibilidad no es un lujo. Si un jugador no puede acceder a tu contenido por una discapacidad, una limitación de dispositivo o una situación como sol intenso o un local ruidoso, tu educación le falla igual que un texto de cumplimiento enterrado. Barrera distinta, mismo resultado: el jugador no obtiene la información que necesita.
El WCAG 2.1 AA es la línea base. Cada punto de contacto de {{PROGRAM_NAME}} debería cumplirlo. En la práctica, es una lista corta de cifras que puedes comprobar. El contraste del texto debe alcanzar 4,5:1 para el texto normal y 3:1 para el texto grande — cada combinación de primer plano sobre fondo tiene que ser legible de forma medible. El contraste de la interfaz — botones, iconos, gráficos, controles — debe alcanzar 3:1 contra su fondo. Las áreas táctiles deben medir al menos 44x44 px para que cada botón, enlace y campo sea fácil de tocar. Por encima de las cifras, tres reglas estructurales: todo funciona por teclado (orden de tabulación con sentido, foco visible, sin trampas), todo es legible para un lector de pantalla (HTML semántico, etiquetas ARIA donde haga falta), y el texto de cuerpo es de al menos 16 px. Sin excepciones en esto último — el contenido que la gente debe leer tiene que ser legible.
Para concretar esos ratios: blanco sobre marino es 13,5:1 y aprueba con holgura. Verde azulado sobre marino es 7,2:1 y aprueba. Marino sobre blanco es 13,5:1 y aprueba. Texto claro sobre fondo claro ronda 1,4:1 y falla — que es justo el tipo de cosa que una comprobación rápida detecta antes de publicar.
El modo oscuro tiene sus propias trampas. El texto atenuado es la principal: neutral_500 (#6B6B8A) sobre neutral_900 (#1A1A2E) es solo 3,33:1, que aprueba para texto grande pero falla para texto normal — así que úsalo con moderación, y solo a 18 px+, o 14 px+ en negrita. Para los colores de estado, usa siempre texto oscuro sobre los fondos cromáticos (éxito, advertencia, peligro, información), tanto en modo claro como oscuro; nunca blanco. Reduce el brillo de las imágenes al 85-90 % para que las fotos no deslumbren sobre fondos oscuros. Y recuerda la regla de la Sección 2: las páginas Tier 2 siempre se muestran en modo claro.
Operator integration point: Recorre esta lista antes de publicar cualquier pieza. Visual y contraste — cada combinación de texto/fondo cumple 4,5:1 (normal) o 3:1 (grande); todos los elementos interactivos miden al menos 44x44 px; ningún significado se transmite solo por color (respáldalo con texto, iconos o patrones); los números de ayuda van en Source Code Pro con 0/O y 1/l/I confirmados como distintos. Interacción y dispositivos — cada acción funciona por teclado; el contenido tiene sentido leído de forma lineal por un lector de pantalla; cada imagen tiene texto alternativo (descriptivo para las informativas, vacío para las decorativas); el diseño se ha comprobado en móvil, tableta, escritorio y dispositivos de asistencia. Tu organización también puede tener su propia política de accesibilidad u obligaciones legales además de WCAG. Enlázalas aquí: Políticas internas
Guion del narrador
Narrator: [transition slide] La accesibilidad no es opcional. Es el fundamento de una educación al jugador inclusiva.
[show WCAG checklist] El contraste de color cumple el WCAG doble A — cuatro coma cinco a uno para el texto de cuerpo, tres a uno para el texto grande. Las áreas táctiles miden al menos cuarenta y cuatro píxeles. Cada diseño funciona por teclado y se lee con claridad para un lector de pantalla. Nunca uses el color por sí solo para transmitir significado. Cada imagen recibe texto alternativo. Y el Tier 2 siempre se muestra en modo claro, porque el modo oscuro puede sentirse aislante en una crisis.
[pause 3s] El objetivo es simple: cada jugador, sea cual sea su capacidad, puede acceder a cada pieza de material.
[transition to exercise] Antes del test, seis decisiones de diseño esperan sobre tu escritorio. Para cada una, decide: publicar o corregir. Cada respuesta sale directamente de las reglas que acabas de aprender. Recórrelas y luego continúa.
Exercise: ¿Publicar o corregir?
Type: scenario
Instructions: Seis piezas de material gráfico de educación al jugador esperan tu visto bueno. Para cada una, decide: ¿se publica tal cual o vuelve a diseño? Júzgala según las reglas de este módulo — la regla de calidad visual, la contención del Tier 2, los colores semánticos y el suelo de WCAG 2.1 AA.
| Elemento | Categoría correcta | Retroalimentación si es correcto | Retroalimentación si es incorrecto |
|---|---|---|---|
| Una tarjeta social Tier 1 que desmonta el mito de la «máquina caliente»: fondo marino, resaltados verde azulado, una llamada a la acción naranja intenso, una foto editorial de amigos en el bar — con el titular sobre un degradado marino. Las comprobaciones de contraste pasan. | Publicar | Correcto — esto es el Tier 1 haciendo su trabajo. Paleta completa, personalidad, fotografía de calidad de marketing, y el titular se asienta sobre un degradado marino en lugar de la foto sin procesar, así que la regla de texto sobre foto y el contraste WCAG se cumplen a la vez. | Esta pieza está limpia. El Tier 1 recibe el sistema visual completo — naranja incluido — y el titular va sobre un degradado marino, que es exactamente cómo {{PROGRAM_NAME}} mantiene el texto sobre fotografía en contraste WCAG AA. |
| Una tarjeta de exhibición de «Conoce las probabilidades» hecha con una plantilla de stock gratuita: fuentes de sistema grises, dados de clipart, sin elementos de marca — junto a las relucientes tarjetas promocionales del operador. | Corregir | Correcto — esto viola la regla de calidad visual. El contenido de {{PROGRAM_NAME}} debe igualar la calidad de producción del marketing comercial del operador. Si parece hecho por cumplimiento, los jugadores lo tratarán como letra pequeña. | Ponla junto a las tarjetas promocionales y suspende la primera pregunta de la prueba de integración. La regla de calidad visual dice que la educación al jugador debe igualar la calidad del marketing comercial — una plantilla de stock con clipart ni se acerca. |
| Una página de confirmación de descanso con un botón «Confirmar» naranja intenso, una ilustración celebratoria de confeti y un diseño que sigue la preferencia de modo oscuro del jugador. | Corregir | Correcto — tres violaciones del Tier 2 en una sola pantalla. El naranja desaparece en Tier 2, los elementos decorativos desaparecen, y el Tier 2 siempre se muestra en modo claro porque el modo oscuro puede sentirse aislante en contextos de crisis. Redúcela a neutros más verde azulado. | Esto es territorio Tier 2, así que aplican las reglas de contención. El naranja desaparece, la decoración desaparece, y el Tier 2 siempre se muestra en modo claro sin importar la preferencia del sistema. El ruido visual es fricción cuando alguien necesita ayuda. |
| Una página de apoyo Tier 2: columna única, solo neutros más verde azulado, sin imágenes, botones grandes y fáciles de tocar — y se muestra en modo claro incluso para jugadores con el modo oscuro activado. | Publicar | Correcto — esto es contención Tier 2 de manual. Neutros más verde azulado, columna única, cero decoración, modo claro fijo. Nada compite con la información de apoyo, que es justo el objetivo. | Escaso no es defectuoso — es deliberado. El Tier 2 se reduce a lo esencial para que nada compita con la información de apoyo, y forzar el modo claro es la regla, no un error. Esta pieza se publica exactamente como está diseñada. |
| Un cuestionario de probabilidades para móvil con contraste impecable en todo — pero los botones de respuesta miden 36x36 px para que quepan más opciones en pantalla. | Corregir | Correcto — esos botones suspenden el suelo de áreas táctiles. WCAG 2.1 AA exige un mínimo de 44x44 px para cada elemento interactivo, y 36 px no llega. Aprobar el contraste no compensa un área táctil suspendida. | Comprueba las áreas táctiles. WCAG 2.1 AA exige un mínimo de 44x44 px para cada elemento interactivo, y estos botones miden 36 px. Un gran contraste no lo excusa — corrige los botones y luego publica. |
| Para que la paleta se sienta cohesionada, un diseñador rehace el estado de éxito de «límite fijado» en el naranja de marca del operador y la advertencia de acercamiento al límite en el marino de marca. | Corregir | Correcto — los colores semánticos son funcionales, no decorativos. Éxito, advertencia, peligro e información se mantienen estándar en todos los productos y plataformas. Los jugadores aprenden estas asociaciones; repintarlas con colores de marca destruye la señal. | Los colores de marca expresan identidad; los colores semánticos expresan función. La paleta de éxito/advertencia/peligro/información se mantiene estándar aunque todo lo demás se personalice — una advertencia vestida de marino de marca deja de leerse como advertencia. |
Prueba del módulo
Narrator: [transition slide] Es hora de comprobar lo que has aprendido. Cinco preguntas que cubren el sistema visual, las reglas visuales del Tier 1 y el Tier 2, y el piso de accesibilidad. Necesitas un 80 % — es decir, cuatro de cinco — para dar por completado este módulo. Tómate tu tiempo. Si no apruebas al primer intento, puedes repasar el material y volver a hacer la prueba.
Question 1
Assesses: Objetivo de aprendizaje 1
Stem: ¿Cuál es la «regla de calidad visual» para el contenido de {{PROGRAM_NAME}}?
| Opción | Texto |
|---|---|
| A | El contenido de {{PROGRAM_NAME}} debería usar una estética distintiva y clínica para diferenciarse del contenido comercial |
| B | El contenido de {{PROGRAM_NAME}} debe igualar la calidad de producción del marketing comercial del operador |
| C | El contenido de {{PROGRAM_NAME}} debería ser minimalista para no competir con la marca del operador |
| D | El contenido de {{PROGRAM_NAME}} debería seguir las normas de diseño de comunicación sanitaria gubernamental |
Correct: B
Explanation: Si el contenido de {{PROGRAM_NAME}} parece genérico, anticuado o de menor calidad que el contenido promocional que lo rodea, los jugadores lo tratarán como letra pequeña. Diséñalo como diseñarías el lanzamiento de un producto — porque eso es lo que es.
Source: Visual System
Question 2
Assesses: Objetivo de aprendizaje 1
Stem: ¿Qué es el «modelo de identidad adaptable»?
| Opción | Texto |
|---|---|
| A | Un sistema donde {{PROGRAM_NAME}} se ve idéntico en todos los operadores |
| B | Un sistema donde los operadores conservan la identidad estructural de {{PROGRAM_NAME}} (diseño, jerarquía, iconos) pero aplican sus propios colores y fuentes |
| C | Un sistema que cambia automáticamente según el segmento del jugador |
| D | Un sistema que usa IA para generar diseños personalizados por mercado |
Correct: B
Explanation: Los operadores personalizan colores y fuentes para que coincidan con su marca, pero los elementos estructurales — patrones de diseño, jerarquía de la información, sistema de iconos, espaciado — se mantienen coherentes. Un jugador que encuentra contenido de {{PROGRAM_NAME}} en una plataforma reconocerá la estructura en otra.
Source: Visual System
Question 3
Assesses: Objetivo de aprendizaje 2
Stem: ¿En qué debería diferir visualmente el contenido Tier 2 (apoyo/crisis) del Tier 1?
| Opción | Texto |
|---|---|
| A | Usar rojo y colores de advertencia en todo para señalar urgencia |
| B | Hacerlo visualmente escaso — sin ningún estilo de marca |
| C | Misma calidad de marca pero reduciendo a lo esencial: diseño limpio, espacio en blanco generoso, contraste máximo, cero ruido visual |
| D | Usar un sistema de diseño completamente distinto del Tier 1 |
Correct: C
Explanation: El Tier 2 usa la misma calidad de marca y el mismo sistema de diseño pero con máxima contención: diseño limpio, espacio en blanco generoso, alto contraste, sin decoración. El objetivo es cero fricción — nada compite con la información de apoyo. Y el Tier 2 siempre debería mostrarse en modo claro, aunque el usuario tenga activado el modo oscuro.
Source: Visual System
Question 4
Assesses: Objetivo de aprendizaje 3
Stem: ¿Cuál es el ratio de contraste mínimo para el texto normal según WCAG 2.1 AA?
| Opción | Texto |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4,5:1 |
| D | 7:1 |
Correct: C
Explanation: 4,5:1 es el mínimo para el texto normal (menos de 18 px o menos de 14 px en negrita). El texto grande necesita 3:1. Los componentes de interfaz y los objetos gráficos necesitan 3:1. Estos son no negociables — la accesibilidad no es una función, es un requisito.
Source: Accessibility
Question 5
Assesses: Objetivo de aprendizaje 1
Stem: ¿Por qué {{PROGRAM_NAME}} usa Source Code Pro para los números de ayuda?
| Opción | Texto |
|---|---|
| A | Se ve más moderna que otras fuentes |
| B | Es la fuente primaria de la marca |
| C | Distingue caracteres similares — 0/O y 1/l/I son visualmente distintos |
| D | La exigen los reguladores del juego |
Correct: C
Explanation: Cuando alguien intenta llamar a una línea de ayuda, confundir un 0 con una O o un 1 con una l podría significar marcar el número equivocado. Source Code Pro hace que cada carácter sea visualmente distinto. Es una decisión de diseño funcional, no estética.
Source: Visual System
Puntos clave
- La regla de calidad visual: el contenido de {{PROGRAM_NAME}} debe igualar la calidad de producción del marketing comercial del operador. Si parece hecho por cumplimiento, los jugadores lo tratarán como letra pequeña.
- Identidad adaptable: los operadores personalizan colores y fuentes, pero la estructura — diseño, jerarquía, iconos, espaciado — se mantiene coherente en cada implementación.
- Tres colores de marca: marino profundo (primario), verde azulado eléctrico (secundario), naranja intenso (acento — solo Tier 1). Más colores semánticos aparte para los estados funcionales.
- El Tier 1 recibe el sistema completo. El Tier 2 lo reduce todo — sin naranja, sin decoración, columna única, solo modo claro. Misma calidad, máxima contención.
- La prueba de cuatro puntos: ¿encaja, lo aprobaría un director de marketing, se siente moderno, es accesible? Pasa los cuatro para publicar.
- El WCAG 2.1 AA no es negociable: contraste de 4,5:1 para texto normal, áreas táctiles de 44x44 px, navegación por teclado, compatibilidad con lectores de pantalla. Importa más en el Tier 2 — el estrés implica mayor carga cognitiva y menos paciencia.
Fundamento documental
No hace falta que los leas, pero son los estándares publicados y la investigación que respaldan las reglas del módulo — por si un colega pregunta.
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Recomendación del W3C. Por qué está aquí: la fuente de cada cifra de la Sección 3 — los ratios de contraste de 4,5:1 y 3:1, la guía de áreas táctiles de 44x44 px y el nivel de conformidad AA que {{PROGRAM_NAME}} trata como su piso.
- Arditi, A. & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23), 2926–2933. Por qué está aquí: la evidencia de legibilidad detrás de las elecciones tipográficas funcionales, como la distinción de caracteres — por qué una fuente que separa 0/O y 1/l/I no es una preferencia estética.
- Robins, D. & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing & Management, 44(1), 386–399. Por qué está aquí: evidencia experimental de que la calidad de producción visual determina si las personas juzgan el contenido como creíble — el respaldo empírico de la regla de calidad visual.
Referencias
| Recurso | Para qué usarlo |
|---|---|
| Visual System | Identidad adaptable, paleta, tipografía, iconografía, fotografía |
| Accessibility | Línea base WCAG, tablas de contraste, reglas de modo oscuro, lista de verificación |
| Collateral templates | Especímenes Tier 1 y Tier 2 para dar instrucciones y comparar |