איך אני בודק אם צבעי הטקסט והרקע שלי עומדים בתקן WCAG?

הזינו קודי hex בשדות Text color ו-Background color, או השתמשו בבוחרי הצבע. יחס הניגודיות (Contrast ratio) מוצג עם עבר או נכשל עבור AA ו-AAA בטקסט רגיל וגדול, וכן עבור רכיבי ממשק.

איזה יחס ניגודיות דורש תקן WCAG AA?

AA דורש 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. AAA דורש 7:1 לטקסט רגיל ו-4.5:1 לטקסט גדול. רכיבי ממשק ואובייקטים גרפיים דורשים 3:1.

מה נחשב כטקסט גדול?

הכלי מתייחס לטקסט רגיל בגודל 18pt‏ (24px), או טקסט מודגש בגודל 14pt‏ (18.66px), כגדול. טקסט קטן יותר חייב לעמוד בסף הגבוה יותר של טקסט רגיל.

הצבעים שלי נכשלים ב-AA. איך אני מתקן אותם?

השתמש בהצעות בלחיצה אחת "תקן את צבע הטקסט" או "תקן את הרקע". הן מכווננות את הבהירות תוך שמירה על אותו גוון עד שהזוג מגיע ל-4.5:1.

אילו פורמטים של צבעים הוא מקבל, והאם אני יכול לבחור מהמסך?

הוא מקבל ערכי hex בני 3 ו-6 ספרות, כגון #abc או #1e293b. כפתור בחר צבע מהמסך מופיע בדפדפנים התומכים ב-API של EyeDropper, כגון Chromium.

האם זה באמת בחינם?

כן. כל כלי הוא חינמי לשימוש, ללא צורך בחשבון או בכרטיס אשראי. העבודה מתבצעת במכשיר שלך ולא בשרתים שלנו, וזה מה שמאפשר להפעיל אותו בחינם.

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

🌓

בודק ניגודיות צבעים WCAG בחינם

בדוק האם שני צבעים עומדים בתקני ניגודיות WCAG AA ו-AAA לנגישות. תצוגה מקדימה חיה בגדלי טקסט מרובים עם הצעות אוטומטיות כאשר הניגודיות נמוכה מדי.

פועל בדפדפן שלךללא הרשמה, ללא חלונות קופציםללא צורך בכניסהחינם לנצח

פועל לא-מקוון לאחר טעינה

צבע טקסט

צבע רקע

כותרת גדולה

טקסט בינוני (18px) לקריאה ותוכן.

טקסט גוף רגיל (16px) לפסקאות.

טקסט קטן (14px) לכיתובים ומטאדאטה.

14.63:1

יחס ניגודיות

✓WCAG AA — טקסט רגיל

נדרש 4.5:1 · יש לך 14.63:1

✓WCAG AA — טקסט גדול

נדרש 3.0:1 · יש לך 14.63:1

✓WCAG AAA — טקסט רגיל

נדרש 7.0:1 · יש לך 14.63:1

✓WCAG AAA — טקסט גדול

נדרש 4.5:1 · יש לך 14.63:1

✓רכיבי UI / אובייקטים גרפיים

נדרש 3.0:1 · יש לך 14.63:1

הגדרות מהירות

מבוסס על הנחיות ניגודיות WCAG 2.1. טקסט גדול = 18pt (24px) רגיל או 14pt (18.66px) מודגש. קודי HEX מתעדכנים בשני הכיוונים: הקלידו HEX או בחרו צבע — שני הקלטים נשארים מסונכרנים.

שימושים נפוצים

בדוק דפי אינטרנט לעמידה WCAGאמת שצבעי הטקסט של האתר שלך עומדים בתקן ניגודיות WCAG AA או AAA להנגשה.
אמת שילובי צבע מותגבדוק את שילובי צבעי המותג שלך כדי להבטיח שהם עובדים לעיצוב UI נגיש.
בדוק לוחות צבעים של מצב כההטקסט בהיר על רקע כהה עדיין יכול להיכשל בניגודיות — בדוק את שילובי הצבע של המצב הכהה שלך כאן.
זוגות צבע לחומר מודפספוסטרים, שלטים וחומרים מודפסים זקוקים גם להניגודיות קריאה — במיוחד עבור צופים גדולים יותר.
עצב צבעי כפתורים נגישיםודא שקריאות לפעולה, כפתורי פעולה וקישורים עוברים WCAG נגד הרקעים שלהם.

כיצד זה עובד

בדיקת הניגודיות פועלת כולה בדפדפן שלך באמצעות אלגוריתם הבהירות היחסית של WCAG 2.1 — ללא ספרייה, ללא שרת, רק חשבון כתוב-יד שעוקב אחרי המפרט בדיוק. כל תוצאה מתעדכנת בזמן אמת תוך כדי הקלדה או בחירת צבע.

1
קלט הקס ונורמליזציה
גם ערכי הקס בני 3 ספרות (#abc) וגם בני 6 ספרות (#aabbcc) מתקבלים ומנורמלים לשלשות RGB מלאות. קלט לא תקין נדחה מיד במקום להתברר בשקט לשחור, כך שגבול אדום מופיע במקום תוצאת עבר מטעה.
2
חישוב בהירות WCAG
כל צבע מומר לבהירות יחסית באמצעות נוסחת WCAG 2.1: ערכי ערוץ sRGB מלוננים עם תיקון גמא מקוטע (חלוקה ב-12.92 מתחת ל-0.03928, העלאה בחזקת 2.4 מעליו), ואז משוקללים כ-0.2126R + 0.7152G + 0.0722B.
3
יחס ניגודיות ובדיקות תאימות
יחס הניגודיות מחושב כ-(בהיר יותר + 0.05) / (כהה יותר + 0.05) ונבדק מול כל חמשת ספי WCAG: AA טקסט רגיל (4.5:1), AA טקסט גדול (3:1), AAA טקסט רגיל (7:1), AAA טקסט גדול (4.5:1), ורכיבי ממשק (3:1). התוצאות מתעדכנות בכל הקשה.
4
הצעות תיקון שומרות-גוון
כשהזוג נכשל ב-WCAG AA, הכלי מחפש במרחב הבהירות HSL — צועד החוצה מהבהירות המקורית בשני הכיוונים — כדי למצוא את הווריאנט הקרוב ביותר של כל צבע שעובר 4.5:1 תוך שמירה על אותו גוון ורוויה. EyeDropper API (Chromium) זמין גם כן לדגום כל צבע ישירות מהמסך שלך.