Kolory, tła i czcionki w CSS

Harmonijna paleta, typografia i UX · INF.03

Wstęp

Prawidłowy dobór kolorów i fontów w CSS decyduje o odbiorze strony i wygodzie użytkownika. Stosuj wysoki kontrast, spójność oraz wyraźne akcenty.

Paleta barw

  • Kolor tła: background-color
  • Kolor tekstu: color
  • Kolor akcentów (linki, wybrane przyciski): odede>#e54f2b
  • Kodowanie barw: szesnastkowe #0a66c2, RGB lub nazwy.
  • Paleta: max. 3 kolory – tło, tekst, akcent. Testuj kontrast.
body { background: #f8fcff; color: #212a40;} a { color: #e54f2b; } .highlight { background: #fffcd5; color: #212a40; }

Czcionki i typografia

  • Podstawowy font: font-family – np. 'Segoe UI', Arial, sans-serif.
  • Nagłówki (h1/h2): odede>'Montserrat', Arial, sans-serif
  • Pogrubienie: font-weight: 700
  • Rozmiar tekstu: font-size, dla treści 16–18px.
  • Spokojne fonty bezszeryfowe poprawiają UX.
body { font-family: 'Segoe UI', Arial, sans-serif; } h1 { font-family: 'Montserrat', Arial, sans-serif; font-size: 28px;} p { font-size: 17px; line-height: 1.6;}

Zadanie CSS

Ćwiczenie: Dobierz minimum 3 kolory do swojej strony, ustal font nagłówka i styl akcentu dla linków.
body { background: #fff; color: #333; font-family: Arial, sans-serif; } h1 { color: #3795e0; font-family: 'Montserrat', sans-serif;} a { color: #f5793b;}

Checklista UX/Design

  • Zapewniam wysoki kontrast i czytelność tekstu
  • Używam tylko 2–3 dominujących barw
  • Stosuję fonty bezszeryfowe na ekranie
  • Akcentuję ważne elementy kolorem