L'accessibilità è la capacità di accedere alla webapp/sito web da parte di un'ampia gamma di pubblico, inclusa una gamma di disabilità.

• Se hai lavorato come sviluppatore di software o hai appena iniziato la tua carriera come sviluppatore nel campo dello sviluppo Web, assicurati che ti imbatterai molto in questa terminologia.
• All'inizio questo potrebbe sembrare futile come principiante, ma man mano che acquisisci intuizioni ed esperienza come sviluppatore web, scoprirai che questo è uno dei fattori più importanti nello sviluppo di un sito web.

Per ora ci concentreremo su cos'è il contrasto cromatico e su come risolverlo.

Una breve introduzione sui criteri di successo WCAG.

1. Bene, ci sono alcune regole/standard per creare una buona applicazione aziendale chiamate regole WCAG a cui puoi fare riferimento qui in dettaglio.
2. Il rapporto di contrasto del colore tra lo sfondo e il contenuto in primo piano (ovvero, di solito il testo) dovrebbe essere sufficientemente elevato da garantire la leggibilità (l'utente dovrebbe essere in grado di leggere il testo senza o con meno difficoltà).
3. Generalmente ci si aspetta che un sito web segua i criteri di contrasto minimo 1.4.3. ma per creare un sito Web completo è necessario seguire i criteri di contrasto avanzato 1.4.6. anche.

Lo strumento migliore per controllare il contrasto cromatico di un sito Web è utilizzare Siteimprove Accessibility Checker . La versione gratuita è più che sufficiente.

1. Esegui questa estensione facendo clic sull'icona dalla barra delle estensioni mentre il tuo sito web è aperto.

3. Ora fai clic sul titolo blu → e evidenzierà l'elemento specifico in cui sta fallendo. (In seguito creerò un altro articolo dettagliato su come utilizzare siteimprove.)

4. E da lì puoi cercare cosa e perché fallisce con i valori del rapporto di contrasto corretti.

Come analizzare e correggere il contrasto del colore

1. Innanzitutto apri la scheda degli strumenti per sviluppatori (se sei in Chrome) facendo clic con il pulsante destro del mouse-> ispeziona o CTRL + MAIUSC + I. E fai clic su questa piccola icona a forma di freccia nella parte superiore della scheda degli strumenti di sviluppo e passa con il mouse sull'elemento evidenziato nella pagina.

3. E per risolvere questo problema in tempo reale puoi semplicemente ispezionare quell'elemento e cambiare il suo codice colore (che di solito è principalmente codice HEX) afferrando il cursore del colore come ho mostrato nella GIF qui sotto.

4. Hai notato come è cambiato il rapporto di contrasto da 1,99 a 4,2✅ e 7,01✅✅?

5. Single ✅ indica che i criteri minimi sono soddisfatti e Double ✅✅ indica che i criteri avanzati sono soddisfatti. (Scegli sempre per il doppio segno di spunta per le app aziendali).

6. Un'altra cosa che puoi fare è utilizzare siti esterni per ottenere il rapporto corretto in tempo reale utilizzando un sito Web simile a questo .

Lì, hai appena imparato quali sono i criteri di contrasto del colore e come risolverlo. E così facendo hai fatto un ulteriore passo avanti nella tua esperienza di sviluppatore. Lascia un like se ti è stato utile.