Prototype – données fictivesPersonnalisé aux couleurs d’AUTAL exclusivement pour la présentation à AUTAL. Confidentiel – ne pas diffuser. N’entrez aucun renseignement personnel.

Avis de confidentialité

Ce prototype est personnalisé aux couleurs d’AUTAL exclusivement pour la présentation à AUTAL. Confidentiel – ne pas diffuser. Données fictives.

Il appartient à Adssys : ne le partagez pas et n’en diffusez pas de captures sans autorisation. N’y saisissez aucun renseignement personnel réel.

AUTALAssociation des usagers du transport adapté de Longueuil
English

Sophie TremblayCoordonnatrice · Administratrice

Mon compteSe déconnecter

Image de marque

Adaptez le nom, le logo et les couleurs à votre organisme. Les combinaisons de couleurs trop peu contrastées sont refusées, pour que l’application reste lisible pour tous.

Sans JavaScript, ce formulaire est présenté à titre indicatif : l’aperçu et la vérification du contraste montrent les valeurs par défaut d’AUTAL. Dans l’application réelle, les paramètres sont enregistrés sur le serveur pour tout l’organisme et vérifiés à nouveau avant l’enregistrement.

Identité
Affiché en gros dans l’en-tête. 12 caractères maximum.
Logo
Facultatif. SVG ou PNG, 300 Ko maximum, de préférence carré. Sans fichier, le logo AUTAL est utilisé.
Obligatoire si vous téléversez un logo. Décrivez le logo en quelques mots, par exemple « Logo d’AUTAL ». Dans l’en-tête, le nom de l’organisme est déjà écrit à côté du logo : le logo y est donc traité comme décoratif pour éviter une double lecture ; ce texte sert là où le logo apparaît seul (aperçu, courriels, reçus, rapport annuel).
Couleurs

Format hexadécimal, par exemple #0B4F6C. Vous pouvez coller une valeur.

Boutons, liens, menu actif.
Logo, bandeau, avatar.
Le texte y est blanc.
Vérification du contraste (WCAG 2.2 AA)Recalculé à chaque modification. Un résultat « Insuffisant » bloque l’enregistrement.
CombinaisonUtilisationRapportMinimumRésultat
Texte blanc sur la couleur principaleBoutons8,94:14,5:1 (texte)Conforme
Couleur principale sur le fond de pageLiens, titres de tableaux8,18:14,5:1 (texte)Conforme
Couleur principale sur sa teinte claireMenu : page active, survol7,33:14,5:1 (texte)Conforme
Texte foncé sur la couleur d’accentBandeau du prototype, avatar11,36:14,5:1 (texte)Conforme
Texte blanc sur l’en-tête et le pied de pageNom, liens de l’en-tête et du pied de page14,07:14,5:1 (texte)Conforme
Accent sur l’en-têteLogo, éléments graphiques (1.4.11)9,75:13:1 (graphique)Conforme
Halo de focus sur l’en-tête et le pied de pageIndicateur de focus (1.4.11, 2.4.7)8,57:13:1 (graphique)Conforme

Aperçu

L’aperçu change pendant que vous modifiez les valeurs ; le reste du site change seulement après l’enregistrement.

Prototype – données fictives
AUTALAssociation des usagers du transport adapté de LongueuilFocus

Exemple de lien

Bouton principal

Menu : page active

Pied de page · Plan du site

Texte de remplacement du logo dans l’aperçu et les documents : (aucun logo téléversé : logo AUTAL par défaut)

Note de prototype : avec JavaScript, l’image de marque est gardée dans ce navigateur seulement (localStorage) et appliquée à toutes les pages au moyen de variables CSS. Le thème AUTAL par défaut utilise les mêmes variables.