Comprendre les WCAG 2.0

Aller au contenu (appuyer sur entrée)

-

Contraste (minimum)  :
Comprendre le CS 1.4.3

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.

Objectif de ce critère de succès

L'objectif de ce critère de succès est de fournir un contraste suffisant entre le texte et son arrière-plan afin qu'il puisse être lu par des personnes avec une basse vision modérée (qui n'utilisent pas de technologies d'assistance améliorant les contrastes). Pour les personnes ne présentant pas de limitation de perception des couleurs, la teinte et la saturation ont peu ou pas d'effet sur la lisibilité comme cela a été démontré par la performance de lecture (Knoblauch et al., 1991). Les limitations de perception des couleurs peuvent quelque peu influer sur le contraste de luminosité. Par conséquent, dans la recommandation, le contraste est calculé de telle manière que la couleur ne soit pas un facteur clé pour que les personnes qui ont une limitation de perception des couleurs aient également un contraste satisfaisant entre le texte et l'arrière-plan.

Le texte qui est décoratif et qui ne transmet pas d'information n'est pas concerné. Par exemple, si des mots aléatoires étaient utilisés pour créer un arrière-plan et que les mots pouvaient être réarrangés ou remplacés sans changer leur sens, alors ils seraient décoratifs et ne seraient pas concernés par ce critère.

Un texte agrandi et avec des traits de caractères plus larges est plus facile à lire sur un contraste plus faible. L'exigence de contraste est donc plus faible pour un texte agrandi. Ceci permet aux auteurs d'utiliser une gamme de choix de couleurs plus large pour les textes agrandis, ce qui est utile pour la conception de pages, en particulier pour les titres. Un texte en 18 points ou un texte en 14 points gras est jugé suffisamment grand pour exiger un plus faible rapport de contraste (voir les recommandations pour les grands caractères de la maison d'édition américaine pour les personnes aveugles et les recommandations pour les grands caractères de la bibliothèque du Congrès dans les ressources). « 18 points » et « gras » peuvent avoir des représentations différentes selon différentes polices cependant, sauf pour les polices très minces ou inhabituelles, cela devrait être suffisant. Comme il existe de nombreuses différentes polices, des mesures génériques sont utilisées et une note sur les caractères fantaisistes ou les polices fines est incluse.

Note : Comme certains logiciels de traitement d'images ne gèrent pas les différentes densités de pixels ((exemple 72 PPI ou 96 PPI), définir la taille des points des polices dans ces logiciels peut ne pas être fiable quand il s'agit de présenter du texte dans une taille spécifique. Lors de la création d'images avec du texte agrandi, les auteurs doivent s'assurer que le texte de l'image résultante est sensiblement équivalent à 1,2 et 1,5 em ou à 120% et 150% de la taille par défaut du corps de texte. Par exemple, pour une image à 72 PPI, un auteur aurait besoin d'utiliser des tailles de police approximativement de 19 pt et 24 pt pour présenter correctement des images avec du texte agrandi à un utilisateur.

Les exigences de contraste précédemment mentionnées pour le texte s'appliquent également au texte sous forme d'image (texte qui a été rendu en pixels puis stocké sous un format d'image) comme indiqué dans le critère de succès 1.4.3.

Cette exigence s'applique aux situations dans lesquelles du texte sous forme d'image est destiné à être compris comme du texte. Le texte décoratif, comme celui sur les panneaux de signalisation pouvant apparaître sur les photographies, n'est pas concerné. N'est également pas concerné le texte qui, pour une raison ou une autre, est conçu pour être invisible à tous les utilisateurs. Le texte stylisé, comme sur les logos d'entreprises, doit être traité selon sa fonction sur la page, selon qu'il nécessite ou non l'ajout d'un contenu dans le texte de remplacement. Les éléments de la charte graphique d'une organisation, autres que le logo et le logotype, ne sont pas compris dans l'exception.

Dans cette recommandation, il existe une exception pour ce « qui est une partie d'une image contenant un autre contenu visuel significatif ». Cette exception a pour but de distinguer les images qui ont du texte de celles qui en ont dans le but de remplacer du texte et d'obtenir une apparence particulière.

Note 1 : Certaines personnes ayant des limitations cognitives ont besoin de combinaisons de couleurs ou de teintes avec un faible contraste, ainsi nous autorisons et nous encourageons les auteurs à fournir des mécanismes permettant d'ajuster les couleurs de premier-plan et d'arrière-plan du contenu. Certaines combinaisons qui pourraient être choisies peuvent avoir des niveaux de contrastes inférieurs à ceux précisés dans les critères de succès. Ce n'est pas une violation des critères de succès à condition qu'il y ait un mécanisme qui revienne aux valeurs par défaut exposées dans les critères de succès.

Note 2 : La taille des textes sous forme d'images ne se change pas aussi bien que du texte car ils ont tendance à pixeliser. Il est également plus difficile de changer les contrastes et les combinaisons de couleurs de premier plan et d'arrière-plan pour les textes sous forme d'images, ce qui est nécessaire pour certains utilisateurs. Par conséquent, nous suggérons d'utiliser autant que possible du texte, et dans le cas contraire, pensez à fournir une image de résolution plus élevée.

Bien que ce critère de succès ne s'applique qu'aux textes, des questions similaires se présentent pour des données présentées dans des tableaux ou des graphiques. Un bon contraste de couleurs devrait également être fourni pour les données présentées dans ces formats.

Voir également Comprendre le critère de succès 1.4.6 Contraste (amélioré) .

Justification des ratios choisis

Un rapport de contraste de 3:1 est le niveau minimum recommandé par [ISO-9241-3] et [ANSI-HFES-100-1988] pour du texte et une vision standards. Le rapport de 4,5:1 est utilisé dans cette recommandation pour tenir compte de la perte de contraste qui résulte d'une acuité visuelle modérée faible, des limitations de perception des couleurs congénitales ou acquises, ou de la perte de sensibilité aux contrastes qui accompagne en général le vieillissement.

Le raisonnement est basé sur a) une adoption du rapport de contraste de 3:1 comme rapport de contraste minimum acceptable pour les observateurs normaux dans la norme ANSI, et b) la constatation empirique que dans la population, l'acuité visuelle de 20/40 est associée à une perte de sensibilité aux contrastes de l'ordre de 1,5 [ARDITI-FAYE]. Un utilisateur avec 20/40 aurait besoin d'un rapport de contraste de 3 * 1,5 = 4,5 pour 1. À la suite de constatations empiriques analogues et en suivant la même logique, l'utilisateur avec une acuité visuelle de 20/80 aurait besoin d'un contraste de 7:1.

