Barvy a pozadí

Způsoby zápisu barev

CSS nabízí několik způsobů, jak barvu zapsat. Všechny jsou rovnocenné – použij ten, který ti nejvíce vyhovuje.

Jménem (keyword)

CSS zná přes 140 pojmenovaných barev. Hodí se pro rychlé prototypování nebo jednoduchý kód:

color: red;
color: navy;
color: goldenrod;
color: transparent;

Hexadecimální kód (HEX)

Nejběžnější způsob zápisu barvy ve webdesignu. Mřížka následovaná šesti znaky – každé dva znaky popisují složku červené, zelené a modré (RGB):

color: #ff0000;   /* červená */
color: #000000;   /* černá */
color: #ffffff;   /* bílá */
color: #333333;   /* tmavě šedá */

Pokud se každé dvojice opakují, lze je zkrátit na tři znaky: #333333 → #333.

RGB a RGBA

Barva definovaná složkami červené, zelené a modré (0–255). RGBA přidává alfa kanál pro průhlednost (0 = zcela průhledná, 1 = zcela neprůhledná):

color: rgb(51, 51, 51);
background-color: rgba(0, 0, 0, 0.5);   /* černá s 50% průhledností */

HSL a HSLA

Barva definovaná odstínem (0–360°), sytostí a světlostí. Intuitivnější pro ruční úpravy než HEX:

color: hsl(220, 70%, 30%);
background-color: hsla(220, 70%, 30%, 0.8);

Vlastnosti pro barvy a pozadí

color

Barva textu prvku a jeho potomků:

p {
  color: #333333;
}

background-color

Barva pozadí prvku:

header {
  background-color: #1a1a2e;
}

background-image

Obrázek jako pozadí. Lze použít také CSS přechody (gradienty):

/* Obrázek */
body {
  background-image: url('pozadi.jpg');
  background-size: cover;
  background-position: center;
}

/* Gradient */
header {
  background-image: linear-gradient(135deg, #1a1a2e, #16213e);
}

background-repeat

Určuje, zda se obrázek opakuje. Výchozí hodnota je repeat; pro nedekorativní obrázky se hodí no-repeat.

Kontrast a přístupnost

Výběr barev není jen estetická záležitost. Nedostatečný kontrast mezi textem a pozadím je jedním z nejčastějších přístupnostních problémů na webu.

Standard WCAG AA požaduje:

• Kontrast alespoň 4,5 : 1 pro normální text.
• Kontrast alespoň 3 : 1 pro velký text (18px tučně nebo 24px normálně).
• Kontrast alespoň 3 : 1 pro grafické prvky a ikony nesoucí informaci.

Kontrast svých barev lze zkontrolovat například nástrojem WebAIM Contrast Checker (webaim.org/resources/contrastchecker).

Důležité: barva nesmí být jediným způsobem, jak se přenáší informace. Například chyba ve formuláři označená jen červenou barvou (bez textu „Toto pole je povinné“) je nepřístupná pro barvoslepé uživatele.

CSS proměnné pro barvy

Pokud používáš stejnou barvu na více místech, vyplatí se definovat ji jako CSS proměnnou. Změna barvy pak stačí provést na jednom místě:

:root {
  --barva-primerni: #daa520;
  --barva-text: #222222;
  --barva-pozadi: #ffffff;
}

body {
  color: var(--barva-text);
  background-color: var(--barva-pozadi);
}

.btn-gold {
  background-color: var(--barva-primerni);
}

Tip od Zdeňka

Zdeněk radí: Kontrast vždy zkontroluj nástrojem, nespoléhej na odhad od oka. Barvy, které na monitoru vypadají čitelně, mohou mít kontrast 2 : 1 – a to nestačí. Na tomto webu používám CSS proměnné pro všechny klíčové barvy. Díky tomu funguje tmavý i světlý režim: stačí přepnout hodnoty proměnných a celý web se přizpůsobí automaticky.