Site Académie - Accessibilité

Taux de contrastes

Critère RGAA 4 : « 3.2 | Le contraste minimum (AA) entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 jusqu'à 150% de la taille de police par défaut sans effet de graisse). »
Contraste amélioré (AAA) : « Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1. »
exemple couleur de fond couleur du texte taux de contraste *
texte exemple (actuel) : ACTUALITES #95bbd7
rgb(149,187,215)		 white 2.02:1
texte exemple (actuel) : AIDE EN LIGNE | PREFACES #ebeae5
rgb(235,234,229)		 #939393 2.55:1
texte exemple : AIDE EN LIGNE | PREFACES #ebeae5
rgb(235,234,229)		 #696969 4.55:1 (AA)
texte exemple (actuel) : COPIER conjugaison #67aad4
rgb(103, 170, 212)		 white 2.53:1
texte exemple : COPIER conjugaison #357BA7
RGB(53, 123, 167);		 white 4.62:1 (AA)
texte exemple : COPIER conjugaison #2e6e96
rgb(46, 110, 150)		 white 5.54:1 (AA)
texte exemple : COPIER conjugaison #255D7F
RGB(37, 93, 127);		 white 7.11:1 (AAA)
texte exemple : COPIER conjugaison #0C5C98
RGB(12, 92, 152);		 white 7.1:1 (AAA)
texte de renvoi (actuel) white #4378c4 4.44:1
texte de renvoi white #3e76c5 4.56:1 (AA)
texte de renvoi white #0C5C98
RGB(12, 92, 152);		 7.1:1 (AAA)
* Voir les sites suivants :

Liens utiles

[A.1] Markup Validation Service de W3C : https://validator.w3.org/
Adds-on de Firefox :
[C.8] Service Orange Confort+ (plug-in) : https://confort-plus.orange.com/
[10.1] Exemple de navigation hypertexte avec "vrais" liens hypertextes (soulignés au survol) sur tous les mots :
version démo du Petit Robert (lettre N) : https://petitrobert12.lerobert.com/demo/?mot=noir
[B.3] Précisions sur la propriété "outline" (concernant la "prise de focus") : http://outlinenone.com/
[B.6] Précisions sur les raccourcis clavier : https://webaim.org/techniques/keyboard/accesskey
[B.6] Exemple de site : tabuler sur la page www.sncf.com/fr et noter les premiers liens (ils ne s’affichent qu’à la tabulation clavier) : « Aller aux paramètres d'accessibilité », « Aller au menu principal », « Aller au contenu », « Aller au pied de page ».
[04.4] Modèle de conception modale : https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
[05.1] Rôles ARIA pour les listes :
https://www.w3.org/TR/wai-aria-1.1/#list
https://www.w3.org/TR/wai-aria-1.1/#aria-posinset
https://www.w3.org/TR/wai-aria-1.1/#aria-setsize
[06.1] Infobulles accessibles : https://accessuse.eu/fr/Contenus-au-survol-et-a-la-prise-de-focus.html
[09.5] ARIA design pattern tab panel : https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

Documentation sur l'Accessibilité