# לאלמנטים צריך להיות ניגוד צבעים מספק

<https://www.fixreports.com/he/issues/color-contrast>

WCAG ⁨1.4.3 Contrast (Minimum)⁩ · רמה ⁨AA⁩

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

## מה הכלל הזה בודק
מוודא שהניגוד בין צבעי הרקע והחזית עונה על דרישות הסף עבור יחסי הניגוד של WCAG 2 AA.

## למה זה חשוב
WCAG 1.4.3 דורש יחס ניגודיות של 4.5:1 לפחות לטקסט רגיל ו-3:1 לטקסט גדול. מחירים, תגיות ובאנרים חיוורים קשים לקריאה לאנשים עם ראייה ירודה, ולכולם באור חזק.

## איך לתקן
### בכל אתר
1. מאתרים את הטקסט בניגודיות הנמוכה ורושמים את צבע הטקסט ואת צבע הרקע שלו: כלי לבדיקת ניגודיות או כלי המפתחים בדפדפן מציגים את שניהם.
2. מעדכנים את צבע הטקסט או הרקע ב-CSS של התבנית עד שהיחס מגיע ל-4.5:1 לפחות (3:1 לטקסט בגודל 24px ומעלה, או 18.66px מודגש).
3. כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.

### ב-Shopify
1. מאתרים את הטקסט בניגודיות הנמוכה ורושמים את צבע הטקסט ואת צבע הרקע שלו: כלי לבדיקת ניגודיות או כלי המפתחים בדפדפן מציגים את שניהם.
2. ב-Online Store > Themes > Customize > Theme settings > Colors, מכהים את צבע הטקסט או מבהירים את הרקע בערכת הצבעים הרלוונטית, עד שהיחס מגיע ל-4.5:1 לפחות.
3. כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.

### ב-WooCommerce וב-WordPress
1. מאתרים את הטקסט בניגודיות הנמוכה ורושמים את צבע הטקסט ואת צבע הרקע שלו: כלי לבדיקת ניגודיות או כלי המפתחים בדפדפן מציגים את שניהם.
2. מעדכנים את צבע הטקסט או הרקע ב-CSS של התבנית עד שהיחס מגיע ל-4.5:1 לפחות (3:1 לטקסט בגודל 24px ומעלה, או 18.66px מודגש).
3. כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.

## איך לבדוק את התיקון
- מריצים שוב את הסריקה ומוודאים ש-⁨color-contrast⁩ כבר לא מופיע.
- עורכים בדיקה מדגמית בכלי לבדיקת ניגודיות, על הצבעים המדויקים.

## מקורות
- תיעוד הכלל ב-axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- הבנת WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum