What is color accessibility?

Color is such a vital element of web design as it is used to convey personality, attract attention, symbolize action, and indicate importance. As color carries a lot of significance in both being visually pleasing and conveying meaning, users must be able to perceive different colored content on a webpage. Color accessibility is important as it helps users with visual impairments like low vision or color blindness to properly distinguish content elements and read/view them effectively.

What is a color contrast checker?

A color contrast checker is a tool that measures the difference in perceived luminance between two colors to ensure that is perceivable to users with visual impairments or insensitivity.

How is a color contrast ratio caluclated?

The difference is measured on a ratio scale that starts at 1:1 (white on white) to 21:2 (black on white). According to the WCAG level AA, the minimum contrast ratio that colors can have for the visual presentation of text and images of text is 4.5:1.

What is an acceptable WCAG color contrast ratio?

WCAG 2.1 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, except for large text, which should have a minimum contrast ratio of 3:1. WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (14 point and bold or larger, or 18 point or larger).

Do images have to comply with WCAG color contrast requirements?

Images must pass the WCAG contrast requirements. Images that contain text must ensure that the contrast between the image background and the text is sufficient, especially if the images are low quality and if the image needs to be enlarged in any way. Images of text must have a minimum contrast ratio of 4.5:1. For images that do not contain text, but still convey meaning, the image components must still have sufficient contrast to ensure that the overall image is perceivable. WCAG 2.1 level AA specifies that graphical objects and author-customized interface components such as icons, charts, and graphs, buttons, form controls, and focus indicators and outlines, have a contrast ratio of at least 3:1.

Vérificateur de Contraste des Couleurs

Testez le ratio de contraste entre les couleurs d'arrière-plan et de texte pour l'accessibilité. Utilisez-le pour visualiser différentes combinaisons de couleurs pour la conception de votre site web qui respectent les Règles pour l'accessibilité des contenus Web (WCAG) et la législation internationale sur l'accessibilité.

Obtenez un Scan Gratuit

Guide de l'outil de contraste des couleurs

Saisissez une couleur d'arrière-plan et de premier plan au format RVB, hexadécimal, ou sélectionnez une couleur à l'aide du sélecteur de couleur. Une fois la couleur choisie, le niveau de luminosité peut être ajusté.

Comment interpréter les ratios de contraste des couleurs

Exigences minimales de ratio de contraste

WCAG 2.2 Niveau AA

Texte normal : ratio de contraste minimum de 4,5:1
Texte large : ratio de contraste minimum de 3:1

WCAG 2.2 Niveau AAA

Texte normal : ratio de contraste minimum de 7:1
Texte large : ratio de contraste minimum de 4,5:1

Le texte large est défini comme ayant une taille de 14 points (18,67 px) en gras ou plus, ou 18 points (24 px) ou plus.

Besoin d'aide supplémentaire ?

La création d'éléments de design web avec un contraste approprié constitue l'une des nombreuses étapes de votre parcours vers un site web accessible. Notre plateforme vous fournit les outils et les données nécessaires pour garantir que votre site web soit entièrement conforme et convivial pour chaque visiteur.

Obtenez une analyse d'accessibilité gratuite

Illustration of Product UI with a dashboard identifying progress for WCAG's A, AA, and AAA compliancy

Pourquoi utiliser un vérificateur de contraste des couleurs ?

Le contraste est l'un des problèmes d'accessibilité web les plus courants, mais aussi l'un des plus faciles à corriger. Selon le U.S. Web Design System (USWDS), 4,5 % de la population américaine présente une forme d'insensibilité aux couleurs qui rend difficile la distinction ou la perception des différences de teintes. Les personnes avec une insensibilité aux couleurs et une vision réduite éprouvent souvent des difficultés à lire du texte qui ne contraste pas avec son arrière-plan. Fournir un ratio de contraste de luminance minimum entre le texte et son arrière-plan peut rendre le texte plus lisible pour les utilisateurs qui ne peuvent pas voir la gamme complète des couleurs et aide ces rares utilisateurs qui ne perçoivent aucune couleur. Utilisez le vérificateur de contraste des couleurs web d'Acquia Web Governance pour vérifier rapidement les combinaisons de couleurs et vous assurer que tous vos contenus de marque et éléments de design sont accessibles à tous. Il peut également être utilisé pour tester le contraste des couleurs avec d'autres réglementations, par exemple comme vérificateur de contraste ADA.

