Restricciones de color de entrada del usuario

¿Cuál es una restricción apropiada para colocar en una gama de colores para colores definidos por el usuario?

Estoy ayudando a construir un sitio web que ofrecerá a las organizaciones crear sus propias páginas. Queremos permitirles la opción de personalizar el color de fondo, así como el color 'resaltado' en su página.

El color 'resaltado' define el color de todos los íconos y botones en su página. Debido a esto, no podemos permitir que el color de realce sea demasiado claro/débil/brillante.

Ofrecemos la siguiente interfaz de usuario para elegir un color:

adaptación de https://bgrins.github.io/spectrum/#details-ieImplementation

adaptación de https://bgrins.github.io/spectrum/#details-ieImplementation

Puede ver que el color seleccionado se refleja en el botón "elegir" y también se aplicaría a otros botones en la interfaz de usuario.

Mi plan potencialmente ingenuo era restringir el espectro de color de dos maneras diferentes:

  1. Evalúe el color seleccionado en RGB: compruebe si el valor combinado de R, G y B es inferior a 255 (en una escala de 0 a 255)

  2. Evalúe el color seleccionado en HSL: extraiga el valor L (luminancia o luminosidad) y compruebe si el valor es inferior a 0,5

Cuando un usuario selecciona un color que no está en el rango adecuado, aparece un mensaje de error para notificar que debe seleccionar un color más oscuro.

Esta implementación parece funcionar bastante bien. Todos los colores brillantes quedan atrapados por las restricciones anteriores con algunas excepciones (el verde completo parece más brillante para mis ojos que el rojo completo, por ejemplo... no estoy seguro de por qué)

Mi pregunta es si existe una restricción estándar que se aplica a selecciones similares. ¿Hay alguna forma mejor de evaluar y restringir los colores seleccionados?

OT, pero la razón por la que 0x00FF00 se ve más brillante que 0xFF0000 es que el ojo humano es más sensible a la luz verde y menos sensible a la luz roja. Esta es también la razón por la que el verde suele ser más difícil de ver sobre fondos blancos, y el rojo es más difícil de ver sobre fondos negros.
¿Pueden elegir un fondo oscuro? Si es así, restringirlos a reflejos oscuros no funcionaría. Es posible que quieran que se vea como modo nocturno/terminal/geociudades de los 90.
@ChrisH hemos diseñado nuestro contenido para que todo esté envuelto en "tarjetas" en escala de grises que son ligeramente translúcidas. Por lo tanto, el contenido no se ve realmente afectado por la selección del color de fondo, solo agrega un toque de color para rodear el contenido.

Respuestas (2)

Me mantendría alejado de mostrar todas las opciones de color en un selector de color como este por un par de razones: 1) es frustrante para un usuario ver (o incluso elegir) opciones que finalmente no puede tener. Y lo que es más importante, 2) la mayoría de las personas se confundirían con esta configuración, al menos inicialmente. Si un usuario está usando su producto en primer lugar, es probable que prefiera algo más simple pero menos poderoso.

Lo que recomendaría en cambio es darles la opción de colores prefabricados o darles la opción de paletas prefabricadas (combinaciones de colores). Opcionalmente, también podría permitir la personalización más tarde o más oculta para más "usuarios avanzados". Hago cosas como esta en mis aplicaciones todo el tiempo. Al hacer esto, puede tener un control más completo sin frustrar a los usuarios (con tanta frecuencia).

Voy a ser muy franco.

Queremos permitirles la opción de personalizar el color de fondo, así como el color 'resaltado' en su página.

No. En serio, no lo hagas. A menos que esté seguro de que los editores del sitio conocen muy bien la teoría del color y conocen la paleta de colores general del sitio, dar a sus usuarios control sobre el color es una mala idea™.

Le aconsejo que cree una serie de paletas preseleccionadas, de las cuales el cliente puede elegir como un conjunto . #ff0000De esta manera, le das al usuario la idea de elección y libertad, sin tener la posibilidad de naufragios como #00ff00ese, créeme, tu usuario querrá elegir en algún momento. Sus reglas propuestas solo los frustrarán, porque pueden ver los colores en la GUI pero no pueden elegirlos.

¡Gracias por los comentarios, y gracias a Zach también! Entiendo cómo dar a los usuarios finales tanto control sobre su selección de colores permite algunas opciones bastante terribles. Sin embargo, lo contrario es que una paleta es bastante restrictiva en sus opciones. Podemos (y hemos) ideado paletas que se verían muy bien en nuestro sitio. Pero el verdadero objetivo de esta personalización es que los usuarios puedan elegir colores que coincidan con su marca. Otra idea que tuvimos fue permitirles elegir su color de resaltado y generar automáticamente un color de fondo basado en su selección.
@ user3915135 Ese enfoque de generar un color de fondo para ellos también es válido, aunque en mi opinión todavía es restrictivo porque no pueden elegir diferentes estilos de fondo (el mismo color primario puede funcionar con muchos colores de fondo a veces). De cualquier manera que elija, hay pros y contras.
@ZachSaucier exactamente. Sopesaremos esos pros y contras y determinaremos a partir de aquí qué solución funcionará mejor para nuestros usuarios finales. ¡Gracias por el aporte!
Restricciones de color de entrada del usuario
RespuestasAquíPolítica de privacidad1y, 0v