Personnaliser les couleurs de votre plateforme

Vous pouvez personnaliser les couleurs de la plateforme à 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 dotées de la solution Customization, vous pouvez personnaliser les couleurs de chaque groupe. Pour plus d’informations, consultez Personnaliser les couleurs d’un groupe.
2. En haut à droite, cliquez sur  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.
     
   • 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.
     
   • 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.
     

   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.

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 

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 :
   • WebAIM Contrast Checker
   • WCAG Color Contrast Checker
   • Colour Contrast Checker Chrome Extension
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 :

• [L’utilisateur] vous invite à rejoindre l'espace de formation
• [L’utilisateur] vous invite à rejoindre l'espace de formation
• [L’utilisateur] vous invite à rejoindre l'espace de formation [nom du groupe]
• Rappel : Vous avez été invité à rejoindre l'espace de formation [nom du groupe]
• [L’utilisateur] vient d'atteindre : [étape d’évaluation]
• Recommandé pour vous : [L’utilisateur]
• Vous avez été invité au chemin [nom du chemin]
• [L’utilisateur] a complété le chemin "[nom du chemin]"
• Une session de chemin se termine
• [Rappel] Votre essai gratuit expire dans 5 jours
• [Dernier rappel] Votre essai gratuit a expiré