התוצאות מוצגות לצורכי מידע בלבד ועשויות להכיל שגיאות. מומלץ לאמת מידע חשוב באופן עצמאי. השימוש בכלי הוא באחריותכם בלבד.
מה הכלי עושה
בודק ניגודיות הצבעים מודד עד כמה טקסט קריא על רקע מסוים. בחרו צבע טקסט וצבע רקע, והכלי יציג את יחס הניגודיות, מ־1:1 (צבעים זהים) ועד 21:1 (שחור על לבן), תצוגה מקדימה חיה, והאם הצמד עומד בארבעת הספים של WCAG: רמות AA ו־AAA לטקסט רגיל ולטקסט גדול.
היחס מחושב לפי נוסחת הבהירות היחסית (relative luminance) של WCAG 2: כל ערוץ צבע עובר ליניאריזציה ומקבל משקל (לירוק המשקל הגבוה ביותר, לכחול הנמוך ביותר), ואז הבהירות של הצבע הבהיר מחולקת בבהירות של הכהה, אחרי שמוסיפים 0.05 לשתיהן. רמת AA דורשת 4.5:1 לטקסט רגיל ו־3:1 לטקסט גדול (לפחות 24px, או 18.66px מודגש). רמת AAA מעלה את הספים ל־7:1 ול־4.5:1. החישוב מתבצע בדפדפן שלכם.
מתי להשתמש בו
- לבחור צבע מותג לכפתורים ולבדוק שתוויות לבנות עליו נשארות קריאות.
- לתקן ממצא של בדיקת נגישות ב־Lighthouse או ב־axe שמדווח על טקסט עם ניגודיות נמוכה.
- לבחור גוון אפור לטקסט משני, שיהיה בהיר מספיק כדי להיראות משני אבל עדיין יעמוד ברמת AA.
- לעצב ערכת נושא כהה, שבה צבעי הדגשה בגוונים בינוניים נכשלים לעיתים קרובות מול רקעים כהים.
דוגמה
#ffffff על #3b82f6
3.68:1 - AA large only
#767676 על #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b על #ffffff
14.63:1 - passes all four
שאלות על הכלי
למה טקסט לבן על כפתור כחול בוהק נכשל?
לצבעים רוויים בגוונים בינוניים יש בהירות גבוהה יחסית, ולכן טקסט לבן עליהם נוחת לעיתים קרובות בין 3:1 ל־4.5:1. זה מספיק לתוויות גדולות ומודגשות, אבל לא לטקסט רץ. הכהו את הרקע בדרגה או שתיים, עד שהיחס מגיע ל־4.5:1.
לאיזו רמה כדאי לכוון, AA או AAA?
AA היא הרמה שרוב חוקי הנגישות והמדיניות מתייחסים אליה, ולכן כדאי לראות בה את המינימום. AAA היא יעד מחמיר יותר ששווה לעמוד בו בטקסטים ארוכים לקריאה, אבל היא לא נדרשת בכל רכיב.
האם דרישות הניגודיות חלות גם על אייקונים ועל מסגרות?
WCAG 2.1 דורש יחס של לפחות 3:1 לגרפיקה בעלת משמעות ולרכיבי ממשק, כמו מסגרות של שדות קלט, טבעות פוקוס ואייקונים שמעבירים מידע. עבורם אפשר להיעזר בתוצאת ה־AA של טקסט גדול.
אפשר לבדוק צבע שכתוב ב־RGB או ב־HSL?
בוררי הצבעים עובדים עם ערכי hex. המירו קודם כתיבים אחרים עם משפחת הכלים של ממיר צבעים מ־HEX ל־RGB או עם ממיר צבעים, ואז הדביקו את קוד ה־hex.
האם הכלי חינמי?
כן, השימוש חינמי. בלי הרשמה ובלי אימייל. התוצאה מופיעה בדף הזה.
איך מקבלים את התוצאה?
משתמשים בכלי בדף הזה. התוצאה מופיעה כאן, בלי צורך במשלוח לאימייל.