Cinq sélecteurs de contraste faciles à utiliser pour les responsables

2024/07/29

Vérificateur de contrasteIl calcule la différence de contraste, c'est-à-dire la différence de luminosité, entre la couleur de premier plan (textes et éléments graphiques) et la couleur de fond sur les sites web et les images.Vérifier si ce ratio est conforme aux directives d'accessibilité web telles que WCAG ou JIS.Outil pour évaluerC'est-à-dire que c'est aussi connu sous le nom de vérificateur de contraste ou vérificateur de contraste de couleur.

Cet article présente cinq outils représentatifs de vérification de contraste.

Nous vous expliquerons en détail ces outils ainsi que des points importants pour vérifier le ratio de contraste.Nous encourageons les responsables de l'accessibilité web à lire cet article.

Cinq vérificateurs de contraste faciles à utiliser pour les responsables de l'accessibilité

Il existe divers types de vérificateurs de contraste qui sont essentiels pour les designers et les responsables de l'accessibilité afin de vérifier le contraste sur leurs sites ou contenus web.

C'est pourquoi, ici, nous allonsUn vérificateur de contraste représentatif et facile à utiliserNous vous présentons cinq outils. Il existe des outils que vous pouvez utiliser sur des sites Web (navigateurs) ou installer et utiliser.Tous ces outils sont disponibles gratuitement.Nous allons vous présenter cela, alors n'hésitez pas à essayer.

Nom de l'outil	Caractéristiques	Environnement d'utilisation
① WebAIM	C'est un outil accessible immédiatement sur le site. Bien que le site soit en anglais, l'interface est simple et facile à utiliser.	Navigateur
② ColorTester	Vous pouvez faire glisser et déposer des images pour vérifier le contraste. En raison de son installation, son utilisation dans un bureau peut parfois être limitée.	Installation (Windows / Mac)
③ AdobeColor	En plus des fonctions de vérification de contraste, il est doté de nombreuses fonctionnalités concernant la palette de couleurs. L'intégration avec d'autres produits Adobe tels que Photoshop, Illustrator et InDesign est également possible.	Navigateur
④ Vérificateur de contraste des couleurs WCAG	Installez-le sur Google Chrome comme extension. C'est un outil particulièrement utile pour vérifier le contraste des sites Web.	Navigateur （Extension Chrome）
⑤ ContrastGrid	Un outil permettant de vérifier la liste des contrastes des couleurs définies. Comme plusieurs codes de couleur peuvent être configurés, il est facile à comprendre même pour ceux qui ont du mal avec la combinaison des couleurs, ce qui facilite la décision des couleurs à utiliser.	Navigateur

 

① WebAIM

En configurant la couleur du texte (avant-plan) et la couleur de fond (arrière-plan), il calcule le ratio de contraste.Vérifier si les critères WCAG sont respectésVous pouvez décrire les couleurs en utilisant un code de couleur ou un sélecteur de couleur, et ajuster la luminosité. Lorsque vous définissez des couleurs, le ratio de contraste est calculé en temps réel, et vous pouvez le prévisualiser avec du texte normal, du texte en gras et d'autres objets graphiques comme des coches.

Il est facile de voir si chaque résultat respecte le niveau de conformité, grâce à l'indication « Pass » ou « Fail ».La navigation est en anglais, mais elle est simple et facile à comprendre.Il ne devrait donc pas y avoir de problème avec l'utilisation générale.

Page officielle:WebAIM

② ColorTester

Il calcule le ratio de contraste de deux couleurs et évalue cela selon les normes de JIS X 8341-3:2010 (WCAG 2.0).En faisant glisser et en déposant un fichier image dans la fenêtre, il est possible de déduire automatiquement et d'évaluer la couleur de premier plan et la couleur de fond de l'image.C'est.

C'est un outil fabriqué au Japon, compatible avec les systèmes d'exploitation Windows et Mac.L'installation de l'outil est nécessaire.. Les versions compatibles de chaque OS sont à partir de Windows 8.1 et de Mac OS X 10.10. Il existe également une version anglaise.

Page officielle:Testeur de couleurs

③ Adobe Color

C'est un outil fourni par Adobe, qui développe et vend des outils pour les créateurs. L'outil lui-même inclut diverses fonctionnalités utiles pour les activités créatives en tant qu'outil de sélection de couleurs, et inclut également un vérificateur de contraste pour l'évaluation de l'accessibilité.

