Por qué los colores de tu UI parecen de junior: 6 arreglos con códigos exactos
Seis errores de color que hacen que una interfaz parezca de junior, y el arreglo senior para cada uno con los códigos exactos: un solo acento, color más icono más palabras, áreas teñidas, texto de acento más oscuro, texto oscuro sobre amarillo y un tono por estado.
El color junior rara vez es un choque de colores. Son seis pequeños hábitos: demasiados acentos, el color haciendo un trabajo solo, rellenos a plena intensidad por todas partes, un color de marca claro usado para texto, blanco sobre amarillo y un solo tono para todos los estados. El color senior se ve calmado porque cada uno de esos puntos tiene una regla. Aquí van los seis, con los códigos.
1. Un acento, para la acción
Rojo
Verde
Ámbar
Violeta
Neutro
Neutro
Neutro
Acento #6440E0
Cuando cada elemento tiene su propio color, el color deja de significar algo. El ojo no tiene dónde posarse y la acción real compite con la decoración.
Elige un acento y gástalo solo en lo que la gente puede accionar: el botón principal, la pestaña seleccionada, el enlace. Todo lo demás va en neutro. Si puedes señalar un elemento coloreado y decir "eso no se toca", quítale el color. La regla 60-30-10 es la misma idea en proporciones: el acento es ese diez pequeño.
2. Color, icono y palabras
Correo
✕ Junior: un borde rojo y nada más
Correo
Añade la dirección completa, como sam@mail.com.
✓ Senior: color, icono y palabras
Correo
✕ Junior: ¿cuál campo está mal?
Correo
Añade la dirección completa, como sam@mail.com.
✓ Senior: sigue siendo obvio
Un 8 por ciento de los hombres de ascendencia del norte de Europa tiene problemas para distinguir el rojo del verde, la cifra habitual de "1 de cada 12 hombres". Para ellos, y para cualquiera que use el móvil bajo el sol, un borde rojo es un borde gris.
Así que un estado necesita tres señales: un color, un icono delante y palabras que digan qué hacer. Es la WCAG 1.4.1, uso del color: el color puede apoyar un mensaje, nunca ser la única forma de darlo. La paleta completa de errores está en nuestro paper sobre el color de los mensajes de error.
3. Tiñe las áreas grandes
Hazte Pro por $4
Mapas sin conexión, sin anuncios y para compartir viajes.
Mejorar✕ Junior: toda la tarjeta a todo color
Hazte Pro por $4
Mapas sin conexión, sin anuncios y para compartir viajes.
Mejorar✓ Senior: un tinte, y color pleno en el botón
Un gran bloque de color a plena intensidad es estridente y gasta tu acento. Entonces el botón que va dentro no tiene con qué destacar, porque todo a su alrededor ya es del mismo color.
Tiñe el área grande y reserva el color pleno para la parte que hace el trabajo. Aquí la tarjeta usa #E6DDFF, un paso pálido del mismo violeta, y el botón es el #6440E0 completo. Haz lo mismo con banners, filas seleccionadas y secciones destacadas. Nuestro paper sobre paletas de color de marca muestra cómo construir los pasos de tinte desde un solo matiz.
4. Oscurece el texto de acento
Violeta claro sobre blanco
Violeta más oscuro sobre blanco
Un color de marca claro sirve como relleno y flojea como texto. #9A79FC se ve amigable en un botón y se desmorona como enlace de 14 px sobre blanco. El arreglo mantiene el matiz y baja la luminosidad: #6440E0 es el mismo violeta, con la profundidad justa para leerse.
Para quien tenga que defender la decisión: #9A79FC sobre blanco da 3.22 a 1, por debajo del 4.5 a 1 que la WCAG pide al texto, y #6440E0 da 6.27 a 1. Nuestro paper sobre contraste de color accesible explica los números y cómo comprobarlos.
Mantén dos versiones de cada color de marca: la brillante para rellenos e ilustración, y la más profunda para texto e iconos finos.
5. Texto oscuro sobre amarillo
Blanco sobre amarillo
Oscuro sobre amarillo
El amarillo y los colores claros son brillantes por naturaleza, así que el blanco sobre ellos casi no tiene diferencia de luminosidad. Blanco sobre #FED480 es 1.41 a 1. Un casi negro como #161513 sobre el mismo amarillo es 12.99 a 1.
La regla vale para todo relleno claro: amarillo pálido, menta, azul cielo, melocotón. Si el fondo es claro, el texto es oscuro. Se siente al revés para un diseñador acostumbrado al blanco sobre color de marca, y es una de las formas más rápidas de que un botón se vea profesional.
6. Un tono por estado
Por defecto
Pulsado
Deshabilitado
Un botón que se ve igual pulsado que en reposo no da ningún feedback, y un botón deshabilitado pintado del mismo color que uno activo parece roto. Dale a cada estado su propio tono del mismo matiz: #6440E0 por defecto, #4422B2 al pulsar, y un tinte pálido como #E6DDFF con una etiqueta #9A79FC legible cuando está deshabilitado.
Deshabilitado es el único estado donde el bajo contraste es aceptable, y la WCAG lo exime, pero la etiqueta debe seguir siendo lo bastante legible para que se entienda qué haría el botón. El mismo conjunto de tres tonos sirve para enlaces, pestañas e interruptores.
Los seis arreglos en una tabla
| Junior | Senior | El valor |
|---|---|---|
| Muchos acentos | Un acento, para la acción | #6440E0 en lo único que hay que tocar |
| Solo color | Color, icono y palabras | Nunca la única señal |
| Áreas a todo color | Áreas teñidas | #E6DDFF de fondo, #6440E0 en el botón |
| Color de marca claro como texto | Texto de acento más oscuro | #6440E0, no #9A79FC |
| Blanco sobre amarillo | Texto oscuro sobre amarillo | #161513 sobre #FED480 |
| Un tono para todos los estados | Un tono por estado | #6440E0, #4422B2, #E6DDFF con etiqueta #9A79FC |
FAQ
¿Qué hace que una paleta de colores de UI parezca amateur?
Demasiados acentos, color usado solo para transmitir significado, rellenos a plena intensidad en áreas grandes y colores de marca claros usados para texto. Arreglar esos cuatro suele importar más que cambiar la paleta en sí.
¿Cuántos colores de acento debería tener una UI?
Uno. Úsalo solo para lo que la gente puede tocar o accionar, y deja todo lo demás en neutro. Los colores de estado, como el rojo para errores, son aparte, y siempre van con un icono y palabras.
¿Qué color de texto va sobre un fondo amarillo?
Uno oscuro. #161513 sobre #FED480 da cerca de 13 a 1, mientras que el blanco sobre el mismo amarillo da cerca de 1.4 a 1. Lo mismo vale para cualquier fondo claro.
¿Cómo hago legible como texto un color de marca claro?
Mantén el matiz y baja la luminosidad. #9A79FC da cerca de 3.2 a 1 sobre blanco, y #6440E0, el mismo violeta, da cerca de 6.3 a 1.
¿De qué color debe ser un botón pulsado?
Un tono más oscuro del predeterminado, como #4422B2 frente a #6440E0. Le da a la gente feedback de que el toque se registró, sin cambiar el matiz.
¿Los botones deshabilitados deben cumplir los requisitos de contraste?
La WCAG exime a los controles deshabilitados del contraste mínimo, pero mantén la etiqueta legible para que se entienda qué hace el botón.
Fuentes
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4.5 a 1 para texto, componentes deshabilitados exentos) y 1.4.1 Use of Color.
- Ratios calculados con la fórmula de luminancia relativa de la WCAG: #9A79FC sobre #FFFFFF 3.22 a 1, #6440E0 sobre #FFFFFF 6.27 a 1 (ambos con matiz de unos 254 grados), #FFFFFF sobre #FED480 1.41 a 1, #161513 sobre #FED480 12.99 a 1.
- La deficiencia de visión rojo-verde afecta a cerca del 8 por ciento de los hombres de ascendencia del norte de Europa, según el National Eye Institute.
- Los tonos de estado (#4422B2 pulsado, #E6DDFF con etiqueta #9A79FC deshabilitado) son de nuestra propia paleta. Los colores de filtro de la sección 1 son ilustrativos.
- Publicado por primera vez como carrusel en UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
