Personnaliser les couleurs d'un groupe

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, les notifications mail, les boutons de navigation en haut de la page de groupe, les liens, les éléments sélectionnés et les labels de filtres.
• La couleur de fond : utilisée pour l’arrière plan de la section centrale sur la page de groupe et la page de profil. La couleur de fond n’est pas visible dans la page de résultats de recherche, ni lors de la lecture ou de la modification de contenu de formation.
• La barre latérale : cette couleur apparaît sur la barre de navigation latérale sur toutes les pages relatives au groupe, sauf lors de la lecture de contenu de formation.
• La couleur de fond de la section "Mon travail" : utilisée pour l'arrière-plan de la section Mon travail sur la page d'accueil.
  • Si un apprenant est membre de plusieurs groupes avec des couleurs différentes, les couleurs qu'il verra sur sa page d'accueil seront basées sur leur plus proche ancêtre commun privé ou sur leur groupe principal. Pour plus d'informations, voir Propagation des couleurs dans les groupes.

Modifier les couleurs d'un groupe

1. Dans la barre de gauche, survolez un groupe et cliquez sur  Paramètres.

   • Si Paramètres n’apparaît pas dans votre barre latérale, cliquez d’abord sur le groupe, puis sur Paramètres en haut à droite de la section principale.

2. Dans la barre de gauche, cliquez sur Identité visuelle.

3. Cliquez sur le champ en dessous de Couleur principale, Couleur de fond, Couleur de fond de la section "Mon travail" ou Barre latérale pour modifier la couleur.

   • Pour utiliser un code HEX, cliquez sur le côté droit du champ et entrez le code directement.
     
   • Pour utiliser l'outil pipette, cliquez sur l'aperçu de couleur à gauche du champ, changez le spectre, puis cliquez quelque part dans la zone de couleur. Ensuite, cliquez en dehors du menu.
     
   • Pour utiliser un code RVB ou HSL, cliquez sur l'aperçu de la couleur à gauche du champ, puis entrez la valeur dans les champs. Cliquez ensuite en dehors du menu.
     

   Si vous sélectionnez une couleur de fond de plateforme avec un contraste insuffisant par rapport à la couleur principale, la plateforme affichera un avertissement. Vous pouvez toujours appliquer les couleurs sélectionnées, mais le résultat pourrait affecter la lisibilité et l'accessibilité. Pour plus d'informations, consultez Contraste.

4. En bas à droite, cliquez sur Prévisualiser pour voir un aperçu de la page d'accueil, le menu de navigation de gauche et les notifications par email. Vous pouvez cliquer sur Annuler pour restaurer les valeurs précédentes.

5. Si les nouvelles couleurs vous plaisent, cliquez sur Appliquer.

La plateforme adapte les couleurs du texte et des icônes pour assurer le meilleur contraste avec la couleur de fond de la plateforme, conformément aux Web Content Accessibility 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, les valeurs par défaut suivantes seront utilisées :

• Couleur principale : #1E57D1
• Couleur de fond : #FFFFFF
• Couleur de fond de la section "Mon travail": #F7F4EE
• Barre latérale : #FFFFFF

Réinitialiser les couleurs pour qu’elles correspondent au groupe parent

Pour appliquer les couleurs du groupe parent à un groupe et à ses sous-groupes (à l’exception de ceux ayant des couleurs personnalisées) :

1. Dans la barre de gauche, survolez un groupe et cliquez sur  Paramètres.
   • Si Paramètres n’apparaît pas dans votre barre latérale, cliquez d’abord sur le groupe, puis sur Paramètres en haut à droite de la section principale.
2. Dans la barre de gauche, cliquez sur Identité visuelle.
3. Cliquez sur Appliquer les valeurs du parent.
   • Si le bouton Appliquer les valeurs du parent est désactivé, essayez de modifier temporairement la valeur d’une couleur.
4. En bas à droite, cliquez sur Prévisualiser pour voir les modifications sur la page d'accueil, le menu de navigation de gauche et les notifications par email. Vous pouvez cliquer sur Annuler pour restaurer les valeurs précédentes.
5. Si les nouvelles couleurs vous plaisent, cliquez sur Appliquer.

La réinitialisation des couleurs se propagera automatiquement aux sous-groupes, jusqu’à ce que la propagation atteigne un sous-groupe qui possède sa propre identité visuelle personnalisée.

Le bouton Appliquer les valeurs du parent n'est pas affiché pour le groupe plateforme, car il n'a pas de groupe parent dont hériter les schémas de couleurs.

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 ;
• la page de profil des utilisateurs ;
• 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.

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, consultez Modifier le groupe principal dans le profil d'un apprenant.

Contraste

Le contraste de couleur fait référence à la différence de luminance, ou d'intensité lumineuse, entre 2 couleurs adjacentes sur un écran. Une formule mathématique mesure le contraste sur une échelle de 1:1 à 21:1, les valeurs les plus élevées indiquant un meilleur 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.

Les Web Content Accessibility Guidelines (WCAG) définissent des ratios de contraste minimum pour 3 niveaux de conformité :

• 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 :
   • Vérificateur de contraste WebAIM
   • Vérificateur de contraste des couleurs WCAG
   • Extension Chrome Colour Contrast Checker
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 s'applique actuellement aux notifications par email suivantes :

• [Utilisateur] vous a invité à traduire un module
• [Utilisateur] vous invite à rejoindre l'espace de formation
• [Utilisateur] vous invite à rejoindre l'espace de formation de [Nom du groupe]
• Rappel : Vous avez été invité à rejoindre l'espace de formation [nom du groupe]
• [Apprenant] vient d'atteindre : [étape d'évaluation]
• Recommandé pour vous : [Nom d'utilisateur]
• Vous avez été inscrit(e) au chemin [nom du chemin]
• [Apprenant] a complété le chemin "[Nom du chemin]"
• Une session de chemin vient de se terminer
• [Rappel] Votre essai gratuit expire dans 5 jours
• [Dernier rappel] Votre essai gratuit a expiré