KWALIFIKACJA PGF4 - CZERWIEC 2016

PYTANIE NR 18.
W celu podkreślania i akcentowania wybranych fragmentów strony internetowej stosuje się
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Kontrast służy do podkreślania i akcentowania elementów przez wyraźną różnicę (np. barwy, jasności, wielkości lub grubości kroju pisma), dzięki czemu fragment od razu przyciąga wzrok. Balans dotyczy równowagi kompozycji, przyleganie grupowania, a wyrównanie porządku układu.

Pełne wyjaśnienie:

W projektowaniu stron internetowych "podkreślanie" i "akcentowanie" wybranych fragmentów oznacza przede wszystkim wyróżnienie ich na tle reszty tak, aby użytkownik szybciej je zauważył. Do tego celu stosuje się kontrast, czyli celowe wprowadzenie różnic między elementami (np. kolor, jasność, nasycenie, rozmiar, grubość fontu, odstępy, kształt, tło). Kontrast buduje hierarchię wizualną: elementy o większym kontraście zwykle są odbierane jako ważniejsze.

Pozostałe pojęcia z odpowiedzi pełnią inne funkcje w kompozycji:

  • Balans opisuje równowagę układu (czy kompozycja "nie przechyla się" wizualnie na jedną stronę). Może wspierać estetykę i czytelność, ale sam w sobie nie jest podstawową techniką akcentowania pojedynczego fragmentu.
  • Przyleganie (często rozumiane jako zasada bliskości/proximity) dotyczy grupowania elementów poprzez umieszczanie ich blisko siebie. Ułatwia zrozumienie relacji między treściami, lecz nie jest typową metodą "podkreślania" najważniejszego elementu.
  • Wyrównanie porządkuje układ i nadaje mu spójność (np. wspólna linia lewego marginesu, siatka). Poprawia skanowanie treści, ale nie tworzy mocnego akcentu tak jak kontrast.

W praktyce kontrast wykorzystuje się m.in. do wyróżniania przycisków, nagłówków, cen, komunikatów błędu czy kluczowych korzyści na landing page. Warto pamiętać, że kontrast może dotyczyć nie tylko koloru, ale także typografii i skali.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Kontrast to celowe różnicowanie elementów (np. koloru, jasności, rozmiaru, grubości pisma), aby część interfejsu była wyraźnie odróżnialna od tła lub innych elementów. Najczęściej służy do budowania hierarchii wizualnej i przyciągania uwagi do kluczowych treści.
Kontrastem zwykle wyróżnia się przyciski CTA, nagłówki, ceny, ważne komunikaty (np. błąd/sukces), linki oraz kluczowe sekcje oferty. W praktyce robi się to przez mocniejszy kolor, większy rozmiar fontu, inną grubość kroju, wyróżniające tło lub wyraźniejszy kształt.
Ludzki wzrok szybciej zauważa różnice niż podobieństwa. Element, który mocno różni się od otoczenia (kolorem, jasnością, wielkością), automatycznie "wyskakuje" z tła, więc użytkownik odczytuje go jako ważniejszy. To prosty mechanizm budowania priorytetów informacji.
Kontrast służy do wyróżniania (pokazuje, co jest ważne), a wyrównanie służy do porządkowania (pokazuje, jak elementy są ułożone i powiązane). Wyrównanie poprawia spójność i czytelność siatki layoutu, ale samo nie tworzy silnego akcentu jak kontrast.
Balans dotyczy równowagi wizualnej całej kompozycji (czy układ wygląda stabilnie), a kontrast dotyczy różnic między elementami (co ma się wyróżniać). Można mieć dobrze zbalansowany layout bez mocnych akcentów albo layout z mocnym kontrastem, który wymaga kontroli balansu.
Przyleganie (bliskość) to zasada grupowania elementów: rzeczy powiązane umieszcza się bliżej siebie. Pomaga zrozumieć strukturę informacji, ale nie jest podstawową techniką "podkreślania". Kontrast działa odwrotnie: wzmacnia różnice, by coś było natychmiast zauważalne.
Nie. Kontrast może dotyczyć także typografii (rozmiar i grubość fontu), kształtu elementów, ilości "powietrza" (odstępów), tekstury czy tła. Kolor jest najczęstszy, ale w projektowaniu UI równie ważny bywa kontrast skali i kontrast typograficzny.
Częsty błąd to mylenie pojęć: wybór "wyrównania" albo "przylegania", bo kojarzą się z układem strony. Inny błąd to traktowanie "balansu" jako sposobu akcentowania, choć dotyczy on równowagi całej kompozycji. Warto zawsze pytać siebie: co tu wyróżnia element?
Najpewniej użyć narzędzi do oceny kontrastu (np. wtyczki w przeglądarce, funkcje w programach graficznych lub walidatory dostępności). Porównują one kolor tekstu i tła oraz podają wynik liczbowy. Praktycznie: jeśli tekst "zlewa się" z tłem, kontrast jest za niski.
Ucz się zasad na przykładach: weź kilka stron i wskaż, co buduje hierarchię (kontrast), co porządkuje układ (wyrównanie), co grupuje treści (przyleganie) i co daje równowagę (balans). Na egzaminie szukaj w pytaniu słów "wyróżnić", "podkreślić", "akcent" — to zwykle prowadzi do kontrastu.
info

Około 63% zdających odpowiada poprawnie na to pytanie. średnie

Eksperci podkreślają: "Kontrast służy do podkreślania i akcentowania elementów przez wyraźną różnicę (np. barwy, jasności, wielkości lub grubości kroju pisma), dzięki czemu fragment od razu przyciąga wzrok."

Źródła:

  • W3C: Web Content Accessibility Guidelines (WCAG) 2.2, sekcja "1.4 Distinguishable" (m.in. kontrast tekstu) – https://www.w3.org/TR/WCAG22/ (dostęp: 2026-02-28)
  • MDN Web Docs: Understanding WCAG – Color contrast (dostępność i kontrast) – https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast (dostęp: 2026-02-28)
  • Nielsen Norman Group: Visual Hierarchy in UX Design (rola kontrastu w hierarchii) – https://www.nngroup.com/articles/visual-hierarchy-ux-definition/ (dostęp: 2026-02-28)

Materiały:

  • Materiały W3C o WCAG i percepcji treści (kontrast barw)
  • Dokumentacja MDN o dostępności i kontraście kolorów
  • Podstawowe podręczniki/opracowania z kompozycji i typografii (kontrast, hierarchia, siatka)

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego