Llegibilitat del text
Proveu la llegibilitat del text amb diferents combinacions de color i fons, comproveu el contrast segons WCAG i trieu les parelles més còmodes de llegir.
Vista prèvia en temps real
Títol d’exemple
Aquí tens un text d’exemple per provar la llegibilitat. The quick brown fox jumps over the lazy dog. 0123456789
Text més petit per comparar
Puntuació de llegibilitat
Conformitat amb WCAG 2.1
Text normal (≥4,5:1)
Text gran (≥3:1)
Text normal (≥7:1)
Text gran (≥4,5:1)
Configuració
Proveu la llegibilitat del text amb diferents combinacions de color i fons, comproveu el contrast segons WCAG i trieu les parelles més còmodes de llegir.
Llegibilitat del text mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Llegibilitat del text i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Proveu la llegibilitat del text amb diferents combinacions de color i fons, comproveu el contrast segons WCAG i trieu les parelles més còmodes de llegir. Llegibilitat del text es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Llegibilitat del text: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són HEX, RGB, HSL, Texte. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Llegibilitat del text utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Llegibilitat del text ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
text-readability: guia pràctica de accessibility
Guia localitzada per utilitzar text-readability, entendre bones pràctiques de accessibility i evitar errors comuns.
text-readability: guia pràctica de accessibility
Guia localitzada per utilitzar text-readability, entendre bones pràctiques de accessibility i evitar errors comuns.
text-readability: guia pràctica de accessibility
Guia localitzada per utilitzar text-readability, entendre bones pràctiques de accessibility i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.