ניגודיות צבעים לפי WCAG למעצבים
כלל 4.5:1, חישוב יחס ניגודיות וכלים חינמיים לבדיקת כל זוג צבעים.
אם הטקסט שלך לא עומד בתקן AA של WCAG, כ-285 מיליון אנשים עם לקות ראייה לא יוכלו לקרוא אותו. בנוסף, אתה נמצא על קרקע משפטית רעועה יותר ויותר באיחוד האירופי ובארה״ב. החדשות הטובות: הכלל פשוט.
כלל 4.5:1
טקסט גוף חייב להיות בעל יחס ניגודיות של לפחות 4.5:1 מול הרקע שלו כדי לעבור WCAG AA. טקסט גדול (24px+ רגיל או 18px+ מודגש) זכאי לרף נמוך יותר של 3:1.
לתקן AAA: 7:1 לטקסט גוף, 4.5:1 לטקסט גדול.
כיצד מחושב יחס הניגודיות
WCAG משתמש בבהירות יחסית — המירו כל צבע לערך בהירות (0 = שחור, 1 = לבן) באמצעות נוסחה ספציפית, ואז חשבו (L1 + 0.05) / (L2 + 0.05), כאשר L1 הוא הצבע הבהיר יותר.
אין צורך לעשות את החישוב בעצמכם — השתמשו בבודק הניגודיות החינמי שלנו כדי להכניס כל שני צבעים ולראות את היחס.
מקרים נפוצים של כישלון
- אפור בהיר על לבן — #999 על #fff = 2.85 (נכשל). #767676 על #fff = 4.54 (עובר).
- לבן על צהוב — כמעט תמיד נכשל. השתמשו בטקסט כהה על צהוב.
- קישורים צבעוניים בטקסט גוף — רוב הקישורים הכחולים עוברים על לבן אך נכשלים על אפור בהיר. בדקו את הרקע בפועל.
- צבעי מותג שנראים נהדר — לעתים קרובות הם נכשלים. הוסיפו רקע לבן-שבור או הכהו את הטקסט.
בחירת זוגות צבעים נגישים
שלושה דפוסים אמינים:
- כהה על בהיר — #1f2937 על #fff = 14:1 (מושלם).
- לבן על כהה — #fff על #1f2937 = 14:1 (מושלם).
- כהה על צבע מבטא — #1f2937 על #fbbf24 = 9:1 (מושלם לכפתורים).
מעבר לטקסט
WCAG 2.1 דורש גם 3:1 עבור אלמנטים שאינם טקסט (כפתורים, טבעות פוקוס, גבולות טפסים). הבודק מטפל בשניהם.
רקעים שלא יילחמו בווידג'טים שלכם
אם אתם מעצבים הקובעים רקעים מאחורי ווידג'טים של שעון והתראות, בחרו רקעים עם ניגודיות מתחת ל-5:1 באזורי הווידג'טים. כלי הטשטוש גאוסי שלנו יכול לרכך אזורים עמוסים בכל רקע לשיפור קריאות הווידג'טים.
נסו את הכלים החינמיים שלנו
רוב המדריכים האלה מגיעים עם כלי מעשי שתוכלו להשתמש בו עכשיו — ללא צורך בהרשמה לפעם הראשונה:
- משנה גודל תמונה — הקטנה והגדלה מדויקת בפיקסלים.
- המרה ל-WebP — קבצים קטנים ב-30-50% מ-JPG.
- מסיר רקע — חיתוך בלחיצה אחת, PNG שקוף.
- מחולל פייביקון — כל גדלי הדפדפן ממקור אחד.
- משנה גודל לרשתות חברתיות — מידות מדויקות לכל פלטפורמה.
- עיבוד קבוצתי — הפעלת כל כלי על עד 200 תמונות בבת אחת.
עיינו בקטלוג הכלים המלא.
