מה הכלל הזה בודק
מוודא שהניגוד בין צבעי הרקע והחזית עונה על דרישות הסף עבור יחסי הניגוד של WCAG 2 AA.
למה זה חשוב
WCAG 1.4.3 דורש יחס ניגודיות של 4.5:1 לפחות לטקסט רגיל ו-3:1 לטקסט גדול. מחירים, תגיות ובאנרים חיוורים קשים לקריאה לאנשים עם ראייה ירודה, ולכולם באור חזק.
איך לתקן
בכל אתר
- מאתרים את הטקסט בניגודיות הנמוכה ורושמים את צבע הטקסט ואת צבע הרקע שלו: כלי לבדיקת ניגודיות או כלי המפתחים בדפדפן מציגים את שניהם.
- מעדכנים את צבע הטקסט או הרקע ב-CSS של התבנית עד שהיחס מגיע ל-4.5:1 לפחות (3:1 לטקסט בגודל 24px ומעלה, או 18.66px מודגש).
- כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.
ב-Shopify
- מאתרים את הטקסט בניגודיות הנמוכה ורושמים את צבע הטקסט ואת צבע הרקע שלו: כלי לבדיקת ניגודיות או כלי המפתחים בדפדפן מציגים את שניהם.
- ב-Online Store > Themes > Customize > Theme settings > Colors, מכהים את צבע הטקסט או מבהירים את הרקע בערכת הצבעים הרלוונטית, עד שהיחס מגיע ל-4.5:1 לפחות.
- כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.
איך לבדוק את התיקון
- מריצים שוב את הסריקה ומוודאים ש-color-contrast כבר לא מופיע.
- עורכים בדיקה מדגמית בכלי לבדיקת ניגודיות, על הצבעים המדויקים.
איך FixReports מזהה את הבעיה
הסריקה שלנו מריצה את הכלל color-contrast של axe-core בדפדפן Chrome אמיתי בכל עמוד שהיא בודקת, ומדווחת על כל רכיב שנכשל יחד עם העמוד שלו, ה-markup שלו, ובמקרים הרלוונטיים גם צילום מסך.
בדיקה אוטומטית מאשרת שהבעיה הספציפית הזו קיימת. היא לא יכולה לקבוע אם שאר העמוד נגיש: חלק מהחסמים מתגלים רק כשאדם בודק את העמוד.