Contraste y color accesible: la guía práctica
El contraste es la única parte del diseño de color con fuerza legal detrás: los ratios de WCAG fijan los mínimos que las regulaciones citan, y el oficio consiste en cumplirlos sin diseñar con un comprobador en la mano, construyendo paletas donde cada combinación de texto y superficie supera su mínimo por construcción. Este hub reúne nuestras guías sobre las reglas, la ciencia que hay detrás y el modelo más reciente, APCA; la vista de trabajo es el conjunto completo de roles de una paleta con cada comprobación visible.
Los mínimos y por qué existen
Los números —4,5:1 para el texto de cuerpo, 3:1 para el texto grande y los elementos de interfaz, 7:1 para el nivel reforzado— codifican un siglo de investigación sobre legibilidad en aritmética exigible. La intuición detrás de los niveles es el grosor del trazo: leer significa resolver las formas de las letras contra su fondo, y cuanto más fino es el trazo, más diferencia de luminancia necesita el ojo para seguirlo. Por eso el texto grande obtiene un mínimo más laxo —a 24px una letra sobrevive con 3:1 lo que hundiría al texto de cuerpo— y por eso el mismo 3:1 se extiende a bordes, iconos y contornos de campos, que se leen como formas más que como trazos. Las guías de aquí cubren a qué se aplica cada mínimo, las excepciones (controles deshabilitados, decoración, logotipos) y los límites honestos: lugares donde el ratio pasa pero la lectura sigue sufriendo, y donde falla aunque se vea bien; los huecos que un modelo más nuevo se construyó para cerrar. Los ratios de contraste WCAG explicados es la pieza de referencia para los números en sí; AA frente a AAA sopesa cuándo el nivel reforzado compensa su coste, y por qué el contraste máximo no es la máxima legibilidad trata el techo de confort por encima de los mínimos.
Más allá del ratio
El ratio de WCAG trata la luz sobre oscuro y lo oscuro sobre luz de forma idéntica; la percepción, no. APCA —el modelo consciente de la polaridad desarrollado para la próxima generación de WCAG— puntúa lo que el ratio se pierde, algo que importa sobre todo en temas oscuros y con tipografía fina. Nuestras guías leen ambos números lado a lado, como cada vez hace más el trabajo serio de contraste: el ratio para el cumplimiento, APCA para el criterio. Qué es APCA presenta el modelo desde cero; WCAG 2 frente a APCA mapea qué veredictos cambian de verdad y en qué dirección: la tipografía fina clara sobre oscuro es el caso clásico en que el ratio dice que pasa y tus ojos discrepan.
Lo que un ratio no puede medir
Una comprobación de contraste compara dos colores; varios de los fallos de accesibilidad más comunes viven fuera de esa comparación. Alrededor del 8 % de los hombres ven el rojo y el verde como vecinos cercanos, así que un sistema de estados que codifica el significado solo en el tono puede superar todos los ratios y aun así ser ilegible — diseñar para el daltonismo cubre los tres tipos de deficiencia, y nunca dependas solo del color es el principio que las resiste a todas. Los indicadores de foco fallan por otra razón: el contraste existe, pero contra el vecino equivocado. El fallo más silenciosamente común es el gris que pasó como texto de cuerpo reutilizado para marcadores de posición y pies de texto un tono más claro de lo que el mínimo permite. Para los equipos que publican en la UE, la Ley Europea de Accesibilidad convierte esto de buenas prácticas en obligaciones, lo que hace que un método de pruebas repetible valga más que cualquier comprobador aislado.
Cumplir por construcción
El tema de fondo de este hub: probar el contraste es lo que haces cuando el contraste no se diseñó. Una paleta cuyos roles de texto se derivan contra sus superficies —los mínimos integrados en la derivación, cada combinación comprobada en el momento de la generación— se entrega accesible por defecto, y un cambio de marca vuelve a derivar en lugar de volver a auditar. Ese es el modelo sobre el que está construido Scale Composer: una sola escala deriva color, tipografía y rejilla a la vez, y los roles de texto salen del generador con sus mínimos de contraste ya aplicados. La maquinaria vive en nuestra guía de escalas de color; la mitad de la historia sobre el tema oscuro está en modo oscuro.
Guías de este hub
- ¿Qué es APCA?
APCA puntúa las combinaciones como Lc — consciente de la polaridad y de la fuente — en lugar de una razón. Qué significan los números y por qué WCAG 2.x sigue decidiendo la conformidad.
- AA frente a AAA: ¿a qué nivel deberías apuntar?
Contraste WCAG AA frente a AAA comparado: qué le cuesta a una paleta el suelo de 7:1, calculado; cuándo el texto de cuerpo AAA se gana su sitio; por qué el W3C desaconseja el AAA generalizado.
- Cómo probar el contraste: herramientas y método
Un verificador de contraste de color audita las combinaciones una a una. El método que escala: construye paletas que aprueban en la derivación y luego escanea y revisa el resto puntualmente.
- Contraste para bordes, iconos y componentes de interfaz
El contraste no textual del WCAG 1.4.11 fija un suelo de 3:1 para bordes, iconos, anillos de foco y estados de los controles: qué cuenta, qué está exento y por qué.
- Indicadores de foco que se ven de verdad
Accesibilidad de los indicadores de foco en la práctica: por qué outline: none abandona a quienes navegan con teclado, la regla del 3:1 y el anillo de dos colores que se ve en cada superficie.
- La Ley Europea de Accesibilidad y tu paleta de color
Los requisitos de diseño de la Ley Europea de Accesibilidad explicados: la EN 301 549 apunta a WCAG 2.1 AA, así que los umbrales de contraste de 4,5:1 ya tienen peso legal en la UE.
- Nunca dependas solo del color
Nunca dependas solo del color: la regla de accesibilidad WCAG 1.4.1. Por qué el color no puede ser la única señal, los fallos clásicos y las soluciones redundantes que no cuestan nada.
- Placeholder, leyenda y texto secundario: la trampa del gris
El contraste del texto placeholder es la trampa del gris: por qué #999 falla con 2,8:1, por qué #767676 es el gris accesible con 4,5:1, y cómo restar énfasis sin excluir.
- Por qué el contraste máximo no es la máxima legibilidad
Demasiado contraste es real: por qué el texto negro sobre blanco puede deslumbrar a 21:1, dónde se sitúa la franja de lectura cómoda y por qué las ratios WCAG son mínimos, no objetivos.
- Protanopia, deuteranopia, tritanopia: diseñar para el daltonismo
El diseño para el daltonismo explicado por tipo de cono: qué ven realmente la protanopia, la deuteranopia y la tritanopia, qué pares de paleta colapsan y cómo arreglarlos.
- Ratios de contraste WCAG explicados (4,5:1, 3:1, 7:1)
Los mínimos de ratio de contraste de WCAG explicados: 4,5:1 para texto de cuerpo, 3:1 para texto grande y componentes de interfaz, 7:1 para AAA — con seis combinaciones reales calculadas.
- Reglas de contraste para texto grande
El texto grande baja el mínimo de WCAG de 4,5:1 a 3:1 — pero solo a 24px normal o 18,66px negrita, al tamaño renderizado. Las reglas exactas y las trampas.
- WCAG 2 vs APCA: qué cambia
Contraste APCA vs WCAG comparado en emparejamientos calculados: dónde discrepan los dos modelos — pares oscuros, polaridad, peso de fuente — y cómo leer ambos números.
Encuentra los límites de tu paleta
Las reglas se fijan cuando las has visto actuar: abre una paleta y desplaza un color de texto hacia su fondo y observa cómo el ratio cae por debajo de 4,5:1, dónde APCA discrepa del ratio y cuál es el paso exacto en el que la combinación deja de funcionar. Ese límite, localizado una vez en tu propia paleta, enseña más que cualquier tabla de requisitos.