Gdy tekst na stronie wygląda zbyt blado, nie pasuje do identyfikacji wizualnej albo ginie na tle, zwykle wystarczy jedna właściwość CSS. Jeśli zastanawiasz się, jak zmienić kolor tekstu html, pokażę Ci działające metody, różnice między zapisami kolorów, przykłady dla pojedynczych fragmentów oraz sposoby naprawy typowych błędów.
Kolor tekstu ustawisz właściwością CSS color
-
Najprostszy zapis to
color: red;dodane do elementu. - Najlepsza praktyka polega na użyciu klasy CSS zamiast stylu inline.
-
Kolor możesz zapisać nazwą, kodem HEX, funkcją
rgb()albohsl(). - Czytelność zależy od kontrastu tekstu i tła, nie tylko od atrakcyjnego odcienia.
- Brak efektu najczęściej wynika z błędnej składni, nadpisania stylu albo niewłaściwego selektora.
Najprostszy sposób na zmianę koloru tekstu
Za kolor tekstu odpowiada w CSS właściwość color. Możesz użyć jej bezpośrednio w elemencie HTML, na przykład w akapicie:
Ten tekst jest niebieski.
Atrybut style działa tylko na konkretny element, dlatego ten zapis jest dobry do szybkiego testu lub jednorazowego wyróżnienia. W codziennej pracy nie stosuję go jednak bez potrzeby, bo przy większej stronie szybko prowadzi do powielania tych samych reguł.
Możesz też zmienić kolor nagłówka, linku albo fragmentu zdania:
Fioletowy nagłówek
Zielony link
To jest wyróżniony fragment tekstu.
Do pojedynczego słowa lub zdania najlepiej pasuje element span. Nie zmienia on układu strony, a pozwala nadać kolor wybranej części tekstu. Sam kolor nie powinien jednak zastępować znaczenia, na przykład komunikat „błąd” lepiej opisać także słowem lub ikoną.
Trzy sposoby zapisu reguły CSS
Ten sam efekt możesz osiągnąć na trzy sposoby. Różnica dotyczy głównie miejsca, w którym zapisujesz regułę, oraz tego, jak łatwo później ją utrzymać.
| Metoda | Przykład | Kiedy jej użyć |
|---|---|---|
| Styl inline | style="color: red" |
Szybki test lub pojedynczy element |
| Arkusz w dokumencie | |
Mała strona lub prototyp |
| Osobny plik CSS | .uwaga { color: red; } |
Większa strona i wielokrotne użycie stylu |
Styl inline
Reguła wpisana w atrybucie style jest najkrótsza:
Ważna informacja
Jej wadą jest słaba skalowalność. Jeżeli podobny czerwony tekst pojawi się w 20 miejscach, zmiana odcienia wymaga poprawienia 20 fragmentów HTML. To właśnie moment, w którym lepiej przejść na klasę CSS.
Styl w elemencie style
Regułę możesz umieścić w sekcji dokumentu, choć tutaj pokazuję wyłącznie sam fragment potrzebny do działania:
Wszystkie akapity otrzymają wtedy wskazany kolor. To wygodne, ale selektor p jest szeroki i może zmienić również fragmenty, które miały wyglądać inaczej. W praktyce często zaczynam od bardziej konkretnej klasy.
Klasa w osobnym arkuszu CSS
Najbardziej elastyczne rozwiązanie wygląda tak:
Tekst w kolorze marki.
.lead {
color: #2457a6;
}Jedna klasa może obsługiwać wiele elementów, a kolor zmienisz w jednym miejscu. To podejście wybieram przy stronach firmowych, blogach i interfejsach, gdzie spójność wizualna ma większe znaczenie niż jednorazowa szybkość edycji.
Jak wybrać zapis koloru
CSS pozwala wskazać kolor na kilka sposobów. Wszystkie poniższe przykłady są poprawne, ale różnią się wygodą i zastosowaniem.
Nazwa koloru
.tekst {
color: darkgreen;
}Nazwy takie jak red, blue, navy czy rebeccapurple są łatwe do zapamiętania. Sprawdzają się podczas nauki i szybkich prototypów, ale dają ograniczoną kontrolę nad dokładnym odcieniem.
Kod HEX
.tekst {
color: #1f6feb;
}HEX jest bardzo popularny w projektach internetowych. Sześć znaków opisuje poziom czerwieni, zieleni i niebieskiego, a skrócona forma może mieć trzy znaki, na przykład #fff. Ja najczęściej korzystam z HEX, gdy kolor pochodzi z palety marki lub projektu graficznego.
RGB i RGBA
.tekst {
color: rgb(31 111 235);
}
.przezroczysty {
color: rgb(31 111 235 / 70%);
}Zapis RGB pozwala ustawić poszczególne kanały koloru. Dodatkowy kanał przezroczystości przydaje się w mniej istotnych opisach lub nakładkach, ale zbyt jasny i półprzezroczysty tekst często traci czytelność.
HSL
.tekst {
color: hsl(215 82% 52%);
}HSL opisuje barwę, nasycenie i jasność. Jest wygodny, gdy chcesz przygotować kilka wariantów jednego koloru, na przykład jaśniejszy opis, ciemniejszy nagłówek i odcień dla stanu aktywnego. W dokumentacji MDN HSL jest wskazywany jako czytelny sposób modyfikowania odcieni bez ręcznego przeliczania kanałów RGB.
Jak zmienić kolor tylko wybranego fragmentu
Nie zawsze chcesz przestawiać kolor całego akapitu. Do wyróżnienia słowa, ceny, ostrzeżenia lub nazwy produktu użyj elementu span z klasą:
Cena wynosi
199 zł.
.cena {
color: #b42318;
font-weight: 700;
}Połączenie koloru z pogrubieniem pomaga szybciej znaleźć ważną informację, ale nie powinno zamieniać całego akapitu w kolorową mozaikę. Z mojego doświadczenia wynika, że jeden akcent na kilka zdań zwykle działa lepiej niż kilka konkurujących ze sobą barw.
Przeczytaj również: Jak zmienić kolor tła HTML? CSS to klucz do nowoczesnej strony!
Kolor linku i efekt po najechaniu
Linki mają własne stany. Możesz ustawić kolor podstawowy, odwiedzony odnośnik i efekt po najechaniu kursorem:
a {
color: #155eef;
}
a:visited {
color: #6941c6;
}
a:hover {
color: #b54708;
}Pseudoklasa :hover zmienia wygląd podczas najechania kursorem. Nie polegaj jednak wyłącznie na tym efekcie, ponieważ na ekranie dotykowym użytkownik nie korzysta z kursora w ten sam sposób. Link powinien być rozpoznawalny również bez interakcji, na przykład dzięki podkreśleniu.
Dlaczego kolor nie chce się zmienić
Najczęściej problem nie leży w samej właściwości color, lecz w regule, która ją nadpisuje. CSS działa według kaskady, czyli zestawu zasad określających, która deklaracja ma pierwszeństwo.
Sprawdź przede wszystkim, czy nie masz błędu w składni:
/* Poprawnie */
p {
color: #222;
}
/* Błędnie */
p {
colour: #222;
}W CSS używamy amerykańskiej pisowni color, a nie colour. Kolor może też nie działać, gdy brakuje średnika przy wcześniejszej deklaracji albo kod HEX zawiera niedozwolony znak.
Drugi częsty przypadek to bardziej szczegółowy selektor:
p {
color: blue;
}
.article p {
color: #222;
}Jeżeli akapit znajduje się w elemencie z klasą article, druga reguła może wygrać z pierwszą. Narzędzia deweloperskie w przeglądarce pokażą, która deklaracja działa, a która została przekreślona. To najszybszy sposób diagnozowania takich problemów, zamiast zgadywania w kodzie.
Ostatecznością jest !important:
.komunikat {
color: red !important;
}Nie używaj go jako pierwszego rozwiązania. Czasem jest potrzebny przy nadpisywaniu stylów z gotowego motywu, ale częste stosowanie !important utrudnia późniejszą rozbudowę arkusza.
Kolor tekstu musi zachować czytelność
Ładny odcień nie pomoże, jeśli tekst zlewa się z tłem. Dla zwykłego tekstu wytyczne WCAG wskazują kontrast na poziomie co najmniej 4,5:1, a dla dużego tekstu dopuszczają 3:1. Nie musisz liczyć tego ręcznie, ponieważ służą do tego internetowe analizatory kontrastu.
Uważaj szczególnie na jasnoszary tekst na białym tle oraz nasycone kolory na podobnie jasnych tłach. Takie zestawienia często wyglądają dobrze na monitorze autora, ale gorzej na telefonie, przy słabszej jasności ekranu lub dla osoby z zaburzeniami rozpoznawania barw.
Kolor nie powinien być jedynym sygnałem. Informację o błędzie oznacz także treścią, ikoną albo obramowaniem, a status aktywnego elementu pokaż dodatkowo zmianą kształtu, podkreśleniem lub tłem. Dzięki temu interfejs pozostaje zrozumiały nawet wtedy, gdy użytkownik nie rozróżnia wszystkich odcieni.
Ustaw kolor raz i wykorzystuj go konsekwentnie
Jeśli zmieniasz kolor jednego elementu, styl inline wystarczy. Przy większej stronie lepiej utworzyć klasę CSS, wybrać jeden zrozumiały format, na przykład HEX, i trzymać kolory w spójnej palecie.
Moja praktyczna kolejność pracy wygląda tak: najpierw sprawdzam działanie na prostym przykładzie, później przenoszę regułę do klasy, a na końcu kontroluję kontrast i stany interaktywne. Taki schemat zajmuje chwilę, ale ogranicza poprawki i sprawia, że kolor tekstu pozostaje łatwy do zmiany także po rozbudowie strony.