L'expérience d'utilisation est similaire à celle d'autres vérificateurs de contraste.Il propose également des couleurs de contraste optimales pour les couleurs définies.Bien que cet outil d'Adobe n'exige ni installation ni connexion, vous pouvez vous connecter pourIl peut être intégré avec d'autres produits Adobe, ce qui en fait un outil pratique pour les designers qui utilisent régulièrement les applications Adobe.C'est-à-dire.

Page officielle:Adobe Color

④ Vérificateur de contraste des couleurs WCAG

Add-on (extension) de Google ChromeC'est un outil qui peut être utilisé. Il extrait instantanément les couleurs utilisées sur la page d'un site web et évalue le contraste de chaque couleur. Étant donné qu'il peut être vérifié page par page, c'est un outil facile à utiliser pour vérifier les sites web en phase de test ou pour entretenir des sites déjà en exploitation.

En cliquant sur n'importe quelle couleur affichée dans le panneau de contrôle latéral, cela mettra en évidence où elle est utilisée sur la page.Il est également facile d'effectuer des vérifications sur des sites riches en informations tels que les portails.。

Page officielle:Vérificateur de contraste des couleurs WCAG

⑤ Grille de contraste

Les vérificateurs de contraste sont souvent des outils qui requièrent de spécifier les couleurs à chaque fois pour vérifier le contraste, mais cet outilUne palette de couleurs (liste) est affichée, permettant de choisir la combinaison de contraste souhaitée.C'est pourquoi cette méthode est recommandée pour les débutants en design ou ceux qui ont du mal avec les combinaisons de couleurs.

Lorsque vous accédez au site officiel, vous verrez déjà les combinaisons de couleurs par défaut comme sur l'image ci-dessus. En ajoutant un code de couleur dans la boîte de gauche, vous pouvez voir les combinaisons avec d'autres couleurs sur la palette.Les niveaux de conformité tels que "AA" ou "AAA" sont affichés, et les différences de couleur des étiquettes permettent de déterminer la conformité.Ainsi, les combinaisons disponibles sont facilement visibles.

Page officielle:Grille de contraste

Nous avons rapidement présenté cinq vérificateurs de contraste utiles, mais pourquoi la vérification du contraste est-elle nécessaire ? Nous allons l'expliquer maintenant.

Pourquoi la vérification du contraste est-elle nécessaire ?

Dans le cadre de l'obligation de fournir des aménagements raisonnables prévue par la loi amendée sur l'élimination de la discrimination à l'égard des personnes handicapées entrée en vigueur en avril 2024,La conformité à l'accessibilité web est également une exigence essentielle.Cela a été le cas. Dans le cadre de cette démarche, il est essentiel de vérifier le niveau d'accessibilité de son propre site web en l'examinant sous différents angles.

Surtout, comme les sites web reposent sur des informations principalement visuelles, il est nécessaire de prendre en compte non seulement les personnes voyantesIl doit également être vérifiable pour les utilisateurs malvoyants, âgés ou ayant des particularités de perception des couleurs, si le site permet la reconnaissance des textes et des images.et il est essentiel de vérifier que l'accessibilité web est bien assurée et de procéder à des améliorations au besoin.

Et l'un des indicateurs nécessaires pour cette vérification est« Ratio de contraste des couleurs »Il s'agit d'un indicateur qui montre la différence de luminosité entre deux couleurs à l'écran (généralement la couleur de premier plan et la couleur d'arrière-plan). Ce rapport représente la luminosité relative de deux couleurs sous forme numérique, avec un ratio de contraste plus élevé rendant plus facile la distinction des couleurs. En général,Le ratio de contraste varie de 1:1 à 21:1, et plus le chiffre est élevé, plus le contraste est fort, ce qui signifie qu'il est plus facile de le reconnaître.。

Voyons maintenant comment les différences de ratio de contraste peuvent affecter la visibilité : consultez ci-dessous.

◆ Différences de visibilité en fonction du ratio de contraste

De plus, pour donner une idée aux personnes ayant une vue déficiente où le texte peut apparaître flou, l'image ci-dessus a été rendue floue.

◆ Différences de visibilité en cas de flou

Ainsi,Lorsque le ratio de contraste est élevé, il y a une grande différence entre la couleur de fond et la couleur de premier plan, ce qui rend les frontières de couleur plus reconnaissables, c'est-à-dire une lisibilité améliorée.Par exemple, lorsque la couleur du texte et celle de l'arrière-plan sont 1:1, elles sont indistinguables car elles sont de la même couleur, tandis qu'à 21:1, elles se distinguent clairement en tant que noir et blanc.Sur un site web comportant divers éléments tels que du texte et des images, il est essentiel de prêter attention au ratio de contraste afin d'assurer l'accessibilité web.。

C'est pourquoi le contraste de la conception de votre site doit êtreEst-ce que je respecte les exigences pour garantir l'accessibilité web?La vérification du contraste est essentielle pour déterminer cela, maisPour un jugement quantitatif, un 'vérificateur de contraste' est un outil indispensable.C'est ainsi. Nous expliquerons ensuite les exigences en matière d'accessibilité web.

Trois points à vérifier concernant le contraste

Lors de l'utilisation d'un vérificateur de contraste pour vérifier le ratio de contraste d'un site web ou d'un contenu, il ne faut pas se fier uniquement à son propre ressenti pour en décider.Il est nécessaire de vérifier conformément aux normes d'accessibilité web établies.Nous vous expliquerons ici trois points à garder à l'esprit lors de la vérification du contraste.

Point ① Comprendre les ratios de contraste qui respectent les normes JIS

Comme mentionné précédemment, la révision de la loi sur l'élimination de la discrimination à l'égard des personnes handicapées a rendu la fourniture d'aménagements raisonnables obligatoire, rendant l'assurance de l'accessibilité web essentielle pour toutes les entreprises.

Il existe divers éléments qui composent un site Web, chacun ayant des normes d'accessibilité définies, et toutes les exigences de réussite sont établies par les normes internationales WCAG 2.0 (Web Content Accessibility Guidelines 2.0). Au Japon,Norme JIS (JIS X 8341-3:2016)Cela en fait partie.

De plus, cette norme définit des niveaux de conformité de A à AAA, et selon le ministère des affaires internes,Il est nécessaire de respecter les niveaux AA ou AAA (recommandé) pour garantir l'accessibilité web.est ainsi.

Référence :Conformité en matière d'accessibilité des sites Web exigée par les agences gouvernementales (Ministère de l'Intérieur et des Communications)

De plus, des normes concernant le ratio de contraste ont été établies.

◆ Ratio de contraste pour se conformer aux niveaux AA et AAA

Niveau de conformité	Ratio de contraste nécessaire
AA	Au moins 4.5:1
AAA	Au moins 7:1

Autrement dit, en tant que site web conforme à l'accessibilité web,un ratio de contraste d'au moins 4.5:1 est requis.Dans de nombreux vérificateurs de contraste, le ratio est calculé automatiquement, il est donc important de prêter attention à ce ratio lors de la vérification.

Veuillez noter que le ratio de contraste AAA de 7:1 est basé sur des utilisateurs dont la vision est altérée jusqu'à 20/80, et que le W3C suppose que les utilisateurs ayant une vision inférieure à 20/80 utilisent généralement des technologies d'assistance pour accéder au contenu.

Le niveau AAA n'est pas obligatoire, mais recommandé.Si vous concevez pour des utilisateurs ayant une basse vision ou des caractéristiques de perception des couleurs sans technologie d'assistance, vous devez viser un ratio de contraste de 7:1.C'est-à-dire.

Référence :Comprendre le critère de réussite 1.4.6 | WCAG 2.0 Guide (W3C)

Point ② Faites également attention à la taille du texte.

Dans le point ①, il est affirmé que "le ratio de contraste doit être d'au moins 4.5:1", mais il existe en fait des exceptions.Dans les cas suivants, il n'est pas toujours nécessaire de respecter un ratio de 4.5:1.

◆ Exceptions à la conformité des normes de ratio de contraste

・Exception ① Texte en grandes lettres et en gras
Pour le texte en grandes lettres ou en gras (texte normal de 18 points ou gras de 14 points),Ratio de contraste de 3:1Si tel est le cas, cela respecte les critères. Cela s'explique par le fait que les grands caractères, en raison de leur haute visibilité, peuvent avoir un contraste légèrement inférieur sans poser de problèmes.

・Exception ② Textes ou logos à des fins décoratives
Les textes accessoires à des fins décoratives et les logos d'entreprise sont exclus des exigences relatives au ratio de contraste. Ceux-ci sont utilisés pour le design et la reconnaissance de marque et ne sont pas considérés comme des moyens de communication d'information.

・Exception ③ Texte dans l'image
Les textes dans les photos et images sont également inclus dans les exceptions. Toutefois,Pour le texte important pour la fourniture d'informations, il doit avoir un ratio de contraste approprié même s'il se trouve dans une image.est recommandé.

Point ③ Il est également nécessaire de prendre en compte les utilisateurs avec des caractéristiques de perception des couleurs.

Nous avons jusqu'ici concentré notre explication uniquement sur le ratio de contraste, mais en matière d'accessibilité des couleurs, il s'agit en réalité d'un aspect insuffisant. En effet,Considération pour les utilisateurs ayant des caractéristiques de perception des couleursCar d'autres facteurs doivent également être pris en compte.

