El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem com assegurar que el contrast de color i el redimensionament de text siguin accessibles per a tots els usuaris, incloent aquells amb discapacitats visuals. Aquests elements són fonamentals per garantir que el contingut web sigui llegible i comprensible.

Contrast de Color

El contrast de color es refereix a la diferència en lluminositat o color entre el text i el seu fons. Un bon contrast de color és essencial per a la llegibilitat, especialment per a persones amb discapacitats visuals com la daltonisme.

Conceptes Clau

Relació de Contrast: És una mesura de la diferència de lluminositat entre dos colors. Es calcula com una relació que va de 1:1 (cap contrast) a 21:1 (contrast màxim).
Requisits de WCAG: Les Pautes d'Accessibilitat al Contingut Web (WCAG) recomanen una relació de contrast mínima de 4.5:1 per a text normal i 3:1 per a text gran.

Com Comprovar el Contrast de Color

Eines de Contrast de Color: Utilitza eines com el Contrast Checker de WebAIM o l'extensió d'accessibilitat de Chrome per avaluar el contrast de color.
Exemples de Contrast Adequat:
- Text negre sobre fons blanc (21:1)
- Text blau fosc sobre fons groc clar (8.59:1)

Exemples de Codi

<!-- Exemple de text amb bon contrast -->
<p style="color: #000000; background-color: #FFFFFF;">Aquest text té un bon contrast.</p>

<!-- Exemple de text amb mal contrast -->
<p style="color: #777777; background-color: #FFFFFF;">Aquest text té un mal contrast.</p>

Redimensionament de Text

El redimensionament de text permet als usuaris ajustar la mida del text per millorar la llegibilitat. És important assegurar-se que el contingut segueixi sent accessible quan el text es redimensiona.

Bones Pràctiques

Unitats Relatives: Utilitza unitats relatives com em o % en lloc de píxels (px) per definir la mida del text. Això permet que el text s'ajusti fàcilment quan l'usuari canvia la configuració del navegador.
Prova de Redimensionament: Assegura't que el text es pugui redimensionar fins al 200% sense pèrdua de funcionalitat o llegibilitat.

Exemples de Codi

/* Exemple d'ús d'unitats relatives */
body {
    font-size: 100%; /* Equival a 16px per defecte */
}

h1 {
    font-size: 2em; /* 32px si el text base és de 16px */
}

p {
    font-size: 1em; /* 16px si el text base és de 16px */
}

Exercicis Pràctics

Exercici 1: Avaluar el Contrast de Color

Tria una pàgina web que utilitzis sovint.
Utilitza una eina de contrast de color per avaluar el contrast entre el text i el fons.
Anota qualsevol àrea que no compleixi amb els estàndards de WCAG i suggereix millores.

Exercici 2: Provar el Redimensionament de Text

Crea una pàgina HTML amb diversos elements de text.
Aplica estils CSS utilitzant unitats relatives per a la mida del text.
Prova redimensionar el text al 200% i verifica que el contingut segueixi sent llegible i funcional.

Solucions

Solució a l'Exercici 1

Exemple de Millora: Si el text gris clar sobre un fons blanc no compleix amb el contrast mínim, canvia el text a un gris més fosc o el fons a un color més contrastat.

Solució a l'Exercici 2

Verificació: Assegura't que el text no es desbordi dels contenidors i que els elements de la pàgina s'ajustin correctament quan el text es redimensiona.

Conclusió

El contrast de color i el redimensionament de text són aspectes crucials de l'accessibilitat web. Assegurar-se que el text sigui llegible per a tots els usuaris millora l'experiència d'usuari i compleix amb els estàndards d'accessibilitat. En el proper tema, explorarem com implementar l'accessibilitat en JavaScript i multimèdia.

Contrast de Color i Redimensionament de Text