Update 10-couleur.md

Author: ms-studio

10-couleur.md

@@ -6,81 +6,40 @@ permalink: couleur.html
 
 ## Contraste couleur
 
-Les contrastes de textes sont élémentaires en terme d’accessibilité de site internet. Les choix typographiques ainsi que les couleurs sont à faire méticuleusement afin que toute personnes souffrantes de troubles de la vue permanent ou temporairepuissent voir. Le premier terme désigne certaines déficiences visuelles, le second la fatigue oculaire dûe aux heures passées derrière un écran de mauvaise qualité par exemple. A ne pas oublier qu'avec l'âge les problèmes de vue s'accentuent. Il n'y pas que ça comme soucis de vue, par exemple la dysléxie (8 à 12 % de la population mondiale en souffrirait), le daltonisme (8% de cas chez les hommes et 0,5% du côté des femmes) 
+Les **contrastes de texte** sont élémentaires en terme d’accessibilité de site internet. Les choix typographiques ainsi que les couleurs sont à faire méticuleusement afin que toute personnes souffrante d'une trouble de la vue permanent ou temporaire puisse consulter le site. Le premier terme désigne certaines déficiences visuelles, le second la fatigue oculaire dûe aux heures passées derrière un écran de mauvaise qualité par exemple. A ne pas oublier qu'avec l'âge les problèmes de vue s'accentuent. D'autres soucis de vue sont par exemple la dysléxie (8 à 12% de la population mondiale en souffrirait) ou le daltonisme (8% de cas chez les hommes et 0,5% du côté des femmes) 
 
-Le texte est sûrement une des parties la plus importantes pour un site. Il sert à la compréhension même de celui-ci. Voilà pourquoi un bon traitement entre contrastes et couleurs est primordial.
+Le texte est une des parties la plus importantes pour un site. Il sert à la compréhension même de celui-ci. Voilà pourquoi un bon traitement entre contrastes et couleurs est primordial.
 
+Les recommandations de contrastes :
 
-
-Il
-Les recommandations de contrastes notés ici sont utiles seulement pour une lecture sur écran.
-
-> "Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan.
-> Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 3 pour 1 avec son arrière-plan."
+* Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins **4,5 pour 1** avec son arrière-plan.
+* Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins **3 pour 1** avec son arrière-plan.
 
 Pour obtenir le niveau le plus haut, AAA, la règle 1.4.6 indique :
 
-> Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 7 pour 1 avec son arrière-plan.
-> Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan.
+* Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins **7 pour 1** avec son arrière-plan.
+* Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins **4,5 pour 1** avec son arrière-plan.
 
-(https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) ici une catégorie qui nous montre les formules mathématiques pour calculer les contrastes.
 
 Luminosité et différence de tonalité
 ===
 
-Le calcul de contraste c’est une chose, et pour aller plus loin dans la perfection d’un site (ou autre) d’autres indicateurs sont intéressants tel que la luminosité et la différence de tonalité. Les formules pour les calculer sont très complexes et demanderais une rédaction nettement plus longue pour voir en détail leurs fonctions. 
+Le calcul de contraste c’est une chose, et pour aller plus loin dans la perfection d’un site (ou autre) d’autres indicateurs sont intéressants tel que la luminosité et la différence de tonalité. Les formules pour les calculer sont très complexes. 
 
 Toutefois on sait qu’il faut, du moins il est recommandé, d’avoir une luminosité supérieure ou égale à 125 ainsi qu’une différence de tonalité supérieure ou égale à 500 pour garantir une bonne lisibilité.
 
-Evidemment devoir faire à chaque fois des longs calculs pour la couleur du texte puis celle du fond devient très fatiguant. C’est pourquoi des applications ont été mises au point pour nous faciliter ce problème. Elles nous permettent d’obtenir vite les informations que l’on veut.
+Des applications ont été mises au point pour nous faciliter ce problème. Elles nous permettent d’obtenir vite les informations que l’on veut.
 
 En voici 4 pour étudier les contrastes de textes:
 
-* **Color contrast check**  
+* **[Color Contrast Checker de WebAIM](https://webaim.org/resources/contrastchecker/)**  
 
 ![](img/color-contrast-check.jpg)
 
 C’est un outil de vérification de contraste de couleur. Très pratique est simple à comprendre, il affiche les valeurs de contrastes et les différences de tonalité. Cela nous permet ainsi de voir si ces dernières sont adéquates aux recommandations du WCAG. Il nous indique aussi la luminosité à avoir. 
 
 On peut également changer en temps réel les couleurs pour voir leur impact en direct, on gagne ainsi du temps en pouvant s’adapter rapidement. 
 
-
-* **Contrast-A**
-
-![](img/contrast-a.jpg)
-
-
-![](img/contrast-aa.jpg)
-
-Quant à elle, cette application permet de faire des combinaisons de couleurs et de créer des palettes de couleurs personnalisées. Parmi ses autres utilitaires l’application donne la possibilité de voir nos choix de combinaisons avec certains handicaps visuels comme par exemples certaines formes de daltonisme (la protanopie, la deutéranopie et la tritanopie) ou bien avec une déficience totale de vision des couleurs (color blindness en anglais). De plus ces handicaps sont annotés selon les choix des couleurs. Et pour finir les contrastes, la luminosité et les différences de tonalité sont tous calculés.
-
-
-* **Color contrast analyser** 
-
-![](img/color-contrast-analyser.png)
-
-Ce logiciel est disponible sous Windows et Macintosh. Il est utile pour calculer la luminosité, la différence de tonalité pour différents types de daltonisme. C’est un site complet et simple à utiliser 
-
-
-
-* **Extensions Firefox**
-
-![](img/extensions-firefox.png)
-
-C’est une extension pour Firefox. Elle permet d’évaluer très vite les contrastes de textes et de savoir si ils sont conformes aux recommandations WCAG 2.0.
-
-Il existe également d’autres outils pour les logiciels de graphisme, comme pour Photoshop par exemple qui, depuis la version CS4, à des filtres pour le daltonisme. Pour les trouver il suffit d’aller sous *Affichage > Format d’épreuve > Dyschromatopsie (protanopie et deutéranopie)*. Sinon il existe aussi des plugins proposé par VisCheck. Gimp à aussi son lot d’outils pour les problèmes de vision, tout comme Inskape qui a aussi des extensions pour ces mêmes problèmes. 
-
-En ayant vu toutes ces possibilités il ne faut pas oublier que la lisibilité d’un site se résume pas qu’aux contrastes mais également: le choix de la police (avec ou sans sérif, la forme et l’épaisseur des caractères), le style appliqué (gras, italique, lettres capitales), les interlignages entre les lignes et les caractères, la longueur du texte, etc. 
-
-Un dernier pointage sur les contrastes. Contraste positif ou négatif ?
-
-Certaines recherches ont démontrés que le texte à contraste positif (texte foncé sur fond clair) est beaucoup plus lisible que celui à contraste négatif texte clair sur fond sombre). Le fond sombre pose des problèmes tels que des reflets comme celui du soleil par exemple ou bien un soucis au niveau de la batterie car un écran trop lumineux consomme plus de batterie. 
-
-Cependant des contrastes trop fort, même positifs sont agressifs pour la vue et accentue la fatigue oculaire. Pour exemple prenons le noir pur #000 sur un fond blanc pur aussi #fff. Cette combinaison gêne les dyslexiques car le contraste trop grand aura tendance à faire « bouger » le texte. On appel ce phénomène « syndrome d’Irlen » et ne concerne pas uniquement les personnes souffrantes de dyslexie. 
-
-Avec cette même combinaison un effet de halo peut se produire lors de la lecture pour les personnes âgées et/ou sensibles à la lumière. Pour améliorer ces contrastes un gris très léger au lieu du blanc pour le fond et éclaircir le noir du texte fera l’affaire. 
-
-En conclusion la clef de la réussite pour une bonne lisibilité c’est l’équilibre! Un bon contraste est essentiel et important. Plusieurs outils sont à notre disposition pour nous aider à trouver cet équilibre.  Ces outils sont également utiles, non pas seulement pour des personnes ayant un handicap, mais aussi pour celles ayant une vue «  normale ». Ils permettent un confort de lecture plus conséquent.
+## Autres ressources
 
 - *[Contrastes de texte](http://openweb.eu.org/articles/accessibilite_contrastes_textes_sites)*, un article par  Nicolas Hoffmann, sur openweb.eu.org