tigtools

בודק ניגודיות

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

פועל בדפדפן שלך ללא הרשמה

יחס ניגודיות

4.47:1

דרישהנדרשתוצאה
AA, טקסט רגיל4.5:1נכשל
AA, טקסט גדול3:1עובר
AAA, טקסט רגיל7:1נכשל
AAA, טקסט גדול4.5:1נכשל
רכיבי UI וגרפיקה3:1עובר

טקסט גדול פירושו לפחות 24px (18pt) רגיל או 18.66px (14pt) מודגש.

תצוגה מקדימה

טקסט רגיל בגודל 16px. The quick brown fox jumps over the lazy dog.

טקסט קטן בגודל 14px קשה יותר לקריאה עם ניגודיות נמוכה.

טקסט גדול בגודל 24px

טקסט מודגש בגודל 18.66px (14pt)

כפתור

צבע הטקסט הקרוב ביותר שעומד בדרישות

יעד
#767676 מגיע ליחס 4.54:1 על רקע זה.

טקסט שקוף משולב עם הרקע לפני המדידה; רקע שקוף משולב עם לבן.

איך להשתמש בו

  1. הזן את צבע הטקסט (הקדמי) ואת צבע הרקע כ-HEX, rgb(), hsl() או בפורמט CSS אחר, או השתמש בבוחרי הצבעים.
  2. קרא את יחס הניגודיות ואת התוצאה (עומד/לא עומד) לכל דרישת WCAG.
  3. אם דרישה נכשלת, בחר יעד והחל את הצבע המוצע, ששומר על הגוון ומשנה רק את הבהירות.
  4. השתמש ב”החלף“ כדי לבדוק את השילוב ההפוך, למשל טקסט בהיר על כפתור כהה.

איך זה עובד

היחס תואם להגדרת WCAG 2.2: הבהירות היחסית של כל צבע מחושבת מערוצי ה‑sRGB שלו, והיחס הוא (בהיר + 0.05) ÷ (כהה + 0.05). הוא נע בין 1:1 (צבעים זהים) ל‑21:1 (שחור על לבן).

הדרישות שנבדקות: קריטריון הצלחה 1.4.3 (AA) דורש 4.5:1 לטקסט רגיל ו‑3:1 לטקסט גדול; 1.4.6 (AAA) דורש 7:1 ו‑4.5:1; 1.4.11 דורש 3:1 לרכיבי ממשק ולגרפיקה משמעותית כמו גבולות שדות קלט וסמלים. טקסט גדול הוא לפחות 24px רגיל או כ‑18.66px מודגש. WCAG אינה מתירה עיגול כלפי מעלה, ולכן 4.49:1 נכשל ב‑AA אף שהוא קרוב; היחס המוצג כאן נחתך, לא מעוגל.

ההצעה שומרת על הגוון ועל הכרומה של צבע הטקסט ב‑OKLCH ומחפשת את הבהירות הקרובה ביותר, כהה או בהירה יותר, שעומדת ביעד. יחס ניגודיות הוא רק חלק מהקריאות: משקל הגופן, הגודל והבדלים בראיית צבעים חשובים גם הם, ו‑WCAG 2.2 היא ההמלצה הנוכחית של W3C שאליה מתייחסים רוב חוקי הנגישות.

דוגמאות

טקסט אפור שכמעט עובר

#777777 על לבן נותן 4.48:1. זה עובר לטקסט גדול ולרכיבי ממשק, אך נכשל ב‑AA לטקסט רגיל. האפור הקרוב ביותר שעובר הוא בערך #767676, שמגיע ל‑4.54:1.

טקסט לבן על כפתור מותג

לבן על #ff8800 נותן בערך 2.4:1, שנכשל אפילו ברמת 3:1 של טקסט גדול. הכהה של הכתום או שימוש בטקסט כהה במקום הם הפתרונות הנפוצים; ההצעה מראה כמה כהה צריך להיות צבע הטקסט.

בדיקת גבול שדה טופס

גבול אפור בהיר #cccccc על לבן הוא בערך 1.6:1. לפי קריטריון 1.4.11, גבול שמזהה שדה קלט צריך 3:1, ולכן צריך משהו בסביבות #949494 או כהה יותר.

שאלות נפוצות

איזה יחס ניגודיות צריך עבור WCAG AA?

4.5:1 לטקסט גוף רגיל, 3:1 לטקסט גדול (24px, או 18.66px מודגש) ו‑3:1 לרכיבי ממשק ולגרפיקה משמעותית. AAA מעלה את הטקסט ל‑7:1 וטקסט גדול ל‑4.5:1.

האם טקסט של לוגו או טקסט של כפתור מושבת צריך לעמוד בדרישה?

לא. WCAG פוטרת טקסט בלוגואים ובשמות מותגים, טקסט דקורטיבי בלבד וטקסט ברכיבי ממשק לא פעילים (מושבתים).

מדוע התוצאה שלי שונה מעט מכלי בדיקה אחר?

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

מה לגבי שיטת הניגודיות החדשה APCA?

APCA היא שיטה אחרת שהוצעה לגרסת WCAG עתידית. היא אינה חלק מ-WCAG 2.2, שזה מה שהכלי הזה מודד ומה שכללי הנגישות הנוכחיים מפנים אליו.

פרטיות

הצבעים נבדקים בדפדפן שלך. דבר אינו מועלה או נשמר.