צבע

צבע נגיש

אל תשתמשו בצבע בלבד כדי לציין את הנוכחות של רכיב בממשק המשתמש או את המצב שלו: השתמשו בסמלים או בצורות כדי להבדיל ביניהם. אל תציינו הצלחה או שגיאות באמצעות צבע בלבד. להשתמש בסמלים או בטקסט.

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

ניגודיות

• תקני ניגודיות מינימליים: שמרו על יחס של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול או לסמלים.
• עמידה בתקנים של ניגודיות לא טקסטואלית: שמרו על יחס ניגודיות מינימלי של 3:1 בגבולות ובמצבים של רכיבי ממשק המשתמש.
  • זה כולל רכיבים חזותיים (גבולות, רקעים, צלליות, קווים תחתונים) שיוצרים את הגבול או מציינים את הנוכחות של רכיב ממשק משתמש (למשל, גבולות של שדה להזנת קלט).
  • זה כולל גם אלמנטים חזותיים שמציינים מצבים פעילים בתוך רכיב (למשל, סימני וי בתיבות סימון או מתגים).
  • אזהרה: עמידה בדרישה של יחס ניגודיות של 3:1 ברכיבים שהם לא טקסט יכולה להיות מאתגרת בעיצובים מינימליסטיים. מעברי צבעים רכים או צללים פנימיים או חיצוניים עדינים יכולים לרכך את הגבולות החזותיים, ועדיין לעמוד בדרישות הנגישות.
• השתמשו ב-prefers-contrast רק כשצריך: השתמשו ב-@media (prefers-contrast: more) כשהעיצוב כולל הדגשות בניגודיות נמוכה (למשל, גבולות עדינים, טקסט משני מעומעם) שצריך לחזק. רוב האתרים שכבר עומדים בניגודיות הבסיסית לא יצטרכו את זה.

ערכות צבעים בהירות וכהות

• תמיכה בערכות צבעים בהירות וכהות: מכבדים את @media (prefers-color-scheme: dark) ומשלבים אותה עם מאפיין ה-CSS‏ color-scheme כדי שפקדי הטפסים, פסי הגלילה ומשטחים אחרים שעברו עיבוד (render) על ידי סוכן המשתמש (UA) יתאימו. פרטים נוספים מופיעים במאמר בנושא מצב כהה.

מצב צבעים מאולצים

• תמיכה במצב "צבעים מאולצים": במצב "צבעים מאולצים" (ניגודיות גבוהה ב-Windows), הדפדפן מבטל את הצבעים שהוגדרו על ידי היוצר ומחליף אותם במילות מפתח של המערכת, ומסיר את background-image, box-shadow ו-border-image. מגדירים חלופות לצבעי המערכת של אסימוני הצבעים באמצעות @media (forced-colors: active).
• משתמשים ב-forced-color-adjust: none רק כשהצבע הוא מידע חיוני (הדגשת תחביר, דוגמית של כלי לבחירת צבעים). אל תשתמשו ב-forced-color-adjust: none רק כדי לשמור על האסתטיקה.
• אל תסתמכו על background-image, box-shadow או border-image כדי להעביר גבולות, מפרידים או מצב: הם נעלמים בצבעים מאולצים (ולעיתים קרובות גם בהדפסה). אם אין ברירה, צריך לוודא שיש חלופה במצב צבעים מאולצים, כמו outline או border עם מילות מפתח של צבעי המערכת (CanvasText,‏ LinkText,‏ ButtonText,‏ Highlight,‏ GrayText וכו').

יוצר גוונים

לפני שיוצרים גוונים באופן דינמי, כדאי לבדוק אם אפשר להשתמש בטוקן עיצוב קיים ומוגדר מראש. כך המעצב יכול לשלוט הרבה יותר בעיצוב ולוודא שהוא עקבי.

אם אתם צריכים ליצור צבעים בהירים או כהים יותר באופן דינמי:

• אל תשנו רק את ערוץ הבהירות ב-oklch/oklab או ב-lch/lab, למשל oklab(from var(--primary) 0.9 a b). למרות שבאופן תיאורטי זו הדרך הנכונה, הדפדפנים עדיין לא מטמיעים מיפוי של סולם צבעים, ולכן הצבע שמתקבל לא צפוי.
• אפשר להשתמש ב-color-mix() כדי לערבב עם לבן או שחור (רצוי ב-oklab). כך הצבע נשאר בטווח הצבעים, אבל זה נוטה להפחית את הרוויה של הצבעים יותר מדי וליצור גוונים דהויים.
• אפשר לשלב את התאמת הבהירות עם כל אחת מהשיטות האחרות (למשל, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) כדי לאזן בין השתיים, אבל כדאי להימנע מהתאמת בהירות של יותר מ-30%.