Tothom hauria de poder llegir els textos
És important que el text es pugui veure i que sigui llegible. Si voleu que els visitants ho comprenguin, han de poder llegir-ho.
Un bon contrast del text assegura que tothom pot veure el text sobre el fons en què es mostra.
No tothom veu els colors de la mateixa manera. WCAG ha definit requisits de contrast específics a les directrius d'accessibilitat WCAG 2.2 AA per garantir que tothom pugui llegir el text. Seguiu aquestes pautes i les nostres pràctiques recomanades de contrast per corregir o prevenir problemes de contrast.
Ally segueix aquestes pautes de contrast per verificar que hi hagi prou contrast entre el color del text i el color del fons. Un mal contrast del text és un problema principal. Els problemes importants afecten l'accessibilitat i, tot i que no són greus, requereixen atenció.
Utilitzar Ally per localitzar text amb poc contrast
Utilitzeu l'informe d'accessibilitat d'Ally per detectar i corregir problemes d'accessibilitat al vostre lloc web. Utilitzeu l'enllaç proporcionat per a l'informe i inicieu la sessió. Obriu l'informe i consulteu la llista de problemes a la taula Problemes d'accessibilitat.
La taula Problemes d'accessibilitat es mostra a les pestanyes Resum i Domini. Comenceu a la pestanya Domini per veure els problemes específics d'un domini.
El text amb poc contrast és un problema principal. Utilitzeu la pestanya Important de la taula Problemes d'accessibilitat per veure la llista de problemes importants. Seleccioneu els problemes de contrast.
Si comenceu a la pestanya Resum, seleccioneu el problema i, a continuació, el domini on hi ha el problema.
Els problemes de contrast es poden mostrar a la llista amb noms que comencin per Document o HTML.
A la llista de problemes de contrast del domini, seleccioneu l'indicador de puntuació al costat d'un element que tingui aquest problema. S'obre el tauler de comentaris de l'editor de contingut.
Vista preliminar del text amb poc contrast
El tauler de comentaris d'Ally us mostra una vista preliminar del contingut, així com comentaris detallats i ajuda per solucionar els problemes d'accessibilitat. Utilitzeu la vista preliminar per veure el text amb poc contrast.
La vista preliminar mostra les parts del document on hi ha problemes d'accessibilitat específics. La vista preliminar mostra tots els casos d'un tipus de problema cada vegada. Per exemple, si el text té poc contrast, la vista preliminar mostra tots els llocs on es produeix aquest problema específic.
Eines de la visualització prèvia
Feu servir les eines de la vista preliminar per explorar els problemes del document.
- Desplaceu-vos per la vista preliminar pàgina a pàgina.
- Comproveu quantes vegades apareix un problema concret.
- Desplaceu-vos pels casos destacats del problema.
- Oculteu o mostreu els casos destacats.
- Apropeu o allunyeu el contingut de la visualització prèvia.
- Si el problema és en un document adjunt, baixeu el fitxer original.
Seguir la guia pas a pas d'Ally per corregir un contrast baix
Ally dona per suposat que teniu coneixements bàsics d'HTML i sabeu com utilitzar el sistema de gestió del contingut (Content Management System, CMS). Per seguir la guia pas a pas, heu de saber editar una pàgina web al codi HTML o codi font del CMS.
Ally també dona per suposat que teniu permís per canviar el color del lloc web. El color sovint està definit a la guia d'estil d'un lloc i pot reflectir la personalització de marca. Abans de fer canvis, consulteu la guia d'estil del lloc.
Junt amb la vista preliminar, Ally us ofereix una guia pas a pas per corregir el problema. Ally organitza aquests comentaris en un arbre de decisions. L'únic que heu de fer és anar seguint les indicacions i responent el que se us va consultant. Obteniu informació sobre quin és el problema, per què és important i com el podeu corregir correctament.
Seleccioneu Com corregir el contrast per seguir les indicacions pas a pas.
Maneres de corregir problemes de contrast
Quan un text té poc contrast, vol dir que no hi ha prou contrast de color entre el text i el fons sobre el qual es mostra.
La guia pas a pas d'Ally explica com canviar el color del text. També podeu canviar el color de fons.
Abans de fer canvis, consulteu la guia d'estil del lloc. El color sovint està relacionat amb la personalització de marca i s'ha d'anar amb compte quan es canvia.
La guia pas a pas d'Ally també explica com fer les actualitzacions al codi font HTML de les pàgines web individuals. Els CMS poden variar. Alguns CMS tenen un editor de text enriquit (Rich Text Editor, RTE) que pot proporcionar maneres fàcils de definir l'estil del text. Amb els RTE , podeu triar un estil predefinit per als encapçalaments, els colors, els tipus de lletra, les imatges, etc. Amb tot, no tots els CMS proporcionen un RTE i requereixen editar el codi font amb HTML. A vegades hi ha disponible HTML i RTE també.
Per als problemes de contrast recurrents, pot ser útil actualitzar la plantilla en lloc de corregir-los d'un en un. Per actualitzar la plantilla calen certs coneixements d'HTML i CSS i poden variar segons la marca del lloc.
Visiteu w3schools per obtenir més informació sobre HTML i CSS
Color HEX o RGB
HEX i RGB són maneres diferents de definir els colors.
- RGB defineix els colors per la quantitat de vermell (red, R), verd (green, G) i blau (blue, B) que utilitza. Per exemple, una tonalitat de vermell es podria definir com RGB (253, 2, 2).
- HEX és un format hexadecimal que defineix els colors pels valors de vermell, verd i blau en una combinació de sis lletres i números. Els hexadecimals comencen amb el número o el símbol de coixinet (#). Per exemple, la mateixa tonalitat de vermell es podria definir com #fd0202.
L'hexadecimal és la manera més habitual de definir els colors de les pàgines web.
Millors pràctiques de contrast del text
Hi ha molts ajustos senzills que podeu fer per millorar la llegibilitat del text.
- Feu servir tipus de lletra amb traces de caràcter amples.
- Utilitzeu una mida de lletra de 12 px com a mínim. Si utilitzeu un tipus de lletra amb traces de caràcter primes, feu servir com a mínim 16 px.
- Feu servir només tipus de lletra “prims” sobre fons foscos.
- Feu servir text clar sobre fons foscos.
- Feu servir text fosc sobre fons clars..
- Eviteu les combinacions següents:
- Verd i vermell
- Verd i marró
- Blau i porpra
- Verd i blau
- Verd clar i groc
- Blau i gris
- Verd i gris
- Verd i negre
No sabeu si el vostre text té prou contrast? Utilitzeu l'analitzador de contrast de color (Colour Contrast Analyser ) de The Paciello Group per revisar el vostre contingut.
Per què és important el contrast del text?
Els textos amb un contrast baix poden ser difícils de llegir en moltes situacions.
- Quan es projecten a classe
- Per a estudiants daltonians
- En un mòbil amb llum clara o reflex a la pantalla
- En monitors de baixa qualitat
El contrast baix pot causar cansament de la vista i fer que el contingut sigui difícil de detectar i explorar, la qual cosa pot causar frustració.
Un bon contrast fa que tothom pugui veure el text clarament i gaudir d’una experiència global millor a l’hora de llegir el contingut.
