Criteris d'accessibilitat pels editors de continguts

En aquest apartat s’inclouen els criteris relatius al contrast de color i els que afecten la manera de transmetre informació mitjançant el color.

Contrast de color

Quan es transmet informació, és important que l’usuari la pugui percebre. Si en una pàgina el text i el fons no contrasten a bastament, hi ha usuaris que no en podran percebre la lletra; seria el cas, per exemple, d’una pàgina amb un fons blanc i la lletra de color gris clar. A més, hi ha altres factors que estan indirectament relacionats amb el color i que afecten la percepció del text, com poden ser el tipus, la mida i el format de la lletra. No és igual un contrast entre fons blanc i verd oliva si la lletra és de mida 24 punts o 14 punts o si està en negreta o format senzill; amb aquests colors, algunes combinacions poden ser perceptibles i d’altres no. 

En general, emprar el negre per al text i un fons blanc assegura el contrast. Només s’hauria d’avaluar aquesta característica si es canvia un (o els dos) colors. La relació de contrast depèn de la mida i el format de la lletra. En general, per a una lletra més grossa l’exigència de contrast és menor; passa igual si el text està en negreta. 

Si la lletra és negreta: 

  • mida < 14 punts, contrast de 4,5:1
  • mida >= 14 punts, contrast de 3:1

Si la lletra no té format:

  • mida < 18 punts, contrast de 4,5:1
  • mida >= 18, contrast de 3:1

Igual que el text ha de contrastar respecte al fons, qualsevol element que s’inclou dins una pàgina, com per exemple les imatges, ha de garantir també aquesta característica. A més, en les imatges que inclouen informació (text) també s’ha de tenir en compte el contrast entre el text que contenen i el fons de la imatge mateixa. Les relacions de contrast són exactament les mateixes. 

Existeixen eines web que permeten comprovar fàcilment el contrast de color entre el fons i el primer pla, tenint en compte la mida de la lletra. Una d'aquestes eines és WebAIM

Contrast no textual

Aquest és un concepte nou. La presentació visual dels elements (botons, camps de formulari, gràfics, etc.) ha de tenir, almenys, un contrast de 3:1 amb els colors adjacents. Per exemple, imaginem un gràfic de pastís que té 4 seccions, i per representar-ne cada una empram diferents tons de gris; és possible que hi hagi dos grisos adjacents que tinguin una tonalitat molt semblant i que l’usuari ho percebi com una única secció, de manera que perd informació important del gràfic.

Per tant, és important que els colors adjacents contrastin suficientment per poder distingir-los.

En el cas dels gràfics, s'empren també altres tècniques per diferenciar-ne els elements, independentment del color que tinguin. Als gràfics de barres, per exemple, s'empren trames (textures) diferents per a cada color; d'aquesta forma, es poden distingir les barres independentment del color que tinguin assignat. La imatge 1 en mostra un exemple; a la pàgina que conté aquesta imatge s'ha inclòs, a més, la taula amb la informació numèrica de les dades que genera el gràfic i la descripció dels conceptes que representa.

Una altra tècnica, emprada als gràfics de pastís, és separar les parts (porcions) del gràfic, de manera que no es toquin les unes amb les altres i incloure dins cada part el percentage que li correspon.

Trames per diferenciar els diferents colors de les barres a un gràfic de barres

Imatge 1. Trames per diferenciar les barres, sense dependre del color

 

Informació transmesa mitjançant el color

Què passa quan donam informació o presentam una acció emprant el color com a únic element diferenciador? Suposem una pàgina que demana a l’usuari que carregui unes determinades cookies amb un botó verd per  acceptar les cookies i un botó vermell per rebutjar-les, i les instruccions són: “Pitja el botó verd per acceptar les cookies i el botó vermell per rebutjar-les”. Un usuari daltònic, que no distingeix el verd del vermell, no sabrà quin botó ha de pitjar en cap cas.

Per aquest motiu, és imprescindible que la informació transmesa amb el color es doni també de forma textual.