diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-07-14 10:39:25 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-14 10:39:25 +0200 |
commit | 110a7a1592789759f0f427f40856899ea2c3cfd7 (patch) | |
tree | 1b4854c4a2f6bbdb4cf716a0bb7ddb108a7b4751 /files/fr/web/accessibility | |
parent | f4473fd7bab0912ce8a39d8523079a7cbdbdf68e (diff) | |
download | translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.gz translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.tar.bz2 translated-content-110a7a1592789759f0f427f40856899ea2c3cfd7.zip |
fixes fr #1440 (#1448)
* fixes #1440 for fr
* UPDT: Update Backgrounds_and_borders
* UPDT: Update The_web_and_web_standards
* UPDT: Update First_steps/Arrays
* UPDT: Update First_steps/Math
* UPDT: Update Silly_story_generator
* UPDT: Update Django/development_environment
* UPDT: Update Client-side_JavaScript_frameworks
* UPDT: Update Command_line
* UPDT: Update API/tabs
* RMV: Removing tags
* UPDT: Cleanup html of Add-ons/WebExtensions
* UPDT: Fix flaws on WebExtensions/Native_messaging
* FIX: Fix flaws on Accessibility_inspector/Simulation
* UPDT: Html cleanup on Color_contrast
* UPDT: Mega html cleanup for Document_Object_Model/Introduction
* FIX: Fix flaws for API/Element
* UPDT: Update BCD
* FIX: Wrong link lang
* UPDT: Fix flaws/links
* FIX: Img flaws and link lang
* FIX: links error and html
* UPDT: Links and cleanup html
* FIX: link lang
* FIX: link lang
* FIX: broken example
* FIX: fix broken example and html
Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>
Diffstat (limited to 'files/fr/web/accessibility')
-rw-r--r-- | files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 8b3578c121..32d2c8465d 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -10,7 +10,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ --- <p>Le <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste de la couleur</a> entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</span></span></p> +<p>Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</p> <table class="standard-table"> <thead> @@ -32,24 +32,24 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ <td>4.5 : 1</td> </tr> <tr> - <td><span class="tlid-translation translation" lang="fr"><span title="">Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</span></span></td> + <td>Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</td> <td>3 : 1</td> <td>Non défini</td> </tr> </tbody> </table> -<p><span class="tlid-translation translation" lang="fr"><span title="">Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</span></span></p> +<p>Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</p> <p>Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches.</span> <span title="">En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</span></span></p> +<p>Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</span></span></p> +<p>C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</p> <h2 id="Exemples">Exemples</h2> -<p>Jetons un coup d<span class="tlid-translation translation" lang="fr"><span title="">'œil à du</span></span> code HTML et CSS assez simple:</p> +<p>Jetons un coup d'œil à du code HTML et CSS assez simple:</p> <pre class="brush: html"><div class="bon">Bon contraste</div> <div class="mauvais">Mauvais contraste</div></pre> @@ -66,7 +66,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ background-color: #400064; }</pre> -<p><span class="tlid-translation translation" lang="fr"><span title="">Les deux textes ont leur couleur noire par défaut.</span></span> La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> +<p>Les deux textes ont leur couleur noire par défaut. La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> <div class="hidden"> <h4 id="exemple1">exemple1</h4> @@ -125,39 +125,39 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ <h2 id="Solution">Solution</h2> -<p><span class="tlid-translation translation" lang="fr"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste.</span> <span title="">Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</span></span></p> +<p>Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</span></span></p> +<p>Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</p> -<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> +<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a href="https://webaim.org/resources/contrastchecker/">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> -<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> +<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="/fr/docs/Tools/Accessibility_inspector">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> -<h2 id="Critères_de_réussite_associés_aux_WCAG"><span class="tlid-translation translation" lang="fr"><span title="">Critères de réussite associés aux WCAG</span></span></h2> +<h2 id="Critères_de_réussite_associés_aux_WCAG">Critères de réussite associés aux WCAG</h2> <dl> <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste minimum (AA)</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité:</span></span> + <dd>Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: <ul> <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.</li> <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.</li> </ul> </dd> <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste amélioré (AAA)</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Cela suit et s'appuie sur le critère 1.4.3.</span></span> + <dd>Cela suit et s'appuie sur le critère 1.4.3. <ul> <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.</li> <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.</li> </ul> </dd> <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste non textuel (AA)</a> (ajouté en 2.1)</dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</span></span></dd> + <dd>Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Comprendre le contraste non textuel</a></li> </ul> |