בודק הניגודיות מחשב את יחס הניגודיות לפי תקן WCAG 2.1 בין שני צבעים ומדרג אותם מול ספי AA/AAA עבור טקסט רגיל וגדול. תצוגה מקדימה חיה מציגה טקסט המעובד בצבעים שנבחרו, וכפתור "בחר רקע דף" דוגם את הדף הנוכחי.
נגישות הופכת לדרישה הכרחית יותר ויותר - עמידה בתקן WCAG היא דרישה חוקית בתחומי שיפוט רבים, וגם היכן שלא, ניגודיות ירודה מרחיקה משתמשים. בודק הניגודיות אומר לך באופן מיידי אם שני צבעים כלשהם עומדים בתקני WCAG. בחר צבע חזית ורקע באמצעות בוחר צבעים או הדבק ערכי Hex; הכלי מחשב את יחס הניגודיות באמצעות נוסחת ההארה הרשמית של WCAG ומדרג אותו מול ארבעה ספים: AA רגיל (≥4.5:1), AA גדול (≥3:1), AAA רגיל (≥7:1) ו-AAA גדול (≥4.5:1). לכל סף מוצג תג ברור של עבר/נכשל. תצוגה מקדימה חיה מציגה טקסט גדול ורגיל בצבעים שנבחרו כדי שתוכלו לראות את ההשפעה החזותית בפועל. כפתור נוחות דוגם את צבע הרקע של גוף הדף הנוכחי - שימושי כאשר בודקים אם שילוב צבעים באתר אמיתי עובר. הכל פועל באופן מקומי בדפדפן שלך, ללא העלאות.
משתמש בנוסחת ההארה הרשמית של WCAG לחישוב יחס ניגודיות. התוצאה מדויקת ותואמת לכל בודק נגישות תקין.
עבר/נכשל עבור AA רגיל (≥4.5:1), AA גדול (≥3:1), AAA רגיל (≥7:1), AAA גדול (≥4.5:1) — כולם מוצגים כרשת.
מרנדר טקסט גדול ורגיל בפועל בצבעים שבחרת כדי שתראה את ההשפעה החזותית לצד היחס המספרי.
דגימה בלחיצה אחת של צבע הרקע המחושב של גוף הדף הנוכחי — שימושי לבדיקת שילובים בעולם האמיתי.
הקלד ערך Hex או השתמש בבוחר הצבעים המובנה. הערכים מסתנכרנים דו-כיוונית בזמן העריכה של כל אחד מהם.
החלפה בלחיצה אחת הופכת בין חזית לרקע - שימושי בעת בדיקת ערכות נושא הפוכות או מצבי ריחוף (Hover).
לפני סיום פלטת צבעים, בדקו כל צבע טקסט מול הרקע שלו כדי להבטיח עמידה בתקן WCAG AA - מונע עבודה כפולה מאוחר יותר.
השתמשו ב"בחר רקע דף" באתר חי, ואז הדביקו את צבע הטקסט בפועל - מצאו הפרות נגישות (a11y) תוך דקות ללא צורך בפתיחת Lighthouse.
כאשר מותג בוחר צבע שעלול להיכשל בנגישות, השתמשו בבודק כדי למצוא את הגרסה התואמת הקרובה ביותר (גוון כהה/בהיר יותר).
וודאו שצבעי מצב ריחוף/פעיל/מושבת עדיין עומדים בדרישות הניגודיות, לא רק ברירת המחדל.
ערכות נושא כהות לרוב נכשלות בניגודיות עבור טקסט אפור על אפור. בדקו את האפורים הכהים ביותר מול הרקעים הכהים ביותר שלכם כדי לתפוס זאת.
לחצו על סמל הניגודיות (Contrast) ב-DevSuite Pro. חלונית נפתחת עם שדות צבע לחזית ולרקע.
השתמשו בבוחר הצבעים או הדביקו ערך Hex עבור כל אחד. התצוגה המקדימה מתעדכנת בזמן אמת כשאתם משנים צבעים.
המספר הגדול (למשל 4.8:1) הוא יחס הניגודיות. גבוה יותר זה טוב יותר. 3 הוא המינימום ההכרחי; 4.5 הוא היעד לטקסט רגיל.
תגי עבר/נכשל עבור AA ו-AAA, גדלי טקסט רגילים וגדולים, מראים במבט חטוף למה השילוב שלכם מתאים.
אם נכשל, התאימו צבעים. הכהו את החזית או הבהירו את הרקע (או להפך) עד שרמת היעד תציג 'עבר'.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
