ניגודיות צבעים
בקצרה
ניגודיות צבעים היא היחס בין בהירות הטקסט לרקע שלו. ברמה AA נדרש יחס של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (כ-24px, או 19px מודגש) ולרכיבי ממשק וגרפיקה חיונית. בנוסף, אסור להעביר מידע בצבע בלבד. אלו קריטריונים 1.4.3 ו-1.4.11.
מה זו ניגודיות צבעים?
ניגודיות מודדת עד כמה הטקסט "בולט" מהרקע. טקסט אפור בהיר על לבן קשה לקריאה לכבדי-ראייה; טקסט כהה על רקע בהיר קל. היחס מבוטא כמספר, מ-1:1 (אין ניגודיות) עד 21:1 (שחור על לבן).
היחסים הנדרשים (רמה AA)
| סוג | יחס מינימלי |
|---|---|
| טקסט רגיל | 4.5:1 |
| טקסט גדול (כ-24px / 19px מודגש) | 3:1 |
| רכיבי ממשק וגרפיקה חיונית | 3:1 |
ברמה AAA הדרישה מחמירה ל-7:1 לטקסט רגיל.
לא להסתמך על צבע בלבד
מידע לא יכול להיות מועבר רק דרך צבע (קריטריון 1.4.1). למשל, שדה שגוי בטופס לא יסומן רק באדום - צריך גם טקסט או אייקון. כך גם עיוור-צבעים יבין.
איך בודקים?
יש כלי בדיקת ניגודיות רבים (תוספי דפדפן, בודקים מקוונים) שמקבלים שני צבעים ומחזירים את היחס ואם הוא עובר. כדאי לבדוק את כל צמדי הטקסט-רקע באתר, כולל מצבי hover ו-placeholder.
טיפ עיצוב
קבעו פלטת צבעים נגישה כבר בשלב העיצוב - זה חוסך תיקונים יקרים בהמשך.
שאלות נפוצות
מה יחס הניגודיות הנדרש?
4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול ולרכיבי ממשק (רמה AA).
מה נחשב 'טקסט גדול'?
כ-24px ומעלה, או כ-19px מודגש ומעלה.
מותר לסמן שגיאה רק באדום?
לא. צריך לסמן גם בטקסט או אייקון, לא בצבע בלבד.
מקורות
- W3C - Contrast (Minimum) 1.4.3 (w3.org/WAI)