Kolor tekstu w stronie internetowej zmienisz najczęściej jedną właściwością CSS, czyli color. Pokażę Ci trzy praktyczne sposoby: styl inline, arkusz CSS i klasy, a także dobór wartości kolorów, dziedziczenie stylów, typowe błędy oraz zasady kontrastu, które decydują o czytelności strony.
Kolor tekstu zmienisz szybko, ale najlepiej zrobić to przez CSS
- Właściwość color odpowiada za kolor tekstu i jego dekoracji.
- Styl inline sprawdza się przy pojedynczym fragmencie, lecz nie jest dobrym rozwiązaniem dla całej strony.
- Klasy CSS pozwalają zmieniać kolor wielu elementów bez powtarzania kodu.
- Możesz używać nazw kolorów, wartości HEX, RGB i HSL.
- Tekst powinien zachować kontrast co najmniej 4,5:1 względem tła przy standardowym rozmiarze.
Najprostszy sposób to właściwość color
Za kolor czcionki w HTML odpowiada w praktyce CSS, a dokładniej właściwość color. Najszybszy przykład wygląda tak:
To jest czerwony tekst.
Atrybut style umieszczony w znaczniku HTML zmienia wygląd tylko tego konkretnego elementu. To dobre rozwiązanie do krótkiego testu albo jednorazowego wyróżnienia, ale przy większej stronie szybko prowadzi do bałaganu i trudniejszej edycji.
Możesz zmienić kolor całego nagłówka, akapitu lub fragmentu tekstu. Do pojedynczego słowa użyj na przykład elementu span:
To jest ważna informacja.
Sam korzystam ze stylu inline głównie wtedy, gdy sprawdzam pomysł w prototypie. W gotowym projekcie przenoszę kolor do arkusza CSS, ponieważ późniejsza zmiana jednej reguły jest znacznie wygodniejsza niż poprawianie kilkudziesięciu atrybutów style.
Trzy sposoby zapisania koloru tekstu
CSS pozwala zapisać tę samą barwę na kilka sposobów. Najłatwiejsze są nazwy kolorów, ale w praktyce częściej używa się kodów HEX, wartości RGB albo HSL, ponieważ dają większą kontrolę nad odcieniem.
| Format | Przykład | Kiedy warto go użyć |
|---|---|---|
| Nazwa | red |
Do prostych przykładów i nauki |
| HEX | #e63946 |
Do klasycznych palet projektowych |
| RGB | rgb(230, 57, 70) |
Gdy pracujesz z kanałami czerwonym, zielonym i niebieskim |
| HSL | hsl(355 78% 56%) |
Gdy chcesz łatwo regulować odcień, nasycenie i jasność |
Przykład z kilkoma zapisami może wyglądać tak:
.tekst-czerwony {
color: #e63946;
}
.tekst-zielony {
color: rgb(42, 157, 143);
}
.tekst-niebieski {
color: hsl(210 80% 45%);
}Najczęściej wybieram HEX dla stałych kolorów marki, a HSL wtedy, gdy tworzę całą skalę odcieni. Nazwa blue jest czytelna, ale nie mówi, czy chodzi o granat, błękit czy intensywny niebieski, dlatego w większym projekcie szybko przestaje wystarczać.
Arkusz CSS daje większą kontrolę nad całą stroną
Jeśli chcesz zmienić kolor kilku elementów, utwórz klasę w arkuszu CSS i przypisz ją do wybranych fragmentów HTML. Dzięki temu kolor definiujesz tylko raz:
.opis {
color: #344054;
}
.akcent {
color: #d62828;
}Tekst pomocniczy.
Ważny komunikat.
Możesz też ustawić kolor dla wszystkich akapitów albo nagłówków:
p {
color: #333333;
}
h2 {
color: #1d3557;
}Taka reguła obejmie wszystkie elementy danego typu, chyba że bardziej szczegółowy selektor ją nadpisze. W praktyce polecam nadawać klasy elementom, które mają znaczenie wizualne, zamiast zmieniać globalnie każdy akapit. Dzięki temu unikniesz sytuacji, w której jedna drobna poprawka psuje wygląd całej witryny.
Przeczytaj również: Jak zrobić stronę HTML? Praktyczny poradnik krok po kroku
Dziedziczenie kolorów upraszcza kod
Kolor ustawiony na elemencie nadrzędnym często przechodzi na jego elementy potomne. Przykładowo tekst wewnątrz div odziedziczy jego barwę, jeśli sam nie ma własnej reguły:
.karta {
color: #1f2937;
}
.karta strong {
color: #b42318;
}W tym przykładzie zwykły tekst w karcie będzie ciemnoszary, a element strong otrzyma osobny kolor. To mechanizm dziedziczenia i jedna z rzeczy, które realnie ograniczają liczbę powtarzanych deklaracji CSS.
Jak zmienić kolor wybranego fragmentu bez naruszania reszty
Do wyróżnienia części zdania użyj semantycznie neutralnego elementu span z klasą. HTML opisuje wtedy strukturę treści, a CSS odpowiada za jej wygląd:
Status zamówienia:
gotowe do wysyłki.
.status-gotowe {
color: #137333;
font-weight: 600;
}To lepsze rozwiązanie niż używanie przestarzałego znacznika . Ten sposób może jeszcze zadziałać w przeglądarce, ale nie jest zgodny ze współczesnym podejściem, w którym HTML odpowiada za treść, a CSS za prezentację.
Jeśli kolor ma sygnalizować stan, nie opieraj całego komunikatu wyłącznie na barwie. Czerwony i zielony mogą być trudne do rozróżnienia dla części użytkowników, dlatego dodaj również tekst, ikonę albo odpowiedni symbol:
Błąd. Nie udało się zapisać formularza.
Sam kolor może wzmacniać komunikat, ale nie powinien być jego jedynym nośnikiem. To drobna decyzja projektowa, która robi dużą różnicę dla dostępności.
Najczęstsze błędy przy zmianie koloru czcionki
Jednym z częstszych problemów jest wpisanie właściwości font-color. Taka właściwość nie istnieje, dlatego przeglądarka ją zignoruje. Poprawna forma to zawsze color.
/* Niepoprawnie */
p {
font-color: blue;
}
/* Poprawnie */
p {
color: blue;
}Drugi problem pojawia się wtedy, gdy kolor nie działa mimo poprawnej składni. Przyczyną może być bardziej szczegółowa reguła CSS albo deklaracja z !important. Najpierw sprawdź element w narzędziach deweloperskich przeglądarki i zobacz, która reguła faktycznie wygrywa.
Nie warto od razu ratować się !important. Ta instrukcja wymusza pierwszeństwo stylu, lecz utrudnia późniejsze zarządzanie kodem. Zwykle lepiej poprawić selektor, usunąć konflikt albo uporządkować kolejność reguł.
Kolor może też wyglądać inaczej, niż zakładasz, gdy tekst znajduje się na obrazie, gradiencie lub zmiennym tle. W takim przypadku testuj cały komponent, a nie tylko sam kod koloru w edytorze.
Czytelność zależy od kontrastu, nie tylko od odcienia
Ładny kolor nie zawsze jest dobrym kolorem tekstu. Dla zwykłego tekstu zalecany kontrast względem tła wynosi co najmniej 4,5:1, a dla dużego tekstu minimum to 3:1. Im mniejsza czcionka i cieńszy krój, tym bardziej odczuwalny staje się niski kontrast.
Przykład jasnoszarego tekstu na białym tle może wyglądać subtelnie w projekcie graficznym, ale w praktyce będzie męczący dla wielu osób. Zanim zaakceptujesz paletę, sprawdź ją w analizatorze kontrastu albo w narzędziach dostępności przeglądarki.
Dobrym rozwiązaniem jest zapisanie kolorów jako zmiennych CSS. Ułatwia to zmianę motywu, przygotowanie trybu ciemnego i utrzymanie spójności całego interfejsu:
:root {
--kolor-tekstu: #1f2937;
--kolor-akcentu: #b42318;
--kolor-tla: #ffffff;
}
body {
color: var(--kolor-tekstu);
background-color: var(--kolor-tla);
}
a {
color: var(--kolor-akcentu);
}W mojej praktyce właśnie zmienne CSS są najlepszym krokiem po opanowaniu klas. Nie rozwiązują każdego problemu, ale sprawiają, że zmiana całej palety zajmuje kilka minut zamiast przeszukiwania wielu plików.
Dobry kolor tekstu zaczyna się od prostego CSS
Jeżeli chcesz zmienić kolor jednego fragmentu, użyj style="color: ..." albo klasy przypisanej do elementu. Przy całej stronie wybierz arkusz CSS, klasy i zmienne, a następnie sprawdź, czy kolor nie przegrywa z inną regułą.
Najważniejsza zasada jest prosta: kolor ma wspierać czytelność i znaczenie treści, a nie tylko dekorować stronę. Poprawna właściwość, świadomy format koloru i odpowiedni kontrast wystarczą, aby zmiana wyglądu tekstu była szybka, przewidywalna i zgodna ze współczesnymi standardami tworzenia stron.
