Kurs HTML

Wprowadzenie: Nadawanie koloru literom

Właściwość color w CSS służy do ustawiania koloru pierwszoplanowego (foreground color) zawartości tekstowej elementu. Jest to jedna z najbardziej podstawowych i najczęściej używanych właściwości CSS, fundamentalna dla wyglądu i czytelności strony.

Wartością właściwości color może być dowolny poprawny format koloru CSS, który poznaliśmy w poprzednim rozdziale (Rozdział 4: Jednostki i Kolory w CSS).

Użycie właściwości color

Właściwość color stosuje się do selektora elementu, którego tekst chcemy pokolorować.

Przykłady użycia różnych formatów kolorów:

/* Użycie nazw kolorów */
p {
  color: black;
}

.ostrzezenie {
  color: red;
}

/* Użycie kodów HEX */
h1 {
  color: #333; /* Ciemnoszary */
}

a {
  color: #007bff; /* Niebieski */
}

/* Użycie RGB */
.sukces {
  color: rgb(40, 167, 69); /* Zielony */
}

/* Użycie RGBA (dla półprzezroczystego tekstu - rzadziej stosowane, może pogorszyć czytelność) */
.subtelny-tekst {
  color: rgba(0, 0, 0, 0.6); /* Ciemnoszary, 60% krycia */
}

/* Użycie HSL */
.informacja {
  color: hsl(180, 100%, 35%); /* Ciemny cyjan */
}

/* Użycie HSLA */
.placeholder-text {
  color: hsla(0, 0%, 50%, 0.7); /* Półprzezroczysty szary */
}

/* Użycie currentColor (dziedziczenie koloru) */
button {
  color: white;
  background-color: blue;
}

button svg {
  /* Ikona SVG wewnątrz przycisku przyjmie kolor tekstu przycisku (biały) */
  fill: currentColor;
}Kopiuj

Dziedziczenie koloru tekstu

Właściwość color jest **dziedziczona**. Oznacza to, że jeśli nie ustawisz jawnie koloru dla elementu, przyjmie on obliczoną wartość właściwości color swojego elementu nadrzędnego (rodzica).

Dlatego często wystarczy ustawić bazowy kolor tekstu dla elementu body, a większość elementów na stronie (paragrafy, listy, itp.) automatycznie go odziedziczy.

body {
  color: #212529; /* Ustawienie bazowego koloru tekstu dla całej strony */
  font-family: sans-serif;
}

h1 {
  /* H1 nie ma zdefiniowanego koloru, więc odziedziczy #212529 z body */
  font-size: 2.5rem;
}

p {
  /* Paragrafy również odziedziczą kolor z body */
  line-height: 1.6;
}

.akcent {
  /* Ten element ma jawnie ustawiony inny kolor */
  color: darkorange;
}

.akcent span {
  /* Span wewnątrz .akcent odziedziczy kolor darkorange */
  font-weight: bold;
}Kopiuj

Kolor tekstu a dostępność (Kontrast)

Wybierając kolor tekstu, **niezwykle ważne jest zapewnienie odpowiedniego kontrastu** między kolorem tekstu a kolorem tła (background-color), na którym jest wyświetlany. Niski kontrast utrudnia lub uniemożliwia odczytanie treści osobom słabowidzącym, a także może być męczący dla oczu wszystkich użytkowników.

Wytyczne dotyczące dostępności treści internetowych (WCAG - Web Content Accessibility Guidelines) definiują minimalne wymagania dotyczące współczynnika kontrastu:

• Poziom AA (minimalny):
  • Współczynnik kontrastu co najmniej 4.5:1 dla normalnego tekstu.
  • Współczynnik kontrastu co najmniej 3:1 dla dużego tekstu (18pt/24px lub 14pt/18.5px pogrubiony).
• Poziom AAA (rozszerzony):
  • Współczynnik kontrastu co najmniej 7:1 dla normalnego tekstu.
  • Współczynnik kontrastu co najmniej 4.5:1 dla dużego tekstu.

Istnieje wiele narzędzi online i wbudowanych w przeglądarki (np. w narzędziach deweloperskich), które pozwalają sprawdzić współczynnik kontrastu między dwoma kolorami.

Przykłady:

• Czarny tekst (#000000) na białym tle (#FFFFFF) ma maksymalny kontrast 21:1 (bardzo dobry).
• Szary tekst (#777777) na białym tle (#FFFFFF) ma kontrast 4.6:1 (spełnia AA dla normalnego tekstu).
• Jasnoszary tekst (#CCCCCC) na białym tle (#FFFFFF) ma kontrast 1.6:1 (zbyt niski, niespełniający wymagań).
• Biały tekst (#FFFFFF) na niebieskim tle (#007bff) ma kontrast 4.2:1 (spełnia AA dla dużego tekstu, ale nie dla normalnego).

Zawsze testuj kontrast kolorów, aby zapewnić czytelność i dostępność Twojej strony!