Dark mode זה לא #000 על #FFF הפוך. עברנו על עשרות מוצרים – הנה הכללים שעובדים.
למה לא לעשות #000 כרקע
שחור טהור על מסכי OLED יוצר contrast חד מדי. עייפות עיניים אחרי 5 דקות.
Better: dark gray (#0F0F0F או #121212). זה מה ש-Material Design ממליץ. Google, Apple – כולם משתמשים בזה.
Elevation – איך מבדילים בין layers
ב-light mode: shadows יוצרים depth.
ב-dark mode: לא רואים shadows. במקום – שנו את הגוון הרקע. Base surface: #121212. Elevated: #1F1F1F. Modal: #2A2A2A.
ככל שהאלמנט ‘למעלה’ – יותר בהיר.
Text Colors
Primary text: לא לבן טהור (#FFF). Contrast מוגזם. במקום: rgba(255,255,255,0.87).
Secondary text: rgba(255,255,255,0.6).
Disabled: rgba(255,255,255,0.38).
Brand Colors
הבעיה: הצבע הראשי שלכם (למשל אדום #E60000) נראה מדהים על לבן, אבל דוקר ב-dark mode.
הפתרון: יש לכם ‘brand color’ לאור ו-‘brand color’ לחושך. יותר desaturated ובהיר יותר לחושך.
Images
תמונות עם רקע לבן – נראות כמו ‘wound’ בחושך. השתמשו ב-images עם רקע שקוף או כהה.
Photos: תוודאו שיש להם contrast טוב על רקע כהה. אם יש רקע בהיר בתמונה – התוכן יתעלם.
Icons
Filled icons עובדים טוב יותר ב-dark mode. Outline icons נראים דלים.
גם: אל תגלגלו icons מ-black ל-white בסתם. תבדקו כל אחד.
Testing
עבדו במסך אמיתי בסביבה חשוכה. תראו contrast issues שלא רואים בסביבה מוארת.
WCAG AA requires 4.5:1 contrast for normal text. תבדקו עם contrast checker.
מבוסס על פרויקטים אמיתיים
המדריך הזה מבוסס על עבודה עם:
קריאה נוספת
אם המדריך הזה עזר לכם, אולי תרצו לקרוא גם על עיצוב UX/UI – המדריך המקיף שלנו לתחום.
רוצים לדבר על הפרויקט שלכם?
שיחת ייעוץ חינם, ללא התחייבות - הרעיון שלכם + הניסיון שלנו
רוצים לדבר על הפרויקט שלכם?
אנחנו מתמחים בפיתוח SaaS, פתרונות AI, עיצוב UX/UI ובניית אתרים. ספרו לנו מה אתם צריכים.
דברו איתנו ←