paleta de colores accesible · WCAG 2.2 · contraste · señales redundantes
Cómo crear una paleta de colores accesible
Convierte los colores de marca en roles de interfaz, prueba los pares que realmente se tocan, conserva focos y estados visibles y usa la simulación como apoyo, no como sustituto de la medición ni de usuarios reales.
paleta de colores accesible
¿Qué hace accesible a una paleta de colores?
Una paleta de colores accesible es un conjunto de colores asignados a roles cuyas combinaciones reales de texto, fondo, control, foco y gráfico se prueban según su uso. Para WCAG 2.2 nivel AA, el texto normal suele necesitar al menos 4,5:1 de contraste, el texto grande 3:1 y la información visual necesaria para identificar controles activos o gráficos significativos 3:1 frente a colores adyacentes. El color no puede ser la única señal. La paleta funciona cuando cada token tiene un cometido, cada par alcanza su umbral sin redondeo y errores, enlaces, selecciones y gráficos ofrecen además texto, forma, patrón o posición.
Cuatro reglas para una paleta de colores accesible
- paleta de colores accesible: asigna primero roles semánticos como lienzo, superficie, texto principal, acento, borde, foco, éxito, aviso y error
- paleta de colores accesible: mide cada primer plano contra el fondo real que toca, incluidos hover, foco, selección, superposición y tema oscuro
- paleta de colores accesible: trata 4,5:1 y 3:1 como mínimos y no como cifras que se puedan redondear, dejando margen para tipografías finas y pantallas reales
- paleta de colores accesible: repite el significado con etiquetas, iconos, subrayados, formas, patrones o posición para que una diferencia de tono nunca sea la única instrucción
paleta de colores accesible: Comprobaciones WCAG 2.2 según el rol de interfaz
| Uso de interfaz | Par que se mide | Objetivo nivel AA | Nota práctica |
|---|---|---|---|
| Texto normal · paleta de colores accesible | texto frente a su fondo renderizado | al menos 4,5:1 | 4,499:1 no se redondea hasta aprobado |
| Texto grande · paleta de colores accesible | texto grande frente a su fondo | al menos 3:1 | gran escala equivale al menos a 18 pt normal o 14 pt negrita, con tamaños equivalentes para CJK |
| Controles activos y gráficos significativos · paleta de colores accesible | señal necesaria frente a colores adyacentes | al menos 3:1 | comprueba límites, iconos, foco, selección y marcas de datos cuando transmiten información |
| Información codificada por color · paleta de colores accesible | significado adicional a la diferencia de tono | una señal visible sin color | añade texto, forma, patrón, subrayado, icono o posición aunque los colores también contrasten |
paleta de colores accesible: Empieza por los roles, no por una bandeja de muestras favoritas
Una paleta de marca describe identidad; una paleta de colores accesible describe decisiones. Empieza con un inventario breve: lienzo de página, superficie elevada, texto principal y secundario, enlace, acento, borde, anillo de foco, estado deshabilitado y mensajes de éxito, aviso y error. Da a cada función un token estable en lugar de repartir valores HEX literales por los componentes. Después anota qué roles pueden tocarse. El texto principal puede aparecer sobre el lienzo y una tarjeta; un borde de error puede quedar junto al campo y al fondo. Este mapa evita comprobar todo contra blanco cuando la interfaz real contiene paneles teñidos, transparencias, imágenes, degradados y modo oscuro. Una muestra puede seguir en la identidad visual y limitarse a decoración si no cumple un rol funcional.
paleta de colores accesible: Construye una matriz de pares para texto, controles y estados
Prueba combinaciones, no colores aislados. Para el texto registra primer plano, fondo renderizado, tamaño, peso y estado. Para controles incluye la información visual necesaria para encontrar el componente y entender foco, marcado, selección, expansión, error y hover. WCAG no exige a los controles inactivos el contraste de componentes activos, pero un producto puede mantenerlos legibles y reconocibles. Mide las transparencias después de componerlas y toma el punto creíble más desfavorable cuando hay texto sobre imágenes o degradados. Guarda los resultados junto a los tokens para que un cambio de tema no rompa en silencio la paleta de colores accesible. La matriz también revela variantes innecesarias y ayuda a conservar el sistema más pequeño que funciona en todas las superficies previstas.
paleta de colores accesible: Separa el contraste de luminancia del significado cromático
El contraste y el uso del color responden preguntas distintas. Una etiqueta verde de éxito puede tener un texto excelente y aun así fallar si solo el verde la distingue de un error rojo. Conserva el color y añade una palabra, icono, patrón o diferencia estructural que sobreviva a escala de grises y a distintas percepciones. Los enlaces dentro de párrafos se benefician de subrayado. Los gráficos necesitan etiquetas directas, formas de marcador, estilos de línea o patrones cuando importa identificar series. El foco debe seguir visible sin depender del nombre de un color. Los tonos complementarios o alejados no son accesibles por defecto: la distancia en la rueda no garantiza contraste de luminancia ni crea una segunda señal. La paleta de colores accesible ayuda, pero el contenido y el componente completan la comunicación.
Lista de publicación de una paleta de colores accesible
- paleta de colores accesible: nombra cada muestra por su rol semántico y documenta las superficies y estados donde puede usarse
- paleta de colores accesible: mide texto normal con 4,5:1 o más y texto grande con 3:1 o más frente al fondo renderizado
- paleta de colores accesible: mide límites de controles activos, foco, estados y gráficos necesarios con 3:1 frente a colores adyacentes
- paleta de colores accesible: comprueba estados normal, hover, foco, activo, seleccionado, inválido, deshabilitado, superposición, oscuro y zoom alto
- paleta de colores accesible: añade etiqueta, forma, icono, patrón, subrayado o posición cuando el color comunique estado o identidad
- paleta de colores accesible: guarda matriz de pares, resultado de herramienta, versión del componente y fecha para repetir la prueba
paleta de colores accesible: Crea y verifica la paleta en cuatro pasos
paleta de colores accesible: 1. Inventariar roles
paleta de colores accesible: enumera texto, superficies, bordes, controles, foco, datos y feedback; anota qué roles se tocan en cada tema y estado.
paleta de colores accesible: 2. Generar candidatos
paleta de colores accesible: usa la herramienta de armonía para explorar opciones coherentes, separando la preferencia de marca de los requisitos de contraste y significado.
paleta de colores accesible: 3. Medir la matriz
paleta de colores accesible: comprueba los pares reales sin redondear y sustituye o restringe cualquier token que no alcance el umbral de su función.
paleta de colores accesible: 4. Revisar estados completos
paleta de colores accesible: simula diferencias de visión cromática, inspecciona grises y foco de teclado y prueba componentes reales en escritorio y móvil.
paleta de colores accesible: Lo que WCAG 2.2 establece realmente
- paleta de colores accesible: El criterio 1.4.3 fija 4,5:1 para texto normal y 3:1 para texto grande en nivel AA, define gran escala como al menos 18 pt normal o 14 pt negrita y prohíbe redondear el umbral. Leer W3C Understanding SC 1.4.3
- paleta de colores accesible: El criterio 1.4.11 exige al menos 3:1 frente a colores adyacentes para la información visual necesaria que identifica controles activos, estados y objetos gráficos significativos. Leer W3C Understanding SC 1.4.11
- paleta de colores accesible: El criterio 1.4.1 exige una alternativa visible cuando el color comunica información, acción, respuesta o distinción; incluso un par 3:1 necesita otro indicador si importa reconocer el color exacto. Leer W3C Understanding SC 1.4.1
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Preguntas sobre una paleta de colores accesible
¿Todos los colores deben contrastar con todos los demás?
paleta de colores accesible: No. Prueba los pares que realmente se tocarán y la función que cumplen. El texto principal quizá deba aprobar sobre varias superficies, mientras un acento decorativo nunca llevará texto ni identificará un control. Documenta restricciones para evitar usos no probados. Una matriz de pares es más precisa que llamar conforme o no conforme a una muestra aislada.
¿Los colores complementarios son automáticamente accesibles?
paleta de colores accesible: No. Las posiciones opuestas de la rueda describen tono, no un resultado WCAG. Dos complementarios intensos pueden tener luminancia parecida, dificultar texto o confundirse en ciertas diferencias de visión. Usa armonía para generar candidatos y después mide contraste y añade señales no cromáticas.
¿Un simulador de daltonismo demuestra conformidad WCAG?
paleta de colores accesible: No. La simulación es una lente de revisión, no diagnóstico, cálculo normativo ni sustituto de personas con discapacidad. Mide pares con una herramienta determinista, revisa señales redundantes y estados completos e incorpora evaluación experta o de usuarios según el riesgo.