קוד HEX הוא שלושה זוגות ספרות של אדום, ירוק וכחול, ואותו צבע נכתב גם כ-RGB וגם כ-HSL. בוחרים צבע או מקלידים קוד אחד, ורואים את שלושת הקודים, את הניגודיות מול לבן ושחור לפי WCAG וכפתור שמעתיק את ה-CSS.
איך קודי הצבע עובדים
כל צבע על המסך הוא שילוב של שלושה ערוצי אור: אדום, ירוק וכחול, כל אחד בעוצמה בין 0 ל-255. שלושת הקודים מתארים את אותו צבע בדרכים שונות:
- HEX: סולמית ושישה תווים, בבסיס 16. כל ערוץ הוא זוג תווים בין 00 ל-FF.
- RGB: שלושה מספרים עשרוניים בין 0 ל-255, בתוך rgb(...).
- HSL: גוון במעלות על גלגל הצבעים, רוויה ובהירות באחוזים. נוח כשרוצים לבנות גוונים של אותו צבע.
| צבע | HEX | RGB | HSL |
|---|---|---|---|
| אדום | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| ירוק | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| כחול | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| אפור בינוני | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
בדיקת ניגודיות צבעים לפי WCAG
תקן הנגישות WCAG קובע יחס ניגודיות מינימלי בין צבע הטקסט לצבע הרקע. היחס מחושב מהבהירות היחסית של שני הצבעים: הבהירה בתוספת 0.05 חלקי הכהה בתוספת 0.05. בטבלה שבכלי מופיעה הבדיקה של הצבע שבחרתם כרקע, עם טקסט לבן ועם טקסט שחור.
- AA, טקסט רגיל: 4.5 ל-1 לפחות.
- AA, טקסט גדול: 3 ל-1 לפחות. טקסט גדול הוא 18 נקודות ומעלה או 14 נקודות מודגש.
- AAA: 7 ל-1 לטקסט רגיל, ו-4.5 ל-1 לטקסט גדול.
אם הצבע לא עובר עם לבן ולא עם שחור, אפשר להכהות או להבהיר אותו: ב-HSL משנים את הבהירות ובודקים שוב. הכלי בודק צבע מול לבן ושחור בלבד, ולא שני צבעים כלליים.
קוד צבע HEX עם שקיפות: ארבע, שש ושמונה ספרות
לפי MDN, ב-CSS קוד HEX יכול להיכתב בשלוש, ארבע, שש או שמונה ספרות. שתי הספרות האחרונות בקוד הארוך, או הספרה האחרונה בקוד בן ארבע ספרות, קובעות שקיפות: 00 הוא שקוף לגמרי ו-FF אטום לגמרי. הכלי עצמו מקבל קוד בן שלוש או שש ספרות בלבד, ולכן קוד בן שמונה ספרות, כמו #FF880080, ייפסל. כדי לבדוק צבע עם שקיפות, המירו קודם את הצבע עצמו, ואת השקיפות הוסיפו אחר כך ידנית.
| אטימות | ערך HEX | ערך עשרוני |
|---|---|---|
| 100% | FF | 255 |
| 75% | BF | 191 |
| 50% | 80 | 128 |
| 25% | 40 | 64 |
| 0% | 00 | 0 |
הערכים מעוגלים למספר השלם הקרוב, כי ערוץ HEX הוא מספר שלם בין 0 ל-255.
איך כמה גוונים של אותו צבע נבדקים בניגודיות
כדי לראות איך הבהירות משפיעה על הקריאות, הנה חמש בהירויות של אותו גוון (220 מעלות) באותה רוויה (70 אחוז), עם הניגודיות של כל אחת מול לבן ומול שחור, כפי שהכלי מחשב אותה. ככל שהצבע בהיר יותר, הוא מתאים לטקסט כהה, וככל שהוא כהה יותר, לטקסט לבן.
| בהירות | HEX | מול לבן | מול שחור |
|---|---|---|---|
| 20% | #0F2757 | 14.50:1 | 1.44:1 |
| 35% | #1B4498 | 9.02:1 | 2.32:1 |
| 50% | #2662D9 | 5.48:1 | 3.83:1 |
| 65% | #6791E4 | 3.11:1 | 6.74:1 |
| 80% | #A8C0F0 | 1.83:1 | 11.46:1 |
שימו לב שצבע בבהירות 50 אחוז, שנראה ברור וחזק, עובר עם טקסט לבן ברמת AA לטקסט רגיל, אבל לא ברמת AAA. צבע בבהירות 65 אחוז עובר רק לטקסט גדול. מי שבוחר פלטה לאתר יכול להחליט לפי זה מראש איזה גוון משמש כרקע ואיזה לטקסט, ובחירת הצבעים משלימה את הבחירה בפונטים בעברית.
דוגמאות לצבעים שקרובים לגבול הניגודיות
ההפרש בין עובר לנכשל יכול להיות קטן מאוד. אפור #767676 מול לבן מקבל 4.54:1, ואפור #777777, שנראה זהה לעין, מקבל 4.47:1 ונכשל ברמת AA לטקסט רגיל. כתום #FF8800 מקבל מול לבן 2.39:1, ולכן הטקסט עליו צריך להיות שחור, שמקבל 8.77:1. צהוב #FFFF00 מול לבן מקבל רק 1.07:1.
לצבעי המותג של אתר, כמו כחול #2447D6, בדקו תמיד את שני הכיוונים. הכחול הזה מקבל מול לבן 7.12:1, כלומר טקסט לבן עליו עובר גם את רמת AAA, ואילו כחול בהיר #3E96F9 מקבל מול לבן 3.02:1, ולכן מתאים לטקסט לבן רק בגודל גדול. מי שבונה הצהרת נגישות לאתר יכול לתעד את הבדיקות האלה במחולל הצהרת הנגישות.
המרה ל-CMYK וקוד צבע לרכב: מה הכלי לא עושה
הכלי ממיר בין HEX, RGB ו-HSL, שהם קודים של מסך. הוא לא ממיר ל-CMYK, שהוא מודל של הדפסה: ההמרה תלויה בפרופיל הצבע של הנייר והמדפסת, ולכן אין לה תוצאה אחת נכונה. לצורך הדפסה, מקבלים את ערכי ה-CMYK ממדפיס. גם קוד צבע של רכב הוא קוד של היצרן ולא קוד של מסך, ולא ניתן להמיר אותו כאן. אם אתם מכינים תמונה לרשתות חברתיות, גודל הקובץ חשוב לא פחות מהצבע, ואפשר לבדוק אותו בכלי לשינוי גודל תמונות.
מקורות
- MDN: <hex-color> CSS type
- W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2
הספים והנוסחה נבדקו מול המקורות ב-.
צריכים אתר שהצבעים והנגישות בו נבנו נכון מההתחלה? זה חלק מפיתוח האתרים שלנו.
לפיתוח אתרים ותוכנה