menu

Algoritmi

Rapporto di contrasto o Contrasto e Luminosità

Puoi scegliere tra due algoritmi per determinare se i colori vanno bene per l'accessibilità.

  1. Il primo è basato sulle Web content accessibility guidelines (WCAG) versione 2. Questo è un documento del w3c che è il riferimento mondiale per l'accessibilità del web.

    Secondo questo algoritmo:

    Il rapporto di contrasto (contrast ratio) cr tra i due colori dovrebbe essere maggiore o uguale a t.
    Per una normale accessibilità (livello AA secondo le linee guida), t è 4.5 per il testo normale e 3 per il testo grande. Per un'accessibilità migliore (livello AAA secondo le linee guida), t è 7 per il testo normale e 4.5 per il testo grande.

    Un testo è considerato grande se la dimensione del font è almeno 18 punti, 14 punti per un font grassetto o, per font cinesi,giapponesi o coreani (CJK), una dimensione del font che generi risultati simili.

    Per i più diffusi font per le pagine web, 14 e 18 punti sono equivalenti circa a 1.2 e 1.5 em o a 120% e 150% della dimensione di default del font del body della pagina (assumendo che il font del body sia 100%), ma dovresti controllare per il particolare font in uso. Maggiori informazioni le puoi trovare nella definizione di testo grande delle WCAG.

    La formula per determinare cr è:
    cr=(L1 + 0.05) /(L2 + 0.05) dove
    L1 è la luminosità relativa del colore più chiaro ed L2 è la luminosità relativa del colore più scuro.

    La luminosità relativa è calcolata in questo modo:
    L = 0.2126 * R + 0.7152 * G + 0.0722 * B dove R, G e B sono

    • se RsRGB <=0.03928 allora R = RsRGB/12.92 altrimenti R = ((RsRGB + 0.055)/1.055) ^2.4
    • se GsRGB <=0.03928 allora G = GsRGB/12.92 altrimenti G = ((GsRGB + 0.055)/1.055) ^2.4
    • se BsRGB <=0.03928 allora B = BsRGB/12.92 altrimenti B = ((BsRGB + 0.055)/1.055) ^2.4
    dove
    • RsRGB=R8bit/255
    • GsRGB=G8bit/255
    • BsRGB=B8bit/255
    R8bit,G8bit e B8bit sono le componenti red,green,blue di un colore (da 0 a 255) e ^ indica l'elevazione a potenza.
  2. Il secondo è basato sulle Web content accessibility guidelines (WCAG) versione 1 (ora obsolete)

    Secondo questo algoritmo:

    Se i componenti RGB del primo colore sono r1,g1,b1 e del secondo colore sono r2,g2,b2 allora:

    contrasto c
    c=abs(r1-r2) + abs(g1-g2) + abs(b1-b2)
    differenza di luminosità d
    bright1=(299*r1 + 587*g1 + 114*b1)/1000
    bright2=(299*r2 + 587*g2 + 114*b2)/1000
    d=abs(bright1-bright2)

    Per ottenere un buon risultato c dovrebbe essere maggiore di 500 e d maggiore di 125.

Simulazione di daltonismo

Per simulare le deficienze della visione, ho copiato il codice sorgente di un modulo di gimp (un programma di manipolazione di immagini) e l'ho convertito in javascript.

La versione di gimp che ho usato è la 2.3 e l'algoritmo è basato su un articolo di Hans Brettel, Francoise Vienot e John Mollon nel Journal of the Optical Society of America V14(10), pg 2647. (Vedi http://vischeck.com/ per ulteriori informazioni). I riconoscimenti per questo algoritmo sono alla fine della pagina.

Dopo aver ottenuto i nuovi colori con questo algoritmo, calcolo il loro valore di cr, oppure loro valori di c e d a seconda della versione delle WCAG scelta.

Se tutti e 4 i valori (normale, deuteranope, protanope e tritanope) sono buoni, lo script mostra un segno di spunta verde.

Da tener presente che la tritanopia è molto rara.

Links

Per ulteriori informazioni sul daltonismo e un test per scoprire se sei daltonico visita http://colorvisiontesting.com.

Riconoscimenti

Gli autori del modulo di gimp sono:

  • Michael Natterer mitch[at]gimp.org
  • Sven Neumann sven[at]gimp.org
  • Robert Dougherty bob[at]vischeck.com
  • Alex Wade alex[at]vischeck.com

Questo è tutto. Se hai qualche proposta per migliorare la pagina, il codice javascript, il layout o qualsiasi cosa, mandami una mail a [email protected]. Questo è un progetto aperto e sarò felice di migliorarlo!