Kolor

Kolor ułatwiający dostęp

Nie używaj samego koloru do wskazywania obecności komponentu interfejsu lub jego stanu: używaj ikonografii lub kształtu, aby ułatwić rozróżnianie. Nie oznaczaj powodzenia ani błędów TYLKO kolorem. Użyj ikon lub tekstu.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Kontrast

• Minimalne standardy kontrastu: zachowaj współczynnik 4,5:1 w przypadku zwykłego tekstu i 3:1 w przypadku dużego tekstu lub ikon.
• Zapewnij zgodność ze standardami kontrastu elementów nietekstowych: zachowaj minimalny współczynnik kontrastu 3:1 w przypadku granic i stanów komponentów interfejsu.
  • Obejmuje to elementy wizualne (obramowania, tła, cienie, podkreślenia), które tworzą obramowanie lub wskazują obecność elementu interfejsu (np. obramowania pola do wprowadzania danych).
  • Obejmuje to również elementy wizualne wskazujące aktywne stany w komponencie (np. znaczniki wyboru w polu wyboru lub przełączniki).
  • Uwaga: spełnienie wymogu kontrastu 3:1 w przypadku elementów nietekstowych może być trudne w projektach minimalistycznych. Łagodne gradienty lub subtelne cienie wewnętrzne i zewnętrzne mogą złagodzić granice wizualne, a jednocześnie spełnić wymagania dotyczące ułatwień dostępu.
• Używaj prefers-contrast tylko wtedy, gdy jest to uzasadnione: sięgaj po @media (prefers-contrast: more), gdy projekt wykorzystuje akcenty o niskim kontraście (np.subtelne obramowania, wyciszony tekst pomocniczy), które wymagają wzmocnienia. Większość witryn, które już spełniają podstawowe wymagania dotyczące kontrastu, nie będzie tego potrzebować.

Jasne i ciemne schematy kolorów

• Obsługa jasnych i ciemnych schematów kolorów: uwzględniaj @media (prefers-color-scheme: dark) i łącz z właściwością CSS color-scheme, aby elementy sterujące formularzy, paski przewijania i inne powierzchnie renderowane przez UA były dopasowane. Więcej informacji znajdziesz w sekcji Tryb ciemny.

Tryb wymuszonych kolorów

• Obsługa trybu wymuszonych kolorów: w trybie wymuszonych kolorów (wysoki kontrast w systemie Windows) przeglądarka zastępuje kolory autora słowami kluczowymi systemu i usuwa background-image, box-shadow i border-image. Zdefiniuj zastępcze kolory systemowe dla tokenów kolorów za pomocą @media (forced-colors: active).
• Używaj forced-color-adjust: none tylko tam, gdzie kolor jest istotną informacją (podświetlanie składni, selektor kolorów). NIE używaj elementu forced-color-adjust: none tylko ze względów estetycznych.
• Nie polegaj na właściwościach background-image, box-shadow ani border-image do przekazywania informacji o obramowaniach, separatorach lub stanie: znikają one w trybie wymuszonych kolorów (a często także w druku). Jeśli musisz to zrobić, upewnij się, że w trybie wymuszonych kolorów jest dostępna alternatywa, np. outline lub border ze słowami kluczowymi kolorów systemowych (CanvasText, LinkText, ButtonText, Highlight, GrayText itp.).

Generuję odcienie

Zanim wygenerujesz odcienie dynamicznie, sprawdź, czy możesz użyć istniejącego, wstępnie zdefiniowanego tokena projektowego. Dzięki temu projektant ma znacznie większą kontrolę i może zapewnić spójność.

Jeśli chcesz dynamicznie generować jaśniejsze lub ciemniejsze kolory:

• NIE dostosowuj tylko kanału jasności w oklch/oklab lub lch/lab, np. oklab(from var(--primary) 0.9 a b). Teoretycznie jest to prawidłowy sposób, ale przeglądarki nie implementują jeszcze mapowania gamy, więc wynikowy kolor jest nieprzewidywalny.
• Możesz użyć color-mix(), aby wymieszać z bielą lub czernią (najlepiej w oklab). Dzięki temu kolor pozostaje w gamie, ale kolory są zbyt nienasycone, co powoduje, że odcienie są wyblakłe.
• MOŻESZ połączyć dostosowanie jasności z dowolną inną metodą (np. color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)), aby zachować równowagę między nimi, ale unikaj przekraczania 30% w przypadku dostosowania jasności.