ניגודיות צבעים ו-WCAG: איך הופכים טקסט לקריא

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

יחס הניגודיות

ניגודיות היא יחס בין 1:1 (אותו צבע) ל-21:1 (שחור על לבן). היא מבוססת על בהירות יחסית (relative luminance), כמה בהיר כל צבע נראה לעין, כשהירוק נחשב הכי הרבה והכחול הכי מעט. לכן טקסט צהוב על לבן כמעט בלתי נראה, וכחול על לבן נקרא היטב.

הספים

               טקסט רגיל   טקסט גדול
AA  (מינימום)   4.5:1       3:1
AAA (מוגבר)    7:1         4.5:1

טקסט גדול = לפחות 24px, או 18.66px מודגש

AA היא הרמה שרוב חוקי ותקנות הנגישות מפנים אליה, אז התייחסו אליה כמינימום. כדאי לשאוף ל-AAA בטקסט קריאה ארוך. אייקונים, מסגרות של שדות וסימוני פוקוס שנושאים משמעות צריכים לפחות 3:1 לפי WCAG 2.1.

זוגות שנכשלים לעתים קרובות

טקסט placeholder אפור, טקסט לבן על צבעי מותג בהירים כמו כתום, צהוב או ירוק בהיר, וטקסט על גבי תמונות. ההפרשים יכולים להיות זעירים: ⁦#777777⁩ על לבן הוא בערך 4.48:1, קצת מתחת ל-AA, ואילו ⁦#767676⁩ הוא בערך 4.54:1 ועובר.

תיקונים מהירים

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

ניגודיות היא לא כלל הצבע היחיד

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

מצב כהה

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

טקסט על תמונות ומעברי צבע

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

מה הלאה

הטיוטה של WCAG 3 בוחנת שיטת ניגודיות חדשה בשם APCA, שמתחשבת בגודל ובעובי הגופן בצורה מדויקת יותר. זו עדיין טיוטה: החוקים והביקורות היום מתייחסים ל-WCAG 2.1 ו-2.2, כך שהספים של 4.5:1 ו-3:1 נשארים אלה שצריך לעמוד בהם.

בודקים זוג צבעים

בודק ניגודיות הצבעים של 4Dev מציג את היחס לכל צבע טקסט ורקע, עם תצוגה מקדימה חיה וציון עובר או נכשל ל-AA ול-AAA, לטקסט רגיל ולטקסט גדול. החישוב משתמש בנוסחת WCAG 2 ורץ בדפדפן שלכם.

לבודק ניגודיות הצבעים