Los cinco roles de color
En «Diseño» y «Colores» encontrarás «Tu paleta de colores». Cada color tiene una función: «Fondo» es la base de toda la página; «Superficie», todo lo que va encima: tarjetas, recuadros, campos. «Color del texto» se aplica al texto corrido; «Color de acento», a los botones, los enlaces y todo lo que realiza una acción. «Texto de los botones» es el texto sobre el acento; si lo dejas vacío, lo calculamos para que sea legible.
Defines un color haciendo clic en su muestra o escribiendo su valor hexadecimal debajo, por ejemplo #8A4B2E, y confirmando con Intro. Una muestra con borde discontinuo significa: todavía sin definir, decide la plantilla. La × junto a un color definido lo vuelve a liberar, y la pequeña i junto a cada rol lo explica en una frase.
- Abre «Diseño» y elige «Colores».
- Haz clic en la muestra de un rol o escribe su valor hexadecimal.
- Comprueba la vista previa; se guarda automáticamente.
Combinaciones en la rueda de color
«Explorar combinaciones de colores» despliega la rueda de color. Su punto grande es el «Color base», y ese es tu color de acento: lo que elijas en la rueda se guarda al instante como color de acento. Arrastras el punto con el ratón o con el dedo; cuando tiene el foco, también funcionan las teclas de flecha y, con Mayús, en pasos más grandes. El control «Brillo» de debajo aclara u oscurece el color.
Al lado eliges una «Armonía»: «Análogo», «Monocromático», «Complementario», «Complementario dividido», «Triádico», «Cuadrado», «Tonos» o «Propias». La «Paleta» de debajo muestra los colores correspondientes con su valor hexadecimal; «Usar como…» debajo de un color lo asigna a un solo rol.
«Aplicar a la marca» reparte la paleta de una vez: la base como acento y, además, un fondo claro, una superficie clara, un color de texto oscuro y un texto de botón en negro o blanco, calculado para que sea legible. Después puedes cambiar cada rol por separado.
- En «Colores», despliega «Explorar combinaciones de colores».
- Arrastra el punto grande hasta tu color principal y elige una armonía.
- Haz clic en «Aplicar a la marca».
Legibilidad
Debajo de la paleta, el recuadro «Legibilidad» mide cuatro pares de colores: «Texto sobre fondo», «Texto sobre superficie», «Texto de los botones» y «Acento sobre fondo», según las WCAG, con un mínimo de 4,5:1. Cada par muestra su contraste y una valoración en palabras: «Muy buena legibilidad», «Buena legibilidad», «Justo — difícil de leer» o «Ilegible». Un par en el que uno de los colores aún no está definido no se mide.
Si un par no es legible, el aviso aparece en ambos colores («Contraste insuficiente con: …») y el recuadro muestra la consecuencia en cada herramienta. «Se sustituye en: …» significa que esa herramienta muestra ahí un color legible en lugar del tuyo: el sitio web, el formulario y WordPress, negro o blanco; la tienda, primero su propio color. «Se mantiene en: …» significa que la herramienta muestra exactamente tus colores, aunque sean difíciles de leer.
Debajo aparece entonces «Así se vuelve legible»: hasta tres paletas listas en las que todos los pares cumplen. Calculamos todos los pares a la vez para que ninguna corrección estropee otro par: cada color solo se aclara u oscurece y conserva su tono; el texto de los botones sigue siendo tu color o pasa a negro o blanco. Una pequeña vista previa muestra los cuatro pares de cada propuesta y, al lado, cómo cambia cada color. «Aplicar» aplica la paleta a tu marca y «Deshacer» recupera tus colores.
Los colores legibles ayudan a todo el mundo: a las personas con baja visión y a cualquiera que mire el móvil a pleno sol.
Comprobar el contraste en detalle
«Comprobar el contraste en detalle» examina un par a fondo. Arriba eliges el par; su relación aparece en grande, por ejemplo 5,20 : 1. Debajo están el primer plano y el fondo, cada uno con su muestra y un control «Brillo»: lo que cambies aquí cambia el color de tu marca.
La tabla muestra qué niveles alcanza el par: «Texto grande», «Texto pequeño» y «Gráficos e interfaz», cada uno para AA y AAA con «Cumple» o «No cumple». El texto corrido necesita 4,5:1, y los títulos grandes, 3:1; para un acento junto al fondo basta con 3:1. Al lado ves el par como una pequeña página con un título y un párrafo.
Si el contraste no basta, aparecen «Sugerencias: el mismo tono, solo más claro u oscuro»: un clic asigna el color propuesto al rol. Si con ese tono no hay manera, el recuadro te indica que tienes que volver a elegir uno de los dos colores.
- En «Colores», despliega «Comprobar el contraste en detalle».
- Elige arriba el par que no es legible.
- Haz clic en una sugerencia o arrastra el control «Brillo» hasta que aparezca «Cumple».