Los botones de feedback de Sí y No al final de cada artículo aparecen grises por defecto cuando los lectores no están pasando el cursor por encima. Este valor predeterminado de bajo contraste puede hacer que los botones sean más difíciles de notar, reduciendo la probabilidad de que los lectores interactúen con ellos. Puedes anular los colores predeterminados de los botones usando un fragmento CSS para hacerlos más visibles, coincidir con los colores de tu marca o crear una distinción visual más clara entre las opciones de feedback positivo y negativo.
Cuándo usar esto
Utiliza esta personalización cuando quieras:
- Haz que los botones de feedback sean más visibles para que los lectores tengan más probabilidades de interactuar con ellos.
- Aplica colores de marca a los botones de Sí y No para crear una experiencia visual consistente.
- Diferencia los botones de Sí y No con colores distintos, por ejemplo, verde para Sí y rojo para No, para reforzar su significado de un vistazo.
Antes de que empieces
- Necesitas acceso a Configuración () > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.
- Ten los códigos de color HEX que deseas listos antes de empezar. El fragmento por defecto usa
#5ebf83(verde) para Sí y#e67367(rojo/naranja) para No.
Cómo cambiar el color predeterminado del botón de feedback
-
Navega a Configuración (
) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.
-
Desde el panel de navegación izquierdo, selecciona la pestaña CSS y pega el siguiente fragmento:
.article-feedback-action{
button[aria-label="Yes"]{
background-color: #5ebf83;
color: white;
}
button[aria-label="No"]{
background-color: #e67367;
color: white;
}
}
-
Actualiza los códigos de colores a los valores que deseas.
-
Haz clic en Guardar.
Resultado
Antes
Los botones de retroalimentación aparecen grises cuando los lectores no están sobre ellos, lo que hace que sea fácil pasarlos por alto.
Después
Tras aplicar el CSS, los botones de retroalimentación se muestran en los colores especificados en todo momento, no solo al pasar el cursor.
Mejores prácticas
- Mantén el Sí y el No visualmente distintos. Los lectores procesan rápidamente la semántica del color. Usar verde para Sí y rojo o naranja para No sigue la convención establecida y reduce el esfuerzo cognitivo. Evita usar colores similares para ambos botones.
- Comprueba el contraste con el fondo de tu página. Los colores de los botones que elijas deberían ser legibles tanto contra fondos en modo Claro como Oscuro. Usa un comprobador de contraste para verificar que tus elecciones cumplen con los estándares WCAG AA (mínimo 3:1 para componentes de la interfaz).
- Prueba después de guardar. Abre un artículo en tu base de conocimientos y confirma que los botones se muestran en los colores correctos tanto en su estado predeterminado como en el paso del cursor.