Les teintes sont perçues différemment par les utilisateurs présentant des limitations de perception des couleurs (congénitales comme acquises), il en résulte des couleurs et contrastes de luminosité relative différents par rapport aux utilisateurs qui voient normalement. À cause de cela, le contraste efficace et la lisibilité sont différents pour cette population. Toutefois, les limitations de perception des couleurs sont tellement diverses qu'une prescription générale efficace sur l'utilisation de paires de couleurs (pour les contrastes) basée sur des données quantitatives n'est pas réalisable. Exiger un bon contraste de luminosité s'adapte bien à ceci en exigeant un contraste qui est indépendant de la perception de la couleur. Heureusement, la plupart des apports de la luminosité passe par des récepteurs de moyennes et longues ondes qui se recoupent en grande partie dans leurs réponses spectrales. Le résultat est que le contraste de luminosité relative peut généralement être calculé sans tenir compte d'une limitation de perception des couleurs, sauf pour l'utilisation de couleurs principalement composées de grandes longueurs d'ondes et opposées à des couleurs sombres (qui apparaissent généralement noires) pour les personnes atteintes de protanopie. (Nous fournissons pour cette raison une technique recommandée sur l'évitement du rouge sur fond noir). Pour plus d'information, voir [ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI].

Le rapport de contraste de 4,5:1 a été choisi pour le niveau AA car il compensait la perte de sensibilité au contraste généralement vécue par les utilisateurs avec une perte de vision à peu près équivalente à 20/40. (20/40 correspond environ à 4,5:1.) On indique fréquemment que 20/40 correspond à l'acuité visuelle moyenne des personnes âgées d'environ 80 ans. [GITTINGS-FOZARD]

