Colour Contrast Analyser > contraste textes/couleurs/fonds

Dans le cadre de l'évolution du site, vous pouvez dès à présent prendre connaissance des tests de Kappa dans la nouvelle section, "Les découvertes de Kappa" dans laquelle chaque nouveau logiciel disposera de son propre sujet. Ce transfert a pour vocation d'améliorer la navigation afin d'atteindre directement le lien du logiciel souhaité sans devoir attendre le chargement de la totalité des tests présents dans chaque page. Cette nouvelle section est aussi accessible directement depuis le menu Forums en page d'accueil "Les derniers messages publiés".

Modérateur: Modérateurs

Colour Contrast Analyser > contraste textes/couleurs/fonds

Messagepar Kappa » 18 Mai 2017 10:22

Bonjour,

Image
L'organisme de standardisation informatique W3C (World Wide Web Consortium) a défini un certain nombre de règles et directives pour l'accessibilité internationales des contenus Web sous l’appellation WCAG (Web Content Accessibility Guidelines) .
La version WCAG 2.0 précise celles qui sont applicables à toutes les technologies actuelles et futures de conception de pages Web. (Source)
Parmi ces directives figure le principe premier attaché à une meilleure perception des contenus :

WCAG 2 Principe 1 : perceptible - L'information et les composants de l'interface utilisateur doivent être présentés à l'utilisateur de façon à ce qu'il puisse les percevoir.
Afin de répondre aux besoins de divers groupes et de différents contextes, trois niveaux de conformité ont été définis : A (le plus bas), AA et AAA (le plus élevé).

Pour la présentation des textes et images :
....................

1.4.3 Contraste (minimum) : la présentation visuelle du texte et du texte sous forme d'image a un rapport de contraste d'au moins 4,5:1, sauf dans les cas suivants : (Niveau AA)
- Texte agrandi : le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 3:1;
- Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif.
- Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.

1.4.8 Présentation visuelle : pour la présentation visuelle des blocs de texte, un mécanisme est disponible permettant de réaliser ce qui suit : (Niveau AAA)
- Les couleurs de premier plan et d'arrière-plan peuvent être choisies par l'utilisateur.
- La largeur n'excède pas 80 caractères ou glyphes (40 si CJK).
- Le texte n'est pas justifié (aligné simultanément à droite et à gauche).
- L'espacement entre les lignes (interlignage) est d'une valeur d'au moins 1,5 dans les paragraphes et l'espacement entre les paragraphes est au moins 1,5 fois plus grand que la valeur de l'interligne.
- La taille du texte peut être redimensionnée jusqu'à 200 pour cent sans l'aide d'une technologie d'assistance et sans que l'utilisateur soit obligé de faire défiler le texte horizontalement pour lire une ligne complète dans une fenêtre plein écran.


Note by Kapppa : Le niveau (A, AA, AAA) est proportionnel à la difficulté ressentie par l'utilisateur, de part ses perceptions cognitives.

Ces principes s'adressent aux développeurs et concepteurs de site, mais peuvent aussi avoir un impact sur vos productions, vos photos et présentations si vous faîtes un mauvais choix du rapport de contraste entre la couleur et taille du texte par rapport au fond sur lequel il se trouve.
A cet effet le petit utilitaire Colour Contrast Analyser peut vous apporter une aide précieuse quant au choix à effectuer.

Image
Avec Colour Contrast Analyser permet d'analyser les problèmes de contraste du texte de couleur d'un site Web , d'une photo, d'une fenêtre Windows (par exemple), suivant les exigences de WCAG 2. Sous différents critères tels que la difficulté de percevoir le vert, rouge ou bleu des photos, de tout ou partie des pages Web et des documents PDF le logiciel propose une vision simulée pour l'utilisateur. Par conséquent indique si le niveau de conformité et le rapport de contraste du premier plan et arrière-plan répondent aux exigences de la WCAG.
Colour Contrast Analyser est un logiciel gratuit, multilingue à installer sous Windows ou Mac OSX.

ImageImage

Image
(présentation partielle éditeur)
"Colour Contrast Analyser (CCA) vous aide à déterminer la lisibilité du texte et le contraste des éléments visuels, tels que les contrôles graphiques et les indicateurs visuels.
Cet outil fournit deux fonctionnalités principales utiles :
- Une évaluation de réussite/échec sur les critères de réussite de contraste de couleur WCAG 2.0
- Une simulation de certaines conditions ou déficiences visuelles, pour démontrer comment votre contenu web apparaît chez les personnes ayant une vision inférieure à 20/20.
Le CCA est disponible pour Windows et Mac, et dans plusieurs langues, y compris l'anglais, le français, le néerlandais, l'italien, l'allemand, l'hindi, le coréen et le chinois traditionnel.
Remarque: la fonctionnalité de simulation visuelle n'est disponible que dans la version Windows.
"

