1. BÚSQUEDA Y SELECCIÓN DE LA PALETA DE COLORES
1.1. ¿Qué hace que una paleta de colores sea accesible?
Una paleta de colores es accesible cuando tiene un buen contraste, ésto ayuda a que la página web sea usable por todas las personas independientemente de sus problemas de visión entre otras cosas. Ésto lo podemos comprobar con el WCAG, unas pautas que establecen dos niveles:
Nivel AA: Ratio de 4.4:1 (mínimo).
Nivel AAA: Ratio de 7:1.
1.2. Explica la selección de colores que has elegido. Elige 2-3 colores
He elegido dos colores principales para "Beauty World", que son el azul y el blanco. Estaba buscando una paleta de colores para una marca de cremas, jabones... El azul y el blanco se asocia mucho con el baño, una elección clásica.
1.3. Utiliza la herramienta Color Contrast Checker o WebAIM Contrast Checker para evaluar el contraste de la paleta de colores
He utilizado las dos herramientas para evaluar mi paleta de colores.
2. SELECCIÓN DE TEXTURA O PATRÓN DE FONDO
2.1. Elige una textura suave o patrones SVG que no saturen la página. Muestra el elegido y explica el motivo.
He elegido este patrón, puede no verse a simple vista pero son puntos de color blanco muy juntos. He querido "imitar" la textura de la crema, por eso he elegido este patrón, es suave y no satura, es casi imperceptible a la vista pero no es un blanco puro.
¿Qué significa saturar una página web a nivel de textura?
Significa que el fondo es muy denso, es decir que tenga un alto contraste, que esté lleno de elementos gráficos... Si se satura se dificulta la lectura y puede llegar a generar fatiga visual entre otras cosas.
2.2. ¿De dónde habéis extraído la textura? ¿Cómo la habéis añadido a la página web?
La he extraído de una página web, en un apartado de texturas:
Descargué el archivo y lo añadí en forma de imagen en el .css:
2.3. Adjunta captura resultante de la página con la textura de fondo, el header y el footer.
3. ELECCIÓN DE UNA FUENTE ACCESIBLE
3.1. Elige una fuente del listado: Google Fonts Accessible List y añade esta fuente al CSS.
He elegido la fuente "Lato" de Google Fonts. Esta es una fuente sans-serif muy valorada por su accesibilidad y estética moderna y limpia, justo lo que necesito para un acabado claro y profesional a mi página web.
4. LAYOUT HTML/CSS BÁSICO
4.1. Realización de una plantilla de fichero HTML con divs para header, menú, main, footer, etc.
4.2. Realización de una plantilla de fichero CSS (General) y una plantilla para CSS de fuentes, colores, texturas, reset, etc. Adjunta imagen de cómo haces el enlace entre el CSS general y el resto de archivos de estilos.
4.3. Adjunta una captura de pantalla (o varias) de la estructura de carpetas del proyecto donde se vean los diferentes CSS, HTML, etc.