Le rapport de contraste de 7:1 a été choisi pour le niveau AAA, car il compensait la perte de sensibilité au contraste généralement vécue par les utilisateurs avec une perte de vision à peu près équivalente à 20/80. Les personnes ayant un degré de perte de vision supérieur utilisent généralement des technologies d'assistance pour accéder à leur contenu (et les technologies d'assistance disposent généralement d'un renforcement des contrastes, ainsi que de possibilités d'agrandissement intégrées). Le niveau 7:1 fournit donc généralement une compensation pour la perte de sensibilité au contraste rencontrée chez les utilisateurs avec une basse vision et qui n'utilisent pas de technologie d'assistance, et il fournit également un renforcement des contrastes pour les daltoniens.

Note : Les méthodes de calculs dans [ISO-9241-3] et [ANSI-HFES-100-1988] sont pour le corps du texte. Un rapport de contraste moins exigeant est fourni pour du texte qui est beaucoup plus grand.

Notes sur la formule

La conversion des valeurs RGB non-linéaires à linéaires est basée sur IEC/4WD 61966-2-1 [IEC-4WD] et sur « Un espace de couleur par défaut standard pour Internet - sRGB » [sRGB].

La formule (L1/L2) pour le contraste est basée sur les normes [ISO-9241-3] et [ANSI-HFES-100-1988].

Le standard ANSI/HFS 100-1988 demande à ce que l'impact de la lumière ambiante soit inclus dans le calcul de L1 et L2. La valeur 0,05 utilisée est basée sur l'affichage du signal lumineux général [IEC-4WD] et l'article [sRGB] de M. Stokes et al.

Ce critère de succès et ses définitions emploient les termes « rapport de contraste » et « luminosité relative » plutôt que « luminosité » pour refléter le fait que le contenu Web n'émet pas de lumière. Le rapport de contraste donne une mesure de la luminosité relative qui se traduirait à l'affichage. (Parce que c'est une proportion, sans dimension.)

Note 1 : se référer aux ressources liées pour obtenir une liste d'outils qui utilisent le rapport de contraste pour analyser le contraste de contenus Web.

Note 2 : voir également Comprendre le critère de succès 2.4.7 Visibilité du focus pour les techniques pour indiquer le focus du clavier.

Note 3 : il est parfois utile pour les auteurs de ne pas spécifier de couleurs pour certaines sections d'une page afin d'aider les utilisateurs qui ont besoin de voir le contenu dans des combinaisons de couleurs spécifiques à voir le contenu dans leur jeu de couleurs préféré. Pour plus d'informations, se référer à Comprendre le critère de succès 1.4.5 Texte sous forme d'image.

Avantages spécifiques du critère de succès 1.4.3 :

  • Les personnes ayant une basse vision ont souvent des difficultés à lire un texte qui n'est pas contrasté avec son arrière-plan. Cela peut être aggravé si la personne a une limitation de perception des couleurs qui diminue davantage le contraste. Fournir un rapport minimum de contraste de luminosité entre le texte et son arrière-plan peut rendre le texte plus lisible même si la personne ne voit pas toute la gamme de couleurs. Cela fonctionne également pour les rares personnes qui ne distinguent pas les couleurs.

Exemples pour le critère de succès 1.4.3

(Aucun exemple n'est actuellement documenté)

Ressources liées

Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.

Techniques et échecs pour le critère de succès 1.4.3 - Contraste (minimum)

Chaque élément numéroté dans cette section représente une technique ou une combinaison de techniques que le groupe de travail des WCAG considère comme suffisante pour répondre aux exigences de ce critère de succès. Les techniques énumérées satisfont le critère de succès seulement si toutes les exigences de conformité aux WCAG 2.0 ont été appliquées.

Techniques suffisantes

Consignes : choisissez parmi les situations suivantes celle qui correspond à votre contenu. Chaque situation comprend des techniques ou des combinaisons de techniques qui sont connues et documentées comme suffisantes par rapport à cette situation.

Situation A : le texte est inférieur à 18 points s'il n'est pas en gras et le texte est inférieur à 14 points s'il est en gras

  1. G18 : S'assurer qu'un rapport de contraste d'au moins 4,5 pour 1 existe entre le texte (et le texte sous forme d'image) et l'arrière-plan du texte (en anglais)

  2. G148 : Ne pas spécifier de couleur d'arrière-plan ni de couleur de texte et ne pas utiliser une technologie qui change ces couleurs par défaut (en anglais)

  3. G174 : Fournir un élément d'interface ayant un rapport de contraste suffisant afin de permettre à l'utilisateur de basculer vers une présentation offrant un contraste suffisant (en anglais)

Situation B : le texte est au moins de 18 points s'il n'est pas en gras et au moins de 14 points s'il est en gras

  1. G145 : S'assurer qu'un rapport de contraste d'au moins 3 pour 1 existe entre le texte (et le texte sous forme d'image) et l'arrière-plan du texte (en anglais)

  2. G148 : Ne pas spécifier de couleur d'arrière-plan ni de couleur de texte et ne pas utiliser une technologie qui change ces couleurs par défaut (en anglais)

  3. G174 : Fournir un élément d'interface ayant un rapport de contraste suffisant afin de permettre à l'utilisateur de basculer vers une présentation offrant un contraste suffisant (en anglais)

