בודק ניגודיות צבעים WCAG
בקצרה
בחרו צבע טקסט וצבע רקע, והכלי יחשב את יחס הניגודיות ביניהם ויראה אם הוא עומד בדרישות WCAG 1.4.3 ברמות AA ו-AAA, לטקסט רגיל וגדול. החישוב מתבצע בדפדפן בלבד - שום נתון לא נשלח לשרת.
הכלי
21:1יחס ניגודיות
- טקסט רגיל - AA (4.5:1)-
- טקסט רגיל - AAA (7:1)-
- טקסט גדול - AA (3:1)-
- טקסט גדול - AAA (4.5:1)-
- רכיבי ממשק וגרפיקה (3:1)-
טקסט גדול לדוגמה
טקסט רגיל לדוגמה - כך נראים הצבעים שבחרתם זה על רקע זה.
איך משתמשים בכלי?
- בחרו צבע בבורר הצבעים, או הדביקו ערך הקס (למשל
#0B5FA4) בשדה הטקסט. - היחס מתעדכן מיד, יחד עם תצוגה מקדימה של הצבעים והאם כל רמה עוברת או נכשלת.
- היעד המחייב בישראל הוא AA: 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.
ספי הניגודיות של WCAG
| סוג תוכן | AA | AAA |
|---|---|---|
| טקסט רגיל | 4.5:1 | 7:1 |
| טקסט גדול (כ-24px / 18.66px מודגש) | 3:1 | 4.5:1 |
| רכיבי ממשק וגרפיקה | 3:1 | - |
שאלות נפוצות
מהו יחס הניגודיות הנדרש ב-WCAG?
לטקסט רגיל: 4.5:1 ברמה AA ו-7:1 ברמה AAA. לטקסט גדול: 3:1 ברמה AA ו-4.5:1 ברמה AAA. לרכיבי ממשק וגרפיקה: לפחות 3:1.
מה נחשב טקסט גדול?
טקסט בגודל 18pt ומעלה (כ-24px), או 14pt מודגש ומעלה (כ-18.66px מודגש).
האם הכלי שומר את הצבעים שלי?
לא. כל החישוב מתבצע בדפדפן שלכם בלבד, ושום נתון אינו נשלח לשרת.
מקורות
- W3C - Understanding SC 1.4.3 Contrast (Minimum) (w3.org/WAI)
- W3C - Understanding SC 1.4.11 Non-text Contrast (w3.org/WAI)
רוצים בדיקת נגישות מלאה לאתר?
בדיקת ניגודיות היא רכיב אחד מני רבים. ראו את הצ'ק-ליסט המלא או את מדריך ההנגשה.
לצ'ק-ליסט הנגישות