Comprendre la personnalisation des couleurs du Sign-In Widget

Le Sign-In Widget détermine ses couleurs en fonction de la Couleur principale de votre marque et de sa conformité aux normes d'accessibilité WCAG 1.4.3. Pour plus d'informations sur la création et la personnalisation d'une marque, consultez branding.

Couleurs d'état du bouton dans le Sign-in Widget (3e génération)

Le Sign-In Widget Okta (troisième génération) modifie la couleur des boutons en fonction des interactions utilisateurs, comme le survol et le clic. Okta génère une gamme de couleurs qui utilise des variations de votre Couleur principale pour ces différents états de bouton.

Par exemple, si vous sélectionnez #638015 comme Couleur primaire, Okta génère la gamme suivante :

  • Couleur primaire : #638015, Nom du jeton : PaletPrimaryPrincipal

  • Survol du bouton : #464F2E, Nom du jeton : PaletPrimaryDark

  • Button click : #343A22, Nom du jeton : PaletPrimaryDarker

La valeur hexadécimale de la Couleur principale choisie peut être trop sombre ou trop claire. Si tel est le cas, il n'y a pas suffisamment d'ombres dans la gamme pour produire des couleurs correspondant aux différents états des boutons. Dans ce cas, SIW produit une couleur principale ajustée pour garantir la génération d'une gamme complète. La couleur principale ajustée est ce qui est affiché sur le bouton SIW rendu.

Dans l'image suivante, la Couleur primaire est définie sur #5c0606. Cette couleur est trop sombre pour générer une gamme. Une couleur principale plus claire est donc choisie : #9C6969. Une gamme peut être générée à l'aide de cette couleur principale ajustée.

  • Couleur principale : #5C0606

  • Couleur primaire ajustée : #9C6969, Nom du jeton : PalettePrimaryMain

  • Survol du bouton : #7B3535, Nom du jeton : PalettePrimaryDark

  • Clic sur le bouton : #6A1B1B, Nom du jeton : PalettePrimaryDarker

Conformité de la couleur du texte et de l'accessibilité dans le Sign-In Widget

Le Sign-In Widget assure la conformité à la norme sur l'accessibilité WCAG 1.4.3, ce qui signifie que la couleur du texte du bouton doit maintenir un rapport de contraste minimum de 4,5:1 par rapport à l'arrière-plan du bouton. Les deux générations du Sign-In Widget garantissent que la couleur du texte répond aux normes d'accessibilité. La deuxième génération transforme le texte du bouton en blanc si le texte blanc n'offre pas suffisamment de contraste. La troisième génération ajuste la Couleur primaire pour trouver un contraste de texte approprié.

Couleur du texte du bouton du Sign-In Widget (3e génération)

Le texte du bouton du Sign-In Widget (troisième génération) est toujours blanc. Parfois, la Couleur primaire choisie est trop sombre ou trop claire pour offrir un contraste suffisant par rapport au texte du bouton blanc. Si cela se produit, le Sign-In Widget (troisième génération) remplace la Couleur primaire par une couleur primaire ajustée qui respecte le rapport de contraste minimal de 4,5:1.

Exemple : si vous choisissez #96C21F comme Couleur primaire, le taux de contraste par rapport au texte blanc (#FFFFFF) est de 2.09:1 (<4.5:1). Le Sign-In Widget (troisième génération) ajuste la Couleur primaire à #638015 pour garantir un rapport de contraste de 4.53:1 (>4.5:1) pour le texte du bouton.

Couleur du texte du bouton du Sign-In Widget (seconde génération)

Le texte du bouton du Sign-In Widget (seconde génération) peut être blanc ou noir. Par défaut, le SIW utilise du texte blanc. Parfois, la Couleur primaire choisie entraîne un rapport de contraste par rapport au texte blanc inférieur à 4,5:1. Lorsque cela se produit, le SIW change la couleur de contraste principale (couleur du texte) à noir pour garantir la conformité de l'accessibilité.

Exemple : Si vous choisissez #6B8A16 comme Couleur primaire, son rapport de contraste par rapport au blanc (#FFFFFF) sera de 3.98:1 (<4.5:1). Le Sign-In Widget (seconde génération) change donc la couleur de contraste principale en noir (#000000) pour obtenir un rapport de contraste de 5,27:1 (>4.5:1).