Image
- Version : 2.4.0.23 du 23/02/2017
- Licence : Gratuit
- Taille du téléchargement : 2.50 Mo (EXE)
- Langue : Multilingue
- Supports : Windows XP, Vista, 7, 8/8.1 et 10 (32 bits et 64 bits) et MAc OSX (fichiers à télécharger séparémment)
- Analyse par VirusTotal: 1/61 au 16/05/2017 à 20h04 UTC by Kappa (voir le résultat de l'analyse )
- Lien direct de l'éditeur pour le téléchargement : Colour Contrast Analyser
* version Windows : Colour Contrast Analyser for Windows
* version Mac OSX : Colour Contrast Analyser for Mac OSX
- Page de l'éditeur pour la présentation du logiciel: Colour Contrast Analyser

Image
- Colour Contrast Analyser est livré en téléchargement sous forme de fichier EXE d'installation. Pas de problème dans ce domaine si ce n'est que le choix du dossier d'installation n'est pas présent. Le logiciel est installé par défaut dans le dossier Programmes habituel en utilisant un espace de 2 Mo. L'ensemble est propre et exempt de toute trace de nuisible :

Image

- L'interface comprend un menu permettant la sélection de police, d'un type d'image ainsi que pour le texte le choix de la couleur avant/arrière plan et enfin le résultat obtenu :

Image

Image

Image

-------------------------------------------------------------------------------------------
> En savoir plus sur les perceptions des utilisateurs et leurs déficiences éventuelles :
Pour le texte et les images:
* Normal : utilisateur lambda sans déficiences
* Protanopie : absence des récepteurs rétinaux au rouge ; cette couleur est indétectable par le sujet.
* Deutéranopie : absence dans la rétine des cônes de réception au vert ; les personnes affectées sont incapables de différencier le rouge du vert.
* Tritanopie : absence des récepteurs rétinaux au bleu ; cette couleur est indétectable par le sujet.
Et plus particulièrement pour les images:
* Échelle de gris : en substitution des couleurs
* Inversé : le négatif de l'image
* Cataractes : baisse de l'acuité visuelle caractérisée par son évolution progressive, bilatérale.
-------------------------------------------------------------------------------------------

- La modification, selon vos besoins de la couleur, donne immédiatement le résultat de conformité (ou non) avec les principes de WACG 2.0

Image
Ici on constate que le choix effectué n'obtient pas la valeur limite de 4,5:1 pour les utilisateurs atteint de Protanopie pour un format texte normal (Echec)

-> Pour tous les utilisateurs ces fonctionnalités assurent d'obtenir le bon choix et la cohérence des couleurs fond/texte très rapidement en sélectionnant successivement d'autres couples texte/fond.

- Le menu image offre 3 possibilités :
1. Sélection d'une fenêtre présente et ouverte du bureau :

ici le fond du bureau lui-même
Image

... avec les différents modes de perception :

Image
Remarque : l'animation en fichier GIF ainsi que les contraintes d'hébergement du fichier déteriorent la qualité des images contenues dans cette animation

2. La sélection d'un fichier image de votre machine (à sélectionner) :

Image

... avec ici une percpetion d'un sujet atteint de Deutéranopie :

Image

3. Sélection d'une zone quelconque (ici sur la page d'accueil du site libellules.ch) :

Image

...et l'ensemble des perceptions possibles (Parallel view):

Image

>>> Un petit test sur le site libellules.ch aboutit à ceci :

- Sur du texte rouge sur fond blanc :

Image
... seuls les sujets atteints de Deutéranopie auront quelques dificultés (ration de 4,1:1 au lieu de 4,5:1) ... mais ce n'est pas catastrophique :|

- Pour les zones de texte en grisé :

Image
... là pour le texte conventionnel, tout le monde est touché, le ration est de 3,1:1 pour du texte gris sur fond blanc !

Image
Bien qu'étant ciblé pour les développeurs et les concepteurs de site, Colour Contrast Analyser pourra néanmoins intéresser les utilisateurs quant au choix, par exemple de titres ou sous-titres sur des photos ou pour des diaporamas où l'on est souvent à se demander quelle couleur de fond associer à celle du texte. Colour Contrast Analyser permet une meilleure lisibilité du texte et un bon contraste des éléments visuels. Un logiciel vraiment à découvrir. :wink:

Bon test et bonne journée :-D
"Cesser d'apprendre c'est commencer à vieillir" Socrate
Avatar de l’utilisateur
Kappa
Super Libellulien
Super Libellulien
 
Messages: 2027
Inscription: 21 Juin 2014 13:06
Localisation: Dans un autre espace-temps...

Retourner vers Les découvertes de Kappa

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités