Site de la commune de Brunstatt-Didenheim · Accessibilité (RGAA 4.1)
Validation des contrastes de couleurs
Certains textes du site sont difficiles à lire pour les personnes malvoyantes. Pour atteindre le niveau exigé par le référentiel d’accessibilité, nous proposons d’assombrir légèrement quelques couleurs. Ce document montre chaque cas, avant et après, pour que vous validiez ou ajustiez chacun.
Ce que mesure le « contraste »
Le contraste compare la clarté du texte à celle de son fond. Il s’exprime en rapport (par exemple 4,5 : 1). Le référentiel demande au minimum 4,5 : 1 pour un texte courant, et 3 : 1 pour un très grand texte (24 px et plus, ou 19 px en gras). Plus le chiffre est élevé, plus le texte est lisible, notamment pour les personnes qui voient mal, par forte luminosité ou sur un écran de téléphone.
Les couleurs « après » ci-dessous sont les plus proches des couleurs actuelles qui atteignent le seuil, avec une petite marge de sécurité. Rien n’est encore modifié sur le site en ligne.
Vue d’ensemble
#
Élément
Avant
Après
Changement visible
1
Bleu principal (pastilles, bandeaux, boutons, titres)
#0087f6 · 3,62
#006dd6 · 5,05
Bleu un peu plus profond
2
Rouge des dates et titres d’actualités
#ef154d · 4,30
#e71047 · 4,60 ou rouge plus franc
À peine perceptible (A), ou plus marqué (B, C)
3
Turquoise au survol (boutons, pastilles, liens)
#2ec4b6 · 2,17
#008476 · 4,60 (B) #007d70 · 5,04 (C)
Net : turquoise plus profond (4 choix, dont l’actuel)
Cas 1 sur 3 · le plus important
Le bleu principal du site
Utilisé pour : les pastilles « Accès rapides » de l’accueil, les bandeaux des actualités, le bouton « Agrandir le plan », les titres bleus sur fond gris, les entrées du menu au survol et le menu du téléphone (48 entrées en blanc sur ce bleu) et le fond du pied de page (calculé à partir de lui). Le texte blanc posé dessus n’atteint que 3,62 : 1 (4,5 : 1 requis).
Avant#0087f6 · 3,62 : 1
Carte d’Identité & Passeport
Travaux Passerelle rue de Dornach
Agrandir le plan
Informations :
Horaires Lundi : 9h à 12h – 13h à 17h Mardi : 9h à 12h – 13h à 18h30 Mercredi : fermé le matin – 13h à 17h
Ma communeSécuritéAide sociale
Ma communeDémarches administrativesCarte d’identité & Passeport
Menu du téléphone
Après (option A)#006dd6 · 5,05 : 1
Carte d’Identité & Passeport
Travaux Passerelle rue de Dornach
Agrandir le plan
Informations :
Horaires Lundi : 9h à 12h – 13h à 17h Mardi : 9h à 12h – 13h à 18h30 Mercredi : fermé le matin – 13h à 17h
Ma communeSécuritéAide sociale
Ma communeDémarches administrativesCarte d’identité & Passeport
Menu du téléphone
Recommandée Option A : un seul bleu
Le bleu #0087f6 devient #006dd6 partout : texte blanc 5,05 : 1 et texte bleu sur fond gris clair 4,55 : 1. Le site reste cohérent, avec une seule couleur à retenir. Le bleu du pied de page, calculé à partir de celui-ci, devient légèrement plus profond (#0057ab, blanc dessus 7,12 : 1).
Option B : changement minimal, deux bleus
#0075df (4,56 : 1) pour les fonds qui portent du texte blanc, et #006dd6 uniquement pour les titres bleus sur fond gris. Le changement est plus discret, mais le site compte ensuite deux bleus proches à maintenir.
Fond #0075dfTitre #006dd6
Option B, cas par cas
Le bleu actuel est conservé partout où il convient déjà. Les emplois ci-dessous passent à un bleu très légèrement plus profond.
Ce qui change
Pastilles « Accès rapides » de l’accueil
Avant
Carte d’Identité & Passeport
Après
Carte d’Identité & Passeport
Titres sur les cartes d’actualités
Avant
Travaux Passerelle rue de Dornach
Après
Travaux Passerelle rue de Dornach
Boutons bleus
Avant
Agrandir le plan
Après
Agrandir le plan
Menu du téléphone
Avant
Ma communeDémarches administrativesSécurité
Après
Ma communeDémarches administrativesSécurité
Titre d’un accordéon ouvert
Avant
Les Pompiers×
Après
Les Pompiers×
Menu sur ordinateur, entrée survolée
Avant
Ma communeSécuritéAide sociale
Après
Ma communeSécuritéAide sociale
Petits textes et liens bleus
Avant
Voir le plan de la commune
Après
Voir le plan de la commune
Titres bleus sur fond gris
Avant
Informations :
Lundi : 9h à 12h Mardi : 9h à 12h
Après
Informations :
Lundi : 9h à 12h Mardi : 9h à 12h
Ce qui ne change pas
Titres de page
Inchangé
Logement
Titre « Accès rapides »
Inchangé
Accès rapides
Filets, bordures et icônes
Inchangé
Contour bleu
Pied de page
Inchangé
Mairie de Brunstatt-Didenheim
Cas 2 sur 3
Les dates et titres d’actualités
Utilisé pour : les bandeaux de date et de titre sur les cartes d’actualités et d’agenda. Le blanc sur le rouge léger actuel atteint 4,30 : 1 (4,5 : 1 requis). Trois propositions, de la plus proche de l’actuel à la plus marquée.
Actuel#ef154d · 4,30 : 1
Du 28 juillet au 15 octobre 2026 :
Travaux Passerelle rue de Dornach Brunstatt
A · proche de l’actuel#e71047 · 4,60 : 1
Du 28 juillet au 15 octobre 2026 :
Travaux Passerelle rue de Dornach Brunstatt
B · rouge vif#e30613 · 4,88 : 1
Du 28 juillet au 15 octobre 2026 :
Travaux Passerelle rue de Dornach Brunstatt
C · rouge plus profond#d9001b · 5,29 : 1
Du 28 juillet au 15 octobre 2026 :
Travaux Passerelle rue de Dornach Brunstatt
Les couleurs côte à côte#ef154d | #e71047 | #e30613 | #d9001b
Actuel
A
B
C
L’option A est la plus discrète : elle garde le caractère du rouge actuel avec un changement à peine visible. Les options B et C vont vers un rouge plus franc.
Cas 3 sur 3 · changement le plus visible
Le turquoise au survol
Utilisé pour : le fond des boutons et des pastilles quand on les survole (dont le bouton « Envoyer le message » du formulaire de contact), et la couleur des liens au survol. Le texte blanc sur ce turquoise n’atteint que 2,17 : 1 : le turquoise est une couleur claire, il faut l’assombrir pour que le blanc reste lisible.
Actuel#2ec4b6 · 2,17 : 1
Calendrier de collecte des déchets
Collecte des déchets
Voir les horaires de la déchetterie
A · intermédiaire#17a496 · 3,09 : 1
Calendrier de collecte des déchets
Collecte des déchets
Voir les horaires de la déchetterie
B · le plus clair qui reste conforme#008476 · 4,60 : 1
Calendrier de collecte des déchets
Collecte des déchets
Voir les horaires de la déchetterie
C · conforme partout#007d70 · 5,04 : 1
Calendrier de collecte des déchets
Collecte des déchets
Voir les horaires de la déchetterie
De l’actuel à C, par étapestexte blanc dessus
Actuel
Aa
A
Aa
Aa
B
C
Le texte blanc devient conforme à partir d’un turquoise déjà assez profond : B est le plus clair qui franchisse le seuil sur fond blanc. Les teintes entre l’actuel et B restent en dessous du seuil pour un texte courant (14 à 17 px) : l’option A est donc montrée à titre de comparaison, sans être conforme. L’option C va un peu plus loin que B : elle reste lisible aussi pour les liens survolés dans les encadrés gris des fiches d’agenda, où B est tout juste en dessous du seuil. C’est la couleur de la deuxième maquette.
Récapitulatif de vos décisions
Cliquez sur « Préparer le récapitulatif », puis copiez le texte et envoyez-le par e-mail. Vos choix restent affichés dans ce navigateur.
Pour l’équipe technique : où se trouvent ces couleurs
Cas
Fichier source
Variable / règle
1
AAA_________SASS_FILES/_variables.scss
$green: #0087f6 (aussi .qk-pill, .cartouche, titres, survol du menu _2_header.scss)
2
page/_home.scss, page/_news.scss
fond #ef154d du .cartouche (accueil) et de .h1_date (fiches d’actualité)