Personnaliser les couleurs de votre plateforme

  • Mise à jour

Qui peut utiliser cette fonctionnalité ?

  • Les administrateurs plateforme peuvent personnaliser les couleurs de la plateforme pour tous les groupes.
  • Sur les plateformes avec la solution Customization, les administrateurs de groupe peuvent personnaliser les couleurs de chaque groupe. Les couleurs sont automatiquement appliquées aux sous-groupes, à l'exception des groupes qui n'ont pas déjà de couleurs personnalisées et de leurs sous-groupes.
  • Cette fonctionnalité est uniquement disponible sur l'application Web.

Les administrateurs peuvent contrôler l’apparence de leur plateforme en modifiant les couleurs à 3 endroits :

  • La couleur principale : utilisée par les boutons, les fenêtres contextuelles ou messages d’avertissement, les notifications mail, les bouton de navigation en haut de la page d’accueil, les liens et les éléments sélectionnés.
  • La barre latérale : dans 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 d’accueil, des pages 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.

Si vous ne voyez pas de changement dans les couleurs après avoir modifié les paramètres, cela peut être lié à l’activation du CSS sur votre plateforme. Contactez le propriétaire de votre plateforme pour en savoir plus.

Modifier les couleurs de la plateforme

  1. Dans la barre de gauche, cliquez sur le groupe plateforme (avec la couronne en bas à droite de son icône).
    • Sur les plateformes avec la solution Customization, vous pouvez modifier les couleurs dans n’importe quel 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 éventuellement 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 d’accueil, 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.

Si besoin, voici les valeurs par défaut de la plateforme :

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

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 : 3 sur 6

Vous avez d’autres questions ? Envoyer une demande