Recherche

Personnaliser les couleurs d'un groupe

  • Mise à jour

Qui peut utiliser cette fonctionnalité ?

  • Les administrateurs plateforme et les administrateurs de groupe peuvent personnaliser les couleurs de leurs groupes.
  • Cette fonctionnalité nécessite la solution Customization. Contactez votre Client Success Partner (CSP) pour plus d’informations.
  • Cette fonctionnalité est uniquement disponible sur l'application Web.

Vous pouvez personnaliser les couleurs dans les pages de groupe à 3 endroits :

  • La couleur principale : utilisée par les boutons dans les pages de groupe, les fenêtres contextuelles, et les notifications mail, les boutons de navigation en haut de la page de groupe, les liens et les éléments sélectionnés.
  • La barre latérale : la couleur de fond de la barre de navigation à gauche, visible partout sauf lorsque vous êtes à l’intérieur d’une formation.
  • La couleur de fond : utilisée pour l’arrière plan de la section principale de la page de groupe et des pages de profil. La couleur de fond n’est pas visible dans la page de résultats de recherche, ni en jouant ou modifiant des contenus de formation.

Modifier les couleurs d'un groupe

  1. Dans la colonne de gauche, cliquez sur un groupe.
  2. En haut à droite, cliquez sur gear cog.svg Paramètres.
  3. Dans la barre de gauche, cliquez sur Identité visuelle.
  4. Cliquez sur le champ en dessous de Couleur principale, Barre latérale ou Couleur de fond pour modifier la couleur.
      • Pour utiliser un code HEX, cliquez sur la droite du champ, et entrez le code directement.
        HEX color.gif
      • Pour utiliser la pipette colorimétrique, cliquez sur l’aperçu de la couleur dans la partie gauche du champ, modifiez l’échelle du spectre colorimétrique et cliquez quelque part dans la zone de couleur. Puis, cliquez en dehors du menu.
        eyedrop.gif
      • Pour utiliser un code RGB ou HSL, cliquez sur l’aperçu de la couleur dans la partie gauche du champ, et entrez les valeurs dans le champ. Puis, cliquez en dehors du menu.
        RGB.gif

    Si votre couleur de fond n’est pas suffisamment contrastée par rapport à la couleur principale, nous afficherons un avertissement. Vous pourrez toujours appliquer vos couleurs, mais le résultat pourra rendre votre plateforme moins lisible et moins accessible. Voir la section Contraste.

  5. En bas à droite, cliquez sur PRÉVISUALISER pour voir un aperçu de la nouvelle couleur sur la page de groupe, la barre de navigation de gauche, et les notifications mail. Vous pouvez cliquer sur EFFACER pour restaurer les valeurs précédentes.
  6. Si les nouvelles couleurs vous plaisent, cliquez sur APPLIQUER.

La plateforme adapte le texte et la couleur des icônes pour garantir le meilleur taux de contraste avec la couleur de fond de la plateforme, conformément aux Web Content Acessibility Guidelines (WCAG) :

  • Si la couleur de fond de la plateforme est sombre, le texte et les icônes seront en blanc.
  • Si la couleur de fond de la plateforme est claire, le texte et les icônes seront en noir.

Couleurs par défaut de la plateforme

Si vous n'avez pas personnalisé les couleurs de votre plateforme, elle utilisera les valeurs par défaut.

À partir du 31 juillet 2024, de nouvelles couleurs par défaut sont mises en place pour les plateformes nouvelles et génériques dans le cadre de notre nouvelle initiative de branding. Si vous préférez conserver les couleurs par défaut précédentes, vous pouvez personnaliser votre plateforme en utilisant les anciennes valeurs par défaut.

Anciennes couleurs par défaut (avant le 31 juillet 2024) :

  • Couleur principale : #2567F4 
  • Barre latérale : #FAFAFD 

Nouvelles couleurs par défaut (à partir du 31 juillet 2024) :

  • Couleur principale : #212227 
  • Barre latérale : #FBF6F2 

Propagation des couleurs dans les groupes

Lorsque vous personnalisez les couleurs d’un groupe, l'apparence s'applique automatiquement aux sous-groupes auxquels aucune autre apparence n’est déjà appliquée.

