Schemat kolorów trybu ciemnego

Zdefiniuj spójny paletę kolorów trybu ciemnego, który zachowuje kontrast i jasność,

Warstwy tła: podstawowa #0d1728, powierzchnia #111c2d, podniesiona #15223a. Tekst: podstawowy #e5ecf5, sekundarny #b6c3d7, zmutowany #7f8ba3. Akcenty wykorzystują zielone/zawieruchowe brandu dostosowane do kontrastu ciemnego.

Zachowaj kontrast AA dla tekstu/iconów (≥4,5:1). Hover: lekko poświetl powierzchnie; focus: jasny obramowanie z pętlą 3px; aktywne: lekki zgrubienie; dezaktywowane: zmniejszenie przejrzystości podczas zachowania czytelnego tekstu.

Dostępność i testowanie

Przetestuj kontrast w wszystkich stanach; zweryfikuj wykresy/mapy z paletami ciemnymi; upewnij się widoczności punktu skupienia; szanuj ograniczoną ruchomeńscie; pozwól na trwałość przełącznika użytkownika.

demo na żywo · powiązana symulacja● LIVE

Podstawa: #0f172a; Podwyższone: #111827; Karty: #131c2b z delikatnymi obramowaniem #1f

Użyj miłych cieni o niskim rozmyciu i niskiej wartości alfa, aby uniknąć hal.

Dodaj obramowanie o szerokości 1px do oddzielenia paneli zamiast ciężkich cieni.

Często zadawane pytania

Jaka kolorystyka linków w trybie ciemnym – #86efac; hover #a4f3c2; odwiedzone?

Linki: #86efac; hover #a4f3c2; odwiedzone #6ee7b7.

Jakie kolorystyki tła i tekstu dla elementów dezaktywowanych – tło bg #1f2937; tekst #4b5563; obramowanie?

Elementy dezaktywane: tło bg #1f2937; tekst #4b5563; obramowanie #1f2937.

Jak powinienem korzystać z ciemnych tła (#0f172a) wraz z liniami siatki (#1f2937)?

Używaj ciemniejszych tłem (#0f172a) i linii siatki (#1f2937) przy niskim alpha. Drukuj kolory serii jasno, ale nie neonowe; upewnij się, że stosunek doczytelności wynosi 4,5:1 dla etykiet. Zapewniaj tryb wyższej kontrastowości diagramu dla dostępności.

Jakie rozważania powinienem mieć w kwestii dostępności i komfortu?

Dostępność i komfort są kluczowe przy projektowaniu trybu ciemnego, gwarantując, że użytkownicy mogą plynnie nawigować po interfejsie, podczas gdy zachowają odpowiedni kontrast widoczności oraz szanują preferencje użytkowników w zakresie zmniejszenia ruchu.

▶ 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