Par exemple, ci-dessous se trouve une disposition de boutons que l'on voit souvent dans les formulaires de contact de sites web ; les deux boutons respectent le ratio de contraste AA entre la couleur de fond et la couleur du texte.

◆ Bouton conforme au ratio de contraste AA

On a tendance à croire que "le ratio de contraste respecte les critères, donc l'accessibilité est assurée", mais c'est une conclusion hâtive.Vision des couleurs de type D (vision dichromatique de type 2)À travers les filtres, l'apparence devient comme suit.

◆ Apparence des boutons pour les daltoniens

Ainsi,Les couleurs des deux boutons deviennent similaires, rendant leur distinction difficile à première vue.Même si le ratio de contraste respecte les critères, cela ne garantit pas une bonne utilisabilité. Ainsi, lors de la sélection des couleurs, il est nécessaire de tenir compte non seulement du ratio de contraste, mais aussi des variations de perception des couleurs.

De plus, en ce qui concerne la considération pour les utilisateurs ayant des particularités de perception des couleurs,Ne transmettez pas d'informations uniquement par la différence de couleur.Cela devient également un point important à prendre en compte.

Avec Uniweb, les utilisateurs peuvent changer le contraste eux-mêmes.

Si vous n'avez pas de ressources pour vérifier le contraste sur votre site, nous proposonsOutil d'accessibilité "UniWeb"Nous vous recommandons d'adopter cela. Uniweb ajoute simplement une ligne de code à la source du site Web pour offrir diverses fonctionnalités d'accessibilité.Mise en œuvre le jour mêmeC'est un outil sous forme de plugin.

Une grande caractéristique d'Uniweb estLes utilisateurs peuvent naviguer sur le site Web tout en utilisant diverses fonctionnalités d'accessibilité.C'est un point. Parmi les fonctionnalités d'accessibilité qui seront mises en œuvre, il existe également une fonction de ajustement de contraste, permettant d'augmenter la lisibilité simplement en cliquant pour basculer entre « couleurs inversées », « contraste sombre » et « contraste clair ».

◆ Fonction de modification de contraste d'Uniweb

De plus, dans le panneau de gestion,Rapport d'évaluation sur la conformité à l'accessibilité web du siteVous pouvez le vérifier. Le rapport affiche le niveau de conformité (A, AA, AAA) pour chaque élément, et pour les zones nécessitant des corrections, il indique comment les modifier concrètement dans le code.Cela permet une gestion efficace sans avoir à chercher des corrections à l'aide de divers outils de vérification.。

◆ Panneau de contrôle Uniweb

En bas à droite de cet articleCliquez sur l'icône en forme de silhouette bleueSi vous le faites, le menu d'accessibilité d'Uniweb s'affichera. En plus du basculement de contraste, de nombreuses autres fonctionnalités d'accessibilité sont disponibles, alors n'hésitez pas à vérifier les fonctionnalités d'Uniweb en pratique.

Résumé

Pour les sites Web où l'information est principalement visuelle,Assurer la visibilité et la lisibilité pour tous les utilisateursIl est nécessaire de comprendre les aménagements nécessaires pour les utilisateurs malvoyants, âgés ou ayant des particularités de perception des couleurs, et de mettre en place un design accessible approprié sur son propre site.

Les vérificateurs de contraste sont des outils très utiles pour réaliser un design accessible. Beaucoup d'entre eux sont inclus dans des outils de vérification de l'accessibilité web payants, maisUn vérificateur de contraste autonome peut être largement utilisé comme un outil gratuit.Alors, commencez par vérifier votre propre site dès que possible.

Cet article se concentre sur la vérification du ratio de contraste dans le cadre de l'accessibilité web.Pour en savoir plus sur l'accessibilité web, vous pouvez consulter nos anciens articles sur ce site ou le 'Guide d'introduction à l'accessibilité web' fourni par l'Agence numérique.。

Référence :Article précédent : « Quelles mesures d'accessibilité web les responsables de site doivent-ils impérativement prendre ? »、Guide d'introduction à l'accessibilité web (Agence numérique)

De plus, dans notre Uniweb,Un diagnostic gratuit de votre site Web est également disponible.Étant donné que cela est mis en œuvre, les entreprises qui envisagent de se conformer à l'accessibilité web pour leur propre siteLien ci-dessousN'hésitez pas à vous inscrire.

Diagnostic gratuit d'accessibilité (Uniweb)

Vérificateur de contraste