Questions Fréquemment Posées

Qu'est-ce que l'accessibilité des couleurs ?
La couleur est un élément essentiel du design web car elle permet de transmettre la personnalité, d'attirer l'attention, de symboliser l'action et d'indiquer l'importance. Comme la couleur revêt une grande importance tant pour son aspect esthétique que pour la transmission de sens, les utilisateurs doivent être en mesure de percevoir les différents contenus colorés d'une page web. L'accessibilité des couleurs est cruciale car elle aide les utilisateurs ayant des déficiences visuelles comme une vision réduite ou un daltonisme à distinguer correctement les éléments de contenu et à les lire ou les consulter efficacement.

La couleur est un élément essentiel du design web car elle permet de transmettre la personnalité, d'attirer l'attention, de symboliser l'action et d'indiquer l'importance. Comme la couleur revêt une grande importance tant pour son aspect esthétique que pour la transmission de sens, les utilisateurs doivent être en mesure de percevoir les différents contenus colorés d'une page web. L'accessibilité des couleurs est cruciale car elle aide les utilisateurs ayant des déficiences visuelles comme une vision réduite ou un daltonisme à distinguer correctement les éléments de contenu et à les lire ou les consulter efficacement.

Qu'est-ce qu'un vérificateur de contraste de couleurs ? Un vérificateur de contraste de couleurs est un outil numérique qui évalue si le contraste entre les couleurs de premier plan et d'arrière-plan d'un contenu respecte les standards d'accessibilité web. Il mesure le ratio de contraste et indique si celui-ci est conforme aux directives WCAG (Web Content Accessibility Guidelines), garantissant ainsi que votre contenu reste lisible pour tous les utilisateurs, y compris ceux ayant des déficiences visuelles.
Un vérificateur de contraste des couleurs est un outil qui mesure la différence de luminance perçue entre deux couleurs pour s'assurer qu'elle est perceptible aux utilisateurs ayant des déficiences visuelles ou une insensibilité aux couleurs.

Qu'est-ce qu'un vérificateur de contraste de couleurs ? Un vérificateur de contraste de couleurs est un outil numérique qui évalue si le contraste entre les couleurs de premier plan et d'arrière-plan d'un contenu respecte les standards d'accessibilité web. Il mesure le ratio de contraste et indique si celui-ci est conforme aux directives WCAG (Web Content Accessibility Guidelines), garantissant ainsi que votre contenu reste lisible pour tous les utilisateurs, y compris ceux ayant des déficiences visuelles.

Un vérificateur de contraste des couleurs est un outil qui mesure la différence de luminance perçue entre deux couleurs pour s'assurer qu'elle est perceptible aux utilisateurs ayant des déficiences visuelles ou une insensibilité aux couleurs.

Comment le ratio de contraste des couleurs est-il calculé ? Le ratio de contraste des couleurs est calculé en utilisant la formule de luminance relative définie par les Web Content Accessibility Guidelines (WCAG). Voici le processus : 1. Calcul de la luminance relative Pour chaque couleur, on calcule d'abord sa luminance relative (L) : - Convertir les valeurs RGB en valeurs sRGB (de 0 à 1) - Appliquer la correction gamma pour chaque composante - Calculer la luminance : L = 0,2126 × R + 0,7152 × V + 0,0722 × B 2. Calcul du ratio de contraste Le ratio de contraste est calculé avec la formule : Ratio de contraste = (L1 + 0,05) / (L2 + 0,05) Où : - L1 = luminance relative de la couleur la plus claire - L2 = luminance relative de la couleur la plus foncée - 0,05 représente la luminance relative du noir 3. Interprétation des résultats - Ratio de 1:1 = aucun contraste (couleurs identiques) - Ratio de 21:1 = contraste maximum (blanc sur noir) - WCAG AA exige un minimum de 4,5:1 pour le texte normal - WCAG AAA exige un minimum de 7:1 pour une accessibilité optimale Cette méthode standardisée garantit une mesure cohérente du contraste visuel pour l'accessibilité web.
La différence est mesurée sur une échelle de ratio qui va de 1:1 (blanc sur blanc) à 21:1 (noir sur blanc). Selon le niveau AA des WCAG, le ratio de contraste minimal que peuvent avoir les couleurs pour la présentation visuelle du texte et des images de texte est de 4,5:1.