Cependant, certaines notifications et pages ne sont liées à aucun groupe :

  • la page d'accueil ;
  • les résultats de recherche ;
  • les pages de profil ;
  • les pages où vous jouez ou éditez un module ;
  • les pages où vous jouez ou éditez un chemin.

Si un apprenant est membre de plusieurs groupes avec des apparences différentes, par défaut, les couleurs de l'ancêtre commun privé le plus bas s'appliquent aux pages qui ne sont liées à aucun groupe. L'ancêtre commun privé le plus bas d'un utilisateur est le groupe parent privé le plus bas de tous les groupes auxquels appartient l'utilisateur.

Le diagramme suivant montre une hiérarchie de groupes, où les groupes privés sont représentés par un verrou.

Group hierarchy-Group page branding.svg

Dans l’exemple ci-dessus, chaque groupe a des couleurs de plateforme différentes.

  • Ada est membre du groupe A (public) et du groupe A.1 (public). Elle est automatiquement ajoutée au parent privé le plus bas de ces 2 groupes : groupe X (privé). Sur sa plateforme, les pages qui ne sont liées à aucun groupe, comme la page d'accueil, sont affichées avec les couleurs du groupe X.
  • Etta est membre du groupe B (privé) et du groupe B.1 (public). Sur sa plateforme, les pages qui ne sont liées à aucun groupe, comme la page d'accueil, sont affichées avec les couleurs du groupe B.
  • Joe est membre du groupe B (privé), du groupe B.2 (public) et du groupe C (privé). Le groupe ancêtre commun privé le plus bas de Joe est le groupe X. Sur sa plateforme, les pages qui ne sont liées à aucun groupe, comme la page d'accueil, sont affichées avec les couleurs du groupe X.

Vous pouvez choisir d'appliquer les couleurs d'un groupe spécifique aux pages qui ne sont liées à aucun groupe sur la plateforme d'un apprenant donné. Pour plus d'informations, voir Modifier le groupe principal dans le profil d'un apprenant.

Contraste

Le taux de contraste est une indication de la différence d’intensité de lumière (la luminance) émise entre deux couleurs adjacentes sur un écran. Une formule mathématique mesure le taux de contraste, sur une échelle allant de 1:1 à 21:1 (plus la différence entre les deux nombres est élevée, meilleur est le contraste).

Lorsque vous choisissez les couleurs de votre plateforme, gardez à l’esprit que le taux de contraste entre la couleur principale et la couleur de fond aura des conséquences sur la lisibilité de votre plateforme. Un contraste suffisant permet une meilleure expérience pour tous·tes — qu’il s’agisse de personnes avec un handicap visuel, ou qui utilisent un appareil avec un petit écran, ou en plein soleil du désert à midi.

Le standard Web Content Accessibility Guidelines (WCAG) définit trois niveaux de conformité pour le taux de contraste :

  • A : minimum. Aucun taux de contraste minimum n’est requis.
  • AA : acceptable. Taux de contraste supérieur à 4.5:1.
  • AAA : optimal. Taux de contraste supérieur à 7:1.

Nous recommandons un taux de contraste d’au moins 4.5:1 (« acceptable », d’après le standard WCAG), mais les exigences de conformité de votre entreprise peuvent nécessiter un niveau plus élevé.

Pour mesurer le taux de contraste entre votre couleur principale et couleur de fond :

  1. Lancez une appli de mesure de contraste, par exemple :
  2. Dans les champs correspondant à Foreground et Background, entrez les code HEX des couleurs de votre couleur principale et couleur de fond.
  3. Si le taux de contraste est inférieur à 4.5:1, il est en dessous du niveau de conformité AA (« acceptable »).

Lorsque vous sélectionnez la couleur de fond, la plateforme adapte automatiquement le texte et la couleur des icônes pour avoir le meilleur taux de contraste.

Liste des notifications mail dont la couleur du bouton est personnalisable

La personnalisation est visible sur les notifications mail suivantes :

Visitez notre blog pour plus de ressources sur le Collaborative Learning.

Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 0 sur 0

Vous avez d’autres questions ? Envoyer une demande