En aquesta pàgina documento la paleta de colors corporativa del meu portfoli: quins colors he triat, què transmeten, com reforcen la imatge de la marca, com els he aplicat a tot el lloc i com he comprovat el contrast i l'accessibilitat.
1. Paleta de colors corporativa
2. Què transmet cada color i per què els he triat
| Color | Codi | Què transmet | On l'utilitzo |
|---|---|---|---|
| Blau fosc | #0B1120, #0F172A, #1E293B | Sobrietat, tecnologia i concentració. Recorda l'ambient d'un terminal o d'una sala de sistemes | Fons de la web, targetes, capçalera i menú lateral |
| Blau | #2563EB, #60A5FA | Confiança, seguretat i estabilitat, valors associats a la informàtica i a les xarxes | Botons, començament del degradat i títols |
| Violeta | #9333EA, #C084FC | Creativitat, innovació i modernitat | Línies sota els subtítols, final del degradat i enllaços |
| Gris clar i blanc | #CBD5E1, #E2E8F0, #FFFFFF | Claredat i neutralitat, per llegir còmodament sobre el fons fosc | Textos, títols i menú |
La combinació de blau i violeta sobre fons fosc reforça la imatge de la marca. El blau transmet la part seriosa i tècnica d'un estudiant de SMX, i el violeta hi afegeix un toc personal i creatiu. El degradat que uneix els dos colors simbolitza evolució i modernitat. Limitar la paleta a dos accents evita que el lloc quedi carregat i fa la marca fàcil de recordar.
3. Aplicació coherent a tot el lloc
- Capçalera: degradat de blau marí a violeta fosc, amb una línia de degradat blau i violeta a sota.
- Títols: el títol principal porta el degradat blau i lila; els subtítols són blancs amb una línia violeta.
- Menú lateral: fons blau fosc, i el Repte desplegat es destaca amb el degradat corporatiu.
- Targetes de contingut: blau pissarra sobre el fons més fosc, per separar bé cada bloc.
- Botons: el mateix degradat blau i violeta a tot el lloc.
- Enllaços: lila clar, amb una línia a sota.
- Codi: lila sobre fons molt fosc, amb lletra monoespaiada.
- Peu de pàgina: fons blau fosc amb enllaços lila, igual que la resta.
Els colors s'han definit una sola vegada a l'estil general del lloc i s'apliquen automàticament a totes les pàgines, així que cap pàgina es desvia de la paleta.
4. Comprovació del contrast i de l'accessibilitat
Un fons fosc només és vàlid si el text es llegeix bé. He calculat la relació de contrast de les combinacions que més faig servir amb la fórmula oficial de les pautes d'accessibilitat WCAG 2.1. Per al text normal, el mínim és 4,5:1 (nivell AA) i el nivell més exigent és 7:1 (nivell AAA).
| Combinació | Ús | Contrast | Resultat |
|---|---|---|---|
| Blanc sobre targeta (#1E293B) | Títols | 14,63:1 | AAA |
| Gris clar #CBD5E1 sobre el fons (#0B1120) | Text general | 12,68:1 | AAA |
| Gris #E2E8F0 sobre targeta | Text de les pàgines | 11,87:1 | AAA |
| Blanc sobre la capçalera (#0F172A) | Nom del lloc | 17,85:1 | AAA |
| Lila #C4B5FD sobre fons de codi (#0F172A) | Codi | 9,67:1 | AAA |
| Lila #A5B4FC sobre targeta | Enllaços | 7,34:1 | AAA |
| Gris #94A3B8 sobre targeta | Dades secundàries | 5,71:1 | AA |
| Blanc sobre blau #2563EB | Botons (inici del degradat) | 5,17:1 | AA |
| Blanc sobre violeta #9333EA | Botons (final del degradat) | 5,38:1 | AA |
| Blau clar #60A5FA i lila #C084FC sobre targeta | Títol principal amb degradat | 5,75:1 i 5,54:1 | AA, i en text gran |
Altres mesures d'accessibilitat que he tingut en compte:
- El color no és l'única pista: els enllaços porten una línia a sota, de manera que es distingeixen també sense veure el color.
- Camps de formulari amb focus visible: en seleccionar-los, s'il·luminen amb una vora violeta.
- Text amb bon interlineat i mida suficient per llegir còmodament.