Techniques (recommandées) supplémentaires pour 1.4.3

Bien qu'elles ne soient pas nécessaires à la conformité, les techniques recommandées suivantes devraient être envisagées afin de rendre le contenu plus accessible. Toutes ces techniques ne peuvent pas être utilisées ou ne seraient pas efficaces dans toutes les situations.

  • G156 : Utiliser une technologie qui permet de changer l'avant-plan et l'arrière-plan des blocs de texte dans des agents utilisateur communément disponibles (en anglais)

  • Utiliser un contraste supérieur pour un texte placé sur un motif d'arrière-plan (lien à venir)

  • Utiliser du texte Unicode et des feuilles de style plutôt que des textes sous forme d'images (lien à venir)

  • Utiliser un contraste supérieur pour les lignes d'un diagramme (lien à venir)

  • Utiliser un plus fort contraste pour une combinaison de rouge et de noir comme texte et arrière-plan (lien à venir)

  • Utiliser des couleurs où prédominent les composantes du milieu du spectre visible pour les tons clairs et les couleurs de chaque extrémité du spectre visible (longueurs d'onde bleues et rouges) pour les tons foncés.

  • Utiliser un arrière-plan de couleur pastel plutôt que blanc avec du texte noir afin de créer un contraste suffisant mais non extrême (lien à venir)

  • Créer des icônes qui utilisent des lignes de couleur qui satisfont au niveau de contraste prévu pour le texte (lien à venir)

  • Fournir un contraste suffisant dans les diagrammes et les graphes (lien à venir)

  • Utiliser un niveau de contraste de 3 pour 1 ou mieux comme présentation par défaut (lien à venir)

  • Fournir un contraste de couleurs suffisant pour un champ de texte vide (lien à venir)

Mots clés

(texte) agrandi

avec au minimum 18 points ou 14 points gras ou une taille de caractère équivalente pour les polices chinoises, japonaises ou coréennes (CJK)

Note 1 : les polices avec des traits extraordinairement fins ou des aspects et des caractéristiques inhabituels qui réduisent la reconnaissance de la forme des lettres sont plus difficiles à lire, spécialement à des niveaux de contrastes bas.

Note 2 : la taille de caractère est la taille lorsque le contenu est affiché. Cela n'inclut pas le redimensionnement qui pourrait être fait par l'utilisateur.

Note 3 : la taille réelle des caractères qu'un utilisateur voit est dépendante à la fois de la définition de la taille faite par l'auteur, du périphérique de restitution de l'utilisateur ou du paramétrage de l'agent utilisateur. Pour la majorité des polices de corps de texte, 14 et 18 points est sensiblement équivalent à 1,2 et 1,5 em ou à 120% et 150% de la taille par défaut du corps de texte (en considérant que la police de corps est à 100%), mais les auteurs seraient tenus de vérifier cela pour les polices particulières qui seraient utilisées. Quand les polices sont définies en unités relatives, la taille réelle du point est mesurée par l'agent utilisateur pour l'affichage. La taille d'un point doit être obtenue auprès de l'agent utilisateur ou calculée sur la même base de mesure que celle de l'agent utilisateur, lors de l'évaluation de ce critère de succès. Les utilisateurs qui ont une basse vision auront à choisir les paramètres appropriés.

Note 4 : lors de l'utilisation de texte sans spécification de taille de caractère, la taille la plus petite utilisée dans les principaux navigateurs pour le texte dont la taille n'est pas spécifiée serait considérée comme une taille raisonnable pour la police. Si un titre de niveau 1 est restitué en 14pt gras ou plus sur les principaux navigateurs, alors il est raisonnable de considérer qu'il s'agit de texte agrandi. Le redimensionnement relatif peut être calculé de manière identique à partir de la taille par défaut.

Note 5 : la taille 18 ou 14 points pour les textes en alphabet latin est définie à partir de la taille minimum pour les grands caractères (14pt) et de la taille standard plus grande (18pt). Pour les autres polices telles que les langues CJK, les tailles « équivalentes » seraient la taille de grand caractère minimum utilisée pour ces langues et la taille de grands caractères plus grande suivante.

composant d'interface utilisateur

partie du contenu qui est perçue par les utilisateurs comme un élément de contrôle unique pour une fonction distincte

Note 1 : plusieurs composants d'interface utilisateur peuvent être implémentés au sein d'un seul programme. La notion de composant n'est pas liée ici aux techniques de programmation, mais plutôt à ce que les utilisateurs perçoivent comme des éléments de contrôle distincts.

Note 2 : les composants d'interface utilisateur incluent les éléments de formulaire et les liens aussi bien que des composants générés par scripts.

Exemple : un microprogramme (applet) dispose d'un « élément de contrôle » permettant de se déplacer dans le contenu ligne par ligne, page par page ou au hasard. Puisque chacune de ces fonctions devrait avoir un nom et fonctionner indépendamment, elles constitueraient chacune un « composant d'interface utilisateur ».

purement décoratif

utilisé seulement dans un but esthétique, ne fournissant aucune information et n'ayant aucune fonctionnalité

Note : un texte est purement décoratif si les mots peuvent être réarrangés ou remplacés sans changer leur raison d'être.

Exemple : la page couverture d'un dictionnaire présente un arrière-plan estompé et constitué de mots choisis au hasard.

rapport de contraste

(L1 + 0,05) / (L2 + 0,05), où

Note 1 : le rapport de contraste peut varier de 1 à 21 (communément écrit 1:1, 1 pour 1, à 21:1, 21 pour 1).

Note 2 : étant donné que les auteurs ne contrôlent pas la configuration de l'utilisateur concernant le rendu du texte (par exemple le lissage de police ou l'anti-crénelage), le rapport de contraste du texte peut être évalué en désactivant l'anti-crénelage.

Note 3 : en ce qui concerne les critères de succès 1.4.3 et 1.4.6, le contraste est mesuré en tenant compte de l'arrière-plan sur lequel le texte est normalement affiché. Si aucune couleur d'arrière-plan n'est spécifiée, il est considéré comme blanc.

Note 4 : la couleur d'arrière-plan est la couleur spécifiée du contenu sur lequel le texte est normalement affiché. Il est considéré comme une erreur de ne pas définir une couleur d'arrière-plan lorsque la couleur du texte est spécifiée, parce que la couleur d'arrière-plan de l'utilisateur est inconnue et ne peut donc pas être évaluée pour vérifier si le contraste est suffisant. Pour la même raison, il est aussi considéré comme une erreur de ne pas définir la couleur du texte lorsqu'une couleur d'arrière-plan est spécifiée.

Note 5 : lorsqu'il y a une bordure autour de la lettre, la bordure peut augmenter le contraste et serait utilisée dans le calcul du contraste entre la lettre et son arrière-plan. La couleur d'une bordure étroite autour de la lettre serait utilisée à la place de la lettre. Une bordure large autour de la lettre qui remplit l'espace dans lequel se découpe le détail de la lettre agit comme un halo et serait considérée comme un arrière-plan.

Note 6 : la conformité aux WCAG devrait être évaluée pour les paires de couleurs spécifiées dans le contenu qu'un auteur s'attendrait à voir apparaître de façon adjacente dans une présentation habituelle. Les auteurs n'ont pas besoin de prendre en considération les présentations inhabituelles comme les changements de couleurs faits par l'agent utilisateur sauf si ces changements sont provoqués par le code de l'auteur.

texte

séquence de caractères pouvant être déterminée par un programme informatique, et exprimant quelque chose dans une langue donnée

texte sous forme d'image

texte qui est restitué sous une forme non textuelle (par exemple une image) dans le but de permettre un effet visuel particulier

Note : cela n'inclut pas le texte qui est une partie d'une image qui contient d'autres contenus visuels signifiant.

Exemple : le nom d'une personne sur un badge dans une photographie.