Les contrastes de textes
Accessiday - 29 Mai 2014
Créé par Nicolas Hoffmann / @Nico3333fr
Nicolas Hoffmann ?
- Développeur front-end depuis une décade
- Travaille à Genève (« ou bien »), dans une web agency nommée Prezenz
- Co-directeur du collectif OpenWebGroup
- Et…
Passionné
de mythologie
Si si, ça a un rapport avec la présentation
Objectif
Tuer quelques mythes au sujet
des contrastes de texte sur le Web
(et au sujet de l’accessibilité au passage)
Mythe « 0 »
Les contrastes, on s’en fout
(mythe fondateur)
Une question
importante
- Lisibilité pour tous
- Une condition nécessaire et incontournable
- Un sujet… accessible !
- Des bénéfices énormes… pour peu d’efforts
Mythe numéro 1
Les contrastes, la théorie, c’est compliqué
WCAG 2
| Texte < 18 pts | Texte > 18 pts | |
|---|---|---|
| Niveau AA | 4,5:1 | 3:1 |
| Niveau AAA | 7:1 | 4,5:1 |
(règles 1.4.3 et 1.4.4)
Ah bon.
On se calme
Je n’ai JAMAIS utilisé ces formules à la main.
En pratique
Différentes valeurs au hasard
WCAG 1
| Min. | Max. | Recommandée | |
|---|---|---|---|
| Différence de luminosité | 0 | 255 | ≥ 125 |
| Différence de tonalité | 0 | 765 | ≥ 500 |
Mythe numéro 2
Les contrastes, y a pas d’outils pour les calculer
Et la formule, elle fait peur.
Plein d’outils
- Sur le Web
- Des applications
- Des plugins pour divers logiciels
- Des extensions de navigateurs
Outils sur le Web :
Contrast-A
http://www.dasplankton.de/ContrastA/
Contrast-A
Contrast-A
Outils sur le Web :
Cercle Chromatique Accessible
http://gmazzocato.altervista.org/fr/colorwheel/wheel.php
Cercle Chromatique Accessible
Outils sur le Web :
Tanaguru Contrast-Finder
http://contrast-finder.tanaguru.com/
Tanaguru Contrast-Finder
Programme :
Colour Contrast
Analyser
Colour Contrast
Analyser
Extensions de
navigateurs :
WCAG Contrast Checker
https://addons.mozilla.org/fr/firefox/addon/wcag-contrast-checker/
WCAG Contrast
Checker
Mythe numéro 3
Je pousse les curseurs à fond
Pour être encore plus mieux bien.
Attention aux contrastes trop forts
- Accentuent la fatigue oculaire, agressent l'oeil, gênent la lecture
- Contrastes négatifs : des situations désagréables
- Contrastes positifs forts : effet de halo
(non mais halo quoi) - Et pas seulement.
Mythe final
Oui, mais tout ça, c'est pour les handicapés
Ou pour des labellisations.
Un mythe bien mis à mal
- Des situations variées, pas seulement des handicaps
- 8 à 12% de la population mondiale dyslexique, dont 5 à 15% des enfants
- 8% de daltoniens dans la population masculine
- Un vieillissement inéluctable
- Des bénéfices pour tous ! Petite expérience…
Mythe bonus
Il n'y a pas de ressources sur le sujet
Ressources - Articles
Ressources - Sujets connexes
Ressources - Outils web
Ressources -
Programmes
Ressources - Plugins de logiciels
Ressources - Extensions navigateurs
Merci beaucoup
Des questions ?