Dokumentacja użycia kolorów

Mapowanie kolorów do semantyki i kontekstów tak, aby zespoły stosowały je zgodnie

Zdefiniuj tokenowe znaczenia: brand.primary, brand.secondary, accent, success, warning, error, info, surface, border, text (primary/secondary/muted), overlay, scrim. Mapuj każdy do podstawowych tokenów dla jasnej i ciemnej tematyki.

Nawigacja i CTA: brand primary.

Wizualizacja danych: obracanie przez podstawowe kolorystyki, a następnie sekundarnie; unikaj semantycznego zrozumienia współczynników

Odwodnienie: używaj tylko sukcesu, błędu, ostrzeżenia lub informacji dla statusu.

Tło: neutralne/tkaniowe tokeny; utrzymuj tokeny tekstowe wyrównane, aby zapewnić kontrast.

demo na żywo · powiązana symulacja● LIVE

Do: Używaj tokenów semantycznych, testuj kontrast, utrzymuj równowagę saturacji, ogranicz

Nie: Używaj kolorów marki dla destruktwnych działań; umieszczaj tekst na obrazach bez zasłon; łączy się za dużo barw w jednym widoku; polegaj tylko na kolorze do przekazania znaczenia.

Zdefiniuj palety diagramowe (seria główna, seria pomocnicza, wariant o wysokim kontrastie). Dodaj zasady dotyczące tła, siatek i notatek. Podaj wzory/markerki do bezpieczeństwa dla osób z deficytem widzenia. Włącz ostrożne nadmiarowe semantyczne dla prógów.

Często zadawane pytania

Jakie są kluczowe rozważania dotyczące dostępnego użytkowania poprzez wykorzystanie kolorów?

Dostępność i stosunek kontrastu

Jak powinno być zaszyfrowane stosowanie proporcji kontrastu, aby spełnić standardy dostępnego użytkowania, szczególnie dla tekstu i elementów interfejsu użytkownika?

Podaj link do macierzy kontrastu; zezwól na AA dla tekstu/UI, 3:1 dla granic i pędzli skupienia. Dokumentuj zatwierdzone kombinacje na podstawie powierzchni. Upewnij się, że istnieją niezależne od koloru wskazówki dotyczące statusu (ikony, tekst).

Jakie procesy powinny być przestrzegane co tyczy zarządzania i dostarczania dokumentacji dotyczącej wykorzystania kolorów?

Dostarczanie i zarządzanie

Jak powinna być utrzymywana i podzielona dokumentacja dotycząca wykorzystania kolorów między zespołami projektantów i deweloperów, w tym Figma i repozytoriach kodu?

Opublikuj dokumentację użycia w Figma i kodzie. Podaj przykłady/snippety oraz żywą galerię zatwierdzonych wzorów. Wersjonuj zmiany kolorowe ze zmianami w dzienniku wersji i powiadom projektantów/deweloperów.

▶ Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer