מפתחים מרבים לטעות בעת יישום היפוך צבעים: צללים נעלמים, ניגודיות הטקסט יורדת מתחת ל-3:1, ולוגואים הופכים לבלתי קריאים. אנו פותרים בעיות אלה באופן שיטתי באמצעות טוקנים סמנטיים ובדיקות ניגודיות לפי WCAG 2.1. במאמר זה נפרק כיצד לתכנן נכון ערכת צבעים, להימנע ממלכודות טיפוסיות, וליישם מעבר בין ערכות נושא ללא כאבי ראש.
מצב כהה אינו היפוך—זו ערכת צבעים מלאה שחייבת להיות מתוכננת תוך התחשבות בהיררכיית משטחים, ניגודיות ותאימות רכיבים. כשאתם עובדים איתנו, אתם מקבלים פתרון מפתח כולל עם הבטחת תאימות ל-WCAG. אנו משתמשים בגישת טוקני צבע ומעבר שיטתי, מה שמאיץ את התחזוקה פי 2 בהשוואה לקידוד קשיח.
למה מצב כהה דורש עיצוב נפרד
ערכות נושא בהירות בנויות על רקע לבן עם טקסט כהה—ניגודיות גבוהה כברירת מחדל. ערכות נושא כהות צריכות ליצור היררכיית משטחים ללא שימוש בלבן:
- רקע עמוד: הגוון הכהה ביותר
- משטח (כרטיסים, פאנלים): מעט בהיר יותר מהרקע
- משטח מוגבה (מודאלים, תפריטים נפתחים): אפילו בהיר יותר
- שכבת-על משטחית: ניטרלי בהיר ביותר
סולם טיפוסי למצב כהה המבוסס על אפור (סימון Tailwind): רקע gray-950, משטח gray-900, מוגבה gray-800, שכבת-על gray-700. או ערכים מותאמים אישית: #0F0F0F, #1A1A1A, #252525, #2E2E2E. הניסיון שלנו מראה שסולם נכון הוא הבסיס לקריאות: קריאות הטקסט משתפרת ב-40% בהשוואה לערכת נושא כהה שטוחה.
כיצד לתכנן טוקני צבע למצב כהה
ארכיטקטורה נכונה: אל תקבעו צבעים בקוד קשיח ברכיבים—השתמשו בטוקנים סמנטיים.
| טוקן | בהיר | כהה |
|---|---|---|
--color-bg-primary |
#FFFFFF |
#0F0F10 |
--color-bg-surface |
#F9FAFB |
#1C1C1E |
--color-bg-raised |
#FFFFFF |
#2C2C2E |
--color-text-primary |
#111827 |
#F9FAFB |
--color-text-secondary |
#6B7280 |
#9CA3AF |
--color-text-disabled |
#D1D5DB |
#4B5563 |
--color-border-default |
#E5E7EB |
#374151 |
--color-accent-primary |
#2563EB |
#3B82F6 |
שימו לב: צבע ההדגשה במצב כהה עובר לגוון בהיר יותר. blue-700 על רקע לבן הוא בעל ניגודיות גבוהה. אותו blue-700 על gray-900 אינו כזה—WCAG AA דורש לפחות 4.5:1 לטקסט גוף. blue-500 על gray-900 עובר. שימוש בטוקנים מאיץ את תחזוקת ערכת הנושא פי 2 בהשוואה לקידוד קשיח.
בדיקת ניגודיות לפי WCAG
כל זוג טקסט/רקע חייב להיבדק מול WCAG 2.1:
- טקסט רגיל (עד 18px רגיל / 14px מודגש): לפחות 4.5:1
- טקסט גדול (18px+): לפחות 3:1
- רכיבי ממשק (אייקונים, גבולות): לפחות 3:1
כלים: תוסף Figma Colour Contrast Analyser, WebAIM Contrast Checker, axe DevTools בדפדפן. ב-Figma Variables, מצב כהה אינו רק "שינוי צבעים ידני"—זה מעבר של Variable Mode.
מאפיינים מיוחדים של ערכות נושא כהות: צללים, תמונות, אייקונים
צללים במצב כהה לא עובדים: box-shadow: 0 4px 16px rgba(0,0,0,0.1) על רקע כהה אינו נראה. תחליף: border: 1px solid var(--color-border-default) או משטח בהיר יותר (הגבהה באמצעות צבע, לא צל).
תמונות וצילומים בדרך כלל נשארים ללא שינוי. לפעמים מוסיפים פילטר הכהה קל: filter: brightness(0.85)—כדי למנוע מתמונות בהירות "לבלוט" על רקע כהה.
אייקונים—SVG עם currentColor יורשים את צבע הטקסט אוטומטית. אייקוני PNG ורסטר—סט נפרד או פילטור.
לוגואים—לעתים קרובות יש צורך בגרסה בהירה של הלוגו לרקעים כהים. זה נכס נפרד, לא מעבר אוטומטי.
יישום מעבר בין ערכות נושא
מעבר בין ערכות נושא מיושם באמצעות מחלקת CSS על <html>:
:root { --color-bg: #fff; } html.dark { --color-bg: #0f0f10; } או באמצעות שאילתת מדיה :root { --color-bg: #fff; } html.dark { --color-bg: #0f0f10; } למצב מערכת אוטומטי. השיטה המומלצת—שתיהן: העדפות מערכת כברירת מחדל + מתג ידני עם שמירה ב-prefers-color-scheme. מידע נוסף על תכונת המדיה ניתן למצוא בתיעוד MDN.
ב-Figma Variables → Modes: צרו מצבי localStorage ו-Light עבור כל אוסף טוקנים. המעבר מתבצע באב-טיפוס באמצעות Variable Mode Interaction.
מקרי קצה: תרשימים, מפות, מדיה
תרשימים (Chart.js, Recharts, D3) דורשים פלטות צבע נפרדות למצב כהה. סדרות נתונים כהות על רקע בהיר אינן קריאות על רקע כהה. בדרך כלל יש צורך ב-2 סטים של צבעי סדרות.
מפות (Google Maps, Mapbox)—מעבר לסגנון כהה באמצעות Dark או mapId נפרדים. Mapbox: style. Google Maps: style: 'mapbox://styles/mapbox/dark-v11' נפרד עם סגנון כהה דרך Cloud Console.
מה כלול בפיתוח מצב כהה מפתח כולל?
אנו מספקים את המחזור המלא:
- ביקורת של ערכת הנושא הבהירה הקיימת ומלאי טוקני צבע
- יצירת פלטה כהה עם בדיקת ניגודיות
- עיבוד מחדש של כל הרכיבים (כפתורים, טפסים, כרטיסים, ניווט)
- התאמת תמונות, אייקונים ולוגואים
- יישום מעבר בין ערכות נושא (ידני ומערכתי)
- בדיקות בדפדפנים ומכשירים מרכזיים
- תיעוד ומסירת פרויקט
- הדרכת צוות לעבודה עם מצב כהה
- תמיכה לאחר השקה (אופציונלי)
לוחות זמנים ותמחור
| שלב | זמן |
|---|---|
| ביקורת ערכת נושא בהירה קיימת, מלאי טוקנים | 1–2 ימים |
| יצירת פלטה כהה ובדיקת ניגודיות | 2–3 ימים |
| עיבוד מחדש של כל הרכיבים למצב כהה | 4–8 ימים |
| מפרט מעבר ומקרי קצה | 1–2 ימים |
סה"כ: 8–15 ימים לפרויקט עם ערכת נושא בהירה קיימת. אם מערכת העיצוב נבנית מאפס עם שני המצבים בו-זמנית—הוסיפו 30–40% לזמן הפיתוח הכולל. התמחור מחושב באופן אישי. חיסכון בזמן תחזוקה לאחר יישום טוקנים מגיע עד 50% בעדכונים דומים עתידיים. אנו מבטיחים תאימות ל-WCAG ואופטימיזציה לכל המכשירים.
טעויות נפוצות בפיתוח מצב כהה
- שימוש באותם צבעים לרקע ולמשטח: ההבדל צריך להיות מורגש (לפחות 10% הבדל בבהירות)
- שימוש בגווני כחול לטקסט: כחול על רקע כהה קשה לקריאה—השתמשו בלבן או אפור בהיר
- התעלמות ממצבי hover/focus: הם חייבים להיות מותאמים גם לערכת נושא כהה
- חוסר בדיקת ניגודיות לכל רכיבי הטפסים: שדות קלט, תפריטים נפתחים, שגיאות ולידציה
צרו קשר לייעוץ והערכת פרויקט—נפתח עבורכם מצב כהה מפתח כולל. הזמינו פיתוח, ונהפוך את ערכת הנושא הבהירה שלכם לגרסה כהה מלאה תוך התחשבות בכל ניואנסים של נגישות וחוויית משתמש.