Fòrum 2: Creació d'una interfície senzilla i accessible

Què fa que una paleta de colors sigui accessible? (Contrast cromàtic WCAG AA/AAA).

Una paleta és accessible quan compleix el contrast mínim WCAG 2.1:

AA: text normal ≥ 4.5:1

AAA: text normal ≥ 7:1

Això assegura que persones amb dificultats visuals puguin llegir el text sense esforç.

Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)

He escollit el verd lima suau #9DE35F, el verd menta #5FE387 i el negre. Els dos primers colors son els colors de fons i el negre és per la lletra.

He escollit el color lima perquè aporta energia i fa que el disseny sigui més viu.

He triat el color menta perquè és suau i dona una sensació de frescor i equilibri.

També he triat el negre per al text perquè ofereix el millor contrast i millora la lectura.

Els dos verds els he agafat de Adobe Color.

Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant. 

Com es pot veure, els dos colors son compatibles amb el negre

Tria una textura suau o patrons SVG que no saturin la pàgina. Mostra el triat i explica el motiu. Què significa saturar una pàgina a nivell de textura?

Saturar una pagina a nivell de textura vol dir usar un fons massa carregat, amb massa color, contrast o formes, provocant:

• Dificultat per llegir el text.

• Distraccions.

• Sensació de “massa ple”.

Per això he triat una textura molt discreta.

On heu extret la textura? Com l'heu afegit a la pàgina web? Adjunta captures de la pàgina on l'heu extret i captura del codi CSS. 

Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer. 

Tria una font del llistat: Google Fonts Accessible List i afegeix aquesta font al CSS. Adjunta una imatge de la font triada, el motiu pel qual l'heu triat i captura del codi CSS adjuntant la font. 

Com a font he escollit Roboto, ja que és una de les més utilitzades i una de les més accessibles.

Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.  

index.html

colors.css

fonts.css

reset.css

styles.css

textures.css

Format d'entrega

Fitxer