ניגודיות צבעים: איך מתקנים בלי לשבור את המיתוג

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

מה התקן דורש

• טקסט רגיל: יחס ניגודיות של 4.5:1 לפחות מול הרקע.
• טקסט גדול (18 נקודות רגיל, או 14 נקודות מודגש): 3:1 לפחות.
• רכיבי ממשק וגרפיקה שנדרשת להבנה, כמו גבול של שדה, אייקון או סימון פוקוס: 3:1 לפחות.
• לוגו וטקסט שהוא חלק מלוגו פטורים מהדרישה.

איך בודקים

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

דוגמה מהאתר הזה

הכחול של הלוגו שלנו, ‎#057FC8, מגיע ליחס של 4.31:1 מול לבן, קצת פחות מהנדרש לטקסט רגיל. לכן הלוגו נשאר בצבע המקורי, ולטקסט, לכפתורים ולקישורים באתר בחרנו גוון כהה יותר של אותו כחול, ‎#0668A8, שמגיע ל-5.91:1. העין כמעט לא מבחינה בהבדל, והאתר עומד בתקן.

לא צריך לבחור בין מיתוג לנגישות. צריך גוון אחד כהה יותר.

טיפים לפלטה נגישה

• הגדירו לכל צבע מותג גוון ״לטקסט״ וגוון ״לרקע״.
• הימנעו מטקסט אפור בהיר על רקע לבן.
• על תמונות, הוסיפו שכבת צבע כהה מתחת לטקסט.
• אל תסמנו שגיאה או סטטוס בצבע בלבד. הוסיפו טקסט או אייקון.