{"id":161,"date":"2024-08-12T15:56:56","date_gmt":"2024-08-12T15:56:56","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=161"},"modified":"2024-08-23T12:03:45","modified_gmt":"2024-08-23T12:03:45","slug":"come-verificare-contrasto-colore","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-verificare-contrasto-colore\/","title":{"rendered":"Come verificare il contrasto colore per l'accessibilit\u00e0"},"content":{"rendered":"<p>Abbiamo gi\u00e0 parlato in modo generico del <a href=\"https:\/\/www.accessibilita.digital\/il-contrasto-e-i-colori-per-i-siti-web-accessibili\/\">contrasto colore<\/a>. Vediamo un esempio pratico. Supponiamo che il nostro sito web abbia uno <strong>sfondo bianco<\/strong> e il <strong>testo di colore nero<\/strong> (esadecimale #000). In questo caso, <strong>il rapporto di contrasto<\/strong> tra sfondo e testo sar\u00e0 massimo, cio\u00e8 di <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"nofollow noopener\">21:<\/a><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"nofollow noopener\">1<\/a>. Diversamente, supponiamo di avere uno sfondo bianco ma un testo grigio medio, ad esempio un esadecimale #888: in questo caso il contrasto \u00e8 di <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"nofollow noopener\">3,54:1<\/a> ed \u00e8 quindi molto basso, non soddisfa n\u00e9 il criterio della tripla A e nemmeno quello della doppia A.<\/p>\n\n<h2>Criteri di riferimento<\/h2>\n<p>I criteri di riferimento sono:<\/p>\n<ul>\n<li>Level AA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-minimum\" rel=\"nofollow noopener\">1.4.3 Contrast (Minimum)<\/a><\/li>\n<li>Level AA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#non-text-contrast\" rel=\"nofollow noopener\">1.4.11 Non-text Contrast<\/a><\/li>\n<li>Level AAA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-enhanced\" rel=\"nofollow noopener\">1.4.6 Contrast (Enhanced)<\/a><\/li>\n<\/ul>\n<p>Proviamo a riassumere i <b>concetti principali<\/b> che dobbiamo conoscere:<\/p>\n<ul>\n<li>Per il livello AA, Il testo e le immagini di testo devono avere <b>un contrasto di almeno 4,5:1<\/b> rispetto allo sfondo, oppure di <b>almeno 3:1 per testi e immagini di testo largo<\/b> (testo di almeno 18pt normale, o 14pt in grassetto)<\/li>\n<li>Per il livello AAA, il testo e le immagini di testo devono avere un contrasto di almeno 7:1, oppure di almeno 4,5:1 per testi pi\u00f9 larghi.<\/li>\n<li>I testi decorativi o di componenti inattivi e i testi che fanno parte di un logotipo <b>non hanno requisiti di contrasto<\/b><\/li>\n<li>I <b>componenti dell\u2019interfaccia utente<\/b> e gli <b>oggetti grafici<\/b> devono avere un contrasto di almeno <b>3:1<\/b><\/li>\n<\/ul>\n<h2>Verifica del contrasto colore<\/h2>\n<p>Questo tipo di verifiche va fatto <b>continuamente<\/b> sia quando si crea il design grafico, sia quando si sviluppa il sito web applicando il layout grafico in HTML e CSS. Alcuni <a href=\"https:\/\/www.accessibilita.digital\/strumenti-per-la-verifica-del-contrasto-colore\/\">strumenti automatici<\/a><b> ci aiutano in questo<\/b>, anche lo stesso <b>Figma<\/b> pu\u00f2 essere configurato in tal senso, ad esempio tramite il plugin <a href=\"https:\/\/www.figma.com\/community\/plugin\/733159460536249875\/a11y-color-contrast-checker\" rel=\"nofollow noopener\">A11y &#8211; Color Contrast Checker<\/a>.<\/p>\n<p>Per la parte di <b>sviluppo web<\/b>, possiamo usare <a href=\"https:\/\/wave.webaim.org\/\" rel=\"nofollow noopener\">WAVE<\/a> o <a href=\"https:\/\/www.ibm.com\/able\/\" rel=\"nofollow noopener\">IBM Equal Accessibility Checker<\/a> per fare una scansione della pagina in tempo reale e trovare eventuali problemi, anche di contrasto.<\/p>\n<p>Tuttavia \u00e8 bene <b>ricordarsi di controllare manualmente<\/b>, e non solo con strumenti automatici, selezionando l\u2019effettivo colore di sfondo e del testo <b>da inspector <\/b><b>del browser<\/b>, ad esempio in questo modo:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-162 size-large aligncenter\" src=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-1024x349.png\" alt=\"\" width=\"1024\" height=\"349\" srcset=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-1024x349.png 1024w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-300x102.png 300w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-768x262.png 768w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-1536x524.png 1536w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata-600x205.png 600w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-4-Modificata.png 1613w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Verifichiamo il codice colore del titolo<\/figcaption><\/figure>\n<p>Il colore del titolo corrisponde al codice esadecimale #005a6a mentre lo sfondo della pagina \u00e8 bianco, esadecimale #fafafc. Inseriamo questi valori in uno strumento di verifica del contrast, ad esempio su <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=005A6A&amp;bcolor=FAFAFC\" rel=\"nofollow noopener\">WebAIM<\/a>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-163 size-full aligncenter\" src=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-5-Originale.png\" alt=\"\" width=\"710\" height=\"534\" srcset=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-5-Originale.png 710w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-5-Originale-300x226.png 300w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-5-Originale-332x250.png 332w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><figcaption>Il rapporto di contrasto colore tra testo e sfondo \u00e8 di 7,54:1<\/figcaption><\/figure>\n<p>Otteniamo dunque un <b>rapporto di 7,54:1<\/b> che \u00e8 conforme sia al livello della doppia A sia a quello della tripla A. In realt\u00e0, se vogliamo essere precisi, poich\u00e9 questo testo ha una <b>grandezza carattere di 32px<\/b>, richiede per la tripla A un contrasto colore di 4,5:1, perch\u00e9 \u00e8 abbastanza grande da essere visto facilmente, quindi <b>potrebbe avere anche un contrasto pi\u00f9 basso<\/b>.<\/p>\n<h2>Risorse utili<\/h2>\n<p>Strumenti online:<\/p>\n<ul>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"nofollow noopener\">WebAIM Contrast Checker<\/a><\/li>\n<li><a href=\"https:\/\/userway.org\/contrast\/?fg=000000&amp;bg=ffffff\" rel=\"nofollow noopener\">UserWay Color Contrast Checker<\/a><\/li>\n<li><a href=\"https:\/\/color.adobe.com\/create\/color-contrast-analyzer\" rel=\"nofollow noopener\">Adobe Color Contrast Analyzer<\/a><\/li>\n<li><a href=\"https:\/\/dequeuniversity.com\/color-contrast\" rel=\"nofollow noopener\">Deque Color Contrast Analyzer<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html#resources\" rel=\"nofollow noopener\">Lista completa sul sito del W3C<\/a><\/li>\n<\/ul>\n<p>Estensioni per Google Chrome:<\/p>\n<ul>\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/wcag-color-contrast-check\/plnahcmalebffmaghcpcmpaciebdhgdf\" rel=\"nofollow noopener\">WCAG Color contrast checker<\/a><\/li>\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/colour-contrast-checker\/nmmjeclfkgjdomacpcflgdkgpphpmnfe\" rel=\"nofollow noopener\">Colour Contrast Checker<\/a><\/li>\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/color-contrast-checker\/gbfgefkhkofclanlcgnhlbmfgjjomock\" rel=\"nofollow noopener\">Color Contrast Checker<\/a><\/li>\n<\/ul>\n<p>Estesioni per Mozilla Firefox:<\/p>\n<ul>\n<li><a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/wcag-contrast-checker\/\" rel=\"nofollow noopener\">WCAG Contrast checker<\/a><\/li>\n<\/ul>\n<p>Software Windows e Mac:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\" rel=\"nofollow noopener\">Colour Contrast Analyzer (CCA)<\/a><\/li>\n<\/ul>\n<p>Plugin per Figma:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/733159460536249875\/a11y-color-contrast-checker\" rel=\"nofollow noopener\">A11y &#8211; Color Contrast Checker<\/a><\/li>\n<\/ul>\n<p>Link ai criteri WCAG:<\/p>\n<ul>\n<li>Level AA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-minimum\" rel=\"nofollow noopener\">1.4.3 Contrast (Minimum)<\/a><\/li>\n<li>Level AA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#non-text-contrast\" rel=\"nofollow noopener\">1.4.11 Non-text Contrast<\/a><\/li>\n<li>Level AAA: <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#contrast-enhanced\" rel=\"nofollow noopener\">1.4.6 Contrast (Enhanced)<\/a><\/li>\n<\/ul>\n<h2><span id=\"leggi-anche\">Leggi anche<\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-possiamo-rendere-accessibile-un-sito-web\/\">Come possiamo rendere accessibile un sito web<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/accessibilita-gli-obblighi-da-giugno-2025-per-i-privati\/\">Accessibilit\u00e0: Gli obblighi da Giugno 2025 per i privati<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/accessibilita-i-sottotitoli-e-le-alternative-testuali\/\">Accessibilit\u00e0: I sottotitoli e le alternative testuali<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/le-linee-guida-internazionali-wcag-e-i-livelli-a-aa-e-aaa\/\">Le linee guida internazionali WCAG e i livelli A, AA e AAA<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Abbiamo gi\u00e0 parlato in modo generico del contrasto colore. Vediamo un esempio pratico. Supponiamo che il nostro sito web abbia uno sfondo bianco e il testo di colore nero (esadecimale #000). In questo caso, il rapporto di contrasto tra sfondo e testo sar\u00e0 massimo, cio\u00e8 di 21:1. Diversamente, supponiamo di avere uno sfondo bianco ma [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":253,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/161"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":5,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/161\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/161\/revisions\/254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/253"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}