Comment le ratio de contraste des couleurs est-il calculé ? Le ratio de contraste des couleurs est calculé en utilisant la formule de luminance relative définie par les Web Content Accessibility Guidelines (WCAG). Voici le processus : **1. Calcul de la luminance relative** Pour chaque couleur, on calcule d'abord sa luminance relative (L) : - Convertir les valeurs RGB en valeurs sRGB (de 0 à 1) - Appliquer la correction gamma pour chaque composante - Calculer la luminance : L = 0,2126 × R + 0,7152 × V + 0,0722 × B **2. Calcul du ratio de contraste** Le ratio de contraste est calculé avec la formule : **Ratio de contraste = (L1 + 0,05) / (L2 + 0,05)** Où : - L1 = luminance relative de la couleur la plus claire - L2 = luminance relative de la couleur la plus foncée - 0,05 représente la luminance relative du noir **3. Interprétation des résultats** - Ratio de 1:1 = aucun contraste (couleurs identiques) - Ratio de 21:1 = contraste maximum (blanc sur noir) - WCAG AA exige un minimum de 4,5:1 pour le texte normal - WCAG AAA exige un minimum de 7:1 pour une accessibilité optimale Cette méthode standardisée garantit une mesure cohérente du contraste visuel pour l'accessibilité web.

La différence est mesurée sur une échelle de ratio qui va de 1:1 (blanc sur blanc) à 21:1 (noir sur blanc). Selon le niveau AA des WCAG, le ratio de contraste minimal que peuvent avoir les couleurs pour la présentation visuelle du texte et des images de texte est de 4,5:1.

Quel est un ratio de contraste de couleur WCAG acceptable ?
Les directives WCAG 2.1 Niveau AA exigent que la présentation visuelle du texte et des images de texte ait un rapport de contraste d'au moins 4,5:1, à l'exception du texte de grande taille qui doit présenter un rapport de contraste minimum de 3:1. Les directives WCAG 2.1 Niveau AAA requièrent un rapport de contraste d'au moins 7:1 pour le texte normal et de 4,5:1 pour le texte de grande taille (14 points et gras ou plus, ou 18 points ou plus).

Les directives WCAG 2.1 Niveau AA exigent que la présentation visuelle du texte et des images de texte ait un rapport de contraste d'au moins 4,5:1, à l'exception du texte de grande taille qui doit présenter un rapport de contraste minimum de 3:1. Les directives WCAG 2.1 Niveau AAA requièrent un rapport de contraste d'au moins 7:1 pour le texte normal et de 4,5:1 pour le texte de grande taille (14 points et gras ou plus, ou 18 points ou plus).

Les images doivent-elles respecter les exigences de contraste colorimétrique du WCAG ?
Les images doivent respecter les exigences de contraste WCAG. Les images contenant du texte doivent garantir que le contraste entre l'arrière-plan de l'image et le texte est suffisant, particulièrement si les images sont de faible qualité et si l'image doit être agrandie d'une quelconque manière. Les images contenant du texte doivent avoir un ratio de contraste minimum de 4,5:1. Pour les images qui ne contiennent pas de texte mais qui transmettent néanmoins un sens, les composants de l'image doivent toujours avoir un contraste suffisant pour garantir que l'image globale soit perceptible. WCAG 2.1 niveau AA spécifie que les objets graphiques et les composants d'interface personnalisés par l'auteur tels que les icônes, graphiques et diagrammes, boutons, contrôles de formulaire, indicateurs de focus et contours, doivent avoir un ratio de contraste d'au moins 3:1.

Les images doivent respecter les exigences de contraste WCAG. Les images contenant du texte doivent garantir que le contraste entre l'arrière-plan de l'image et le texte est suffisant, particulièrement si les images sont de faible qualité et si l'image doit être agrandie d'une quelconque manière. Les images contenant du texte doivent avoir un ratio de contraste minimum de 4,5:1. Pour les images qui ne contiennent pas de texte mais qui transmettent néanmoins un sens, les composants de l'image doivent toujours avoir un contraste suffisant pour garantir que l'image globale soit perceptible. WCAG 2.1 niveau AA spécifie que les objets graphiques et les composants d'interface personnalisés par l'auteur tels que les icônes, graphiques et diagrammes, boutons, contrôles de formulaire, indicateurs de focus et contours, doivent avoir un ratio de contraste d'au moins 3:1.