1. Cerca i selecció de la paleta de colors accessible. (20%)
- Què fa que una paleta de colors sigui accessible? (Contrast cromàtic WCAG AA/AAA).
Una paleta es accesible cuando cumple los niveles de contraste recomendados por las WCAG (AA y AAA).
Esto significa que el texto y el fondo deben tener suficiente contraste para que las personas con visión reducida o daltonismo puedan leerlo sin dificultad. Cuanto mayor es el ratio, más fácil es leerlo.
Los mínimos son:
AA (texto normal): 4.5:1
AA (texto grande): 3:1
AAA (texto normal): 7:1
- Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
Para mi pàgina he escogido una paleta de azules (#1F2D3D, #D8E6F3) con la pàgina adobe color, usando la opción de "Tonos", que permite desplazarte por la rueda cromàtica siguiendo una misma línea de tonos. Como tercer color he escogido el blanco (#FFFFFF) para conseguir un mayor contraste sobre todo con los textos y los contenedores, usando el blanco como fondo principal.
- Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.
2. Selecció de textura o patró de fons. (20%)
- 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?
He elegido una textura muy ligera como de papel porque no satura la página y mantiene el estilo minimalista. Una página “saturada” significa que el fondo tiene demasiados detalles, colores o patrones fuertes que distraen o dificultan leer el contenido. La textura que he elegido apenas se nota, pero ayuda a que el fondo no sea completamente plano, aportando un estilo más cuidado sin perder lo simple.
- 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.
La textura la he extraído de la pagina toptal, que es un repositorio de imagenes con textura/patrones de libre uso.
- Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
3. Elecció de font accessible. (10%)
- 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.
https://fonts.google.com/specimen/Atkinson+Hyperlegible
1. Cerca i selecció de la paleta de colors accessible. (20%)
- Què fa que una paleta de colors sigui accessible? (Contrast cromàtic WCAG AA/AAA).
Una paleta es accesible cuando cumple los niveles de contraste recomendados por las WCAG (AA y AAA).
Esto significa que el texto y el fondo deben tener suficiente contraste para que las personas con visión reducida o daltonismo puedan leerlo sin dificultad. Cuanto mayor es el ratio, más fácil es leerlo.
Los mínimos son:
AA (texto normal): 4.5:1
AA (texto grande): 3:1
AAA (texto normal): 7:1
- Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
Para mi pàgina he escogido una paleta de azules (#1F2D3D, #D8E6F3) con la pàgina adobe color, usando la opción de "Tonos", que permite desplazarte por la rueda cromàtica siguiendo una misma línea de tonos. Como tercer color he escogido el blanco (#FFFFFF) para conseguir un mayor contraste sobre todo con los textos y los contenedores, usando el blanco como fondo principal.
- Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.
2. Selecció de textura o patró de fons. (20%)
- 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?
He elegido una textura muy ligera como de papel porque no satura la página y mantiene el estilo minimalista. Una página “saturada” significa que el fondo tiene demasiados detalles, colores o patrones fuertes que distraen o dificultan leer el contenido. La textura que he elegido apenas se nota, pero ayuda a que el fondo no sea completamente plano, aportando un estilo más cuidado sin perder lo simple.
- 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.
La textura la he extraído de la pagina toptal, que es un repositorio de imagenes con textura/patrones de libre uso.
- Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
3. Elecció de font accessible. (10%)
- 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.
He elegido Atkinson Hyperlegible porque forma parte de las fuentes más accesibles de Google Fonts. Según los creadores está diseñada especialmente para mejorar la lectura de personas con baja visión. Pienso que su forma encaja con el estilo minimalista de la web.
4. Layout HTML/CSS bàsic. (20%)
- Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc.
- Realitza una plantilla de fitxer CSS (General) i una plantilla per CSS de fonts, colors, textures, reset, etc. Adjunta imatge de com fas l'enllaç entre el CSS general i la resta d'arxius d'estils.
- Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.
4. Layout HTML/CSS bàsic. (20%)
- Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc.
- Realitza una plantilla de fitxer CSS (General) i una plantilla per CSS de fonts, colors, textures, reset, etc. Adjunta imatge de com fas l'enllaç entre el CSS general i la resta d'arxius d'estils.
- Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.