כלי נגישות חינמי

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

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

מחשבון ניגודיות

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

כך נראה טקסט רגיל בגודל 16 פיקסלים.

טקסט גדול בגודל 24 פיקסלים

מסגרת של כפתור

יחס ניגודיות4.54:1

תוצאות WCAG 2.2 לצבעים האלה
טקסט רגיל, AAWCAG 1.4.3, נדרש 4.5:1עובר
טקסט גדול, AAWCAG 1.4.3, נדרש 3:1עובר
טקסט רגיל, AAAWCAG 1.4.6, נדרש 7:1נכשל
טקסט גדול, AAAWCAG 1.4.6, נדרש 4.5:1עובר
אייקונים, מסגרות ושדות טופסWCAG 1.4.11, נדרש 3:1עובר

צבעי הטקסט הקרובים ביותר שעוברים על הרקע הזה

טקסט גדול הוא טקסט בגודל 24 פיקסלים לפחות, או 18.66 פיקסלים בהדגשה. היחסים מעוגלים כלפי מטה, ולכן 4.499:1 מוצג כ-4.49:1 ונכשל, כפי ש-WCAG מתכוון.

או סריקה של דף לאיתור טקסט בניגודיות נמוכה

חינם. בודק את הכתובת שהוזנה תוך כ-20 שניות.

מה הכלי בודק

  • יחס WCAG של כל שני צבעים

    המחשבון משתמש בנוסחת הבהירות היחסית (relative luminance) מתוך ההגדרות של WCAG 2.2 ומציג את התוצאה לטקסט רגיל, לטקסט גדול ולרכיבי ממשק, ברמות AA ו-AAA. הוא פועל בדפדפן שלך.

  • צבע שעובר, מחושב בשבילך

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

  • כל טקסט בניגודיות נמוכה בדף

    סריקת הדף מריצה את הכלל color-contrast של axe-core בדפדפן Chrome אמיתי ומציגה כל רכיב שנכשל עם צבע הטקסט, צבע הרקע, גודל הגופן והיחס שלו.

  • מקובץ לפי זוג צבעים

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

  • הסף הנכון לטקסט גדול

    טקסט בגודל 24 פיקסלים לפחות, או 18.66 פיקסלים בהדגשה, צריך 3:1 במקום 4.5:1. הסריקה מחילה על כל רכיב את הסף הנכון לפי הגודל והמשקל המחושבים שלו.

  • מה לא הצלחנו למדוד, ולמה

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

מה הכלי לא יכול לבדוק

  • למדוד טקסט מעל תמונות, מעברי צבעים או וידאו. תוכנה לא יכולה לדעת איזה חלק של התמונה נמצא מאחורי כל אות, ולכן המקרים האלה מוצגים לבדיקה ידנית.
  • לבדוק מצבי מעבר עכבר, מיקוד או מצבים אחרים. הסריקה רואה את הדף כפי שהוא נטען; את הצבעים האלה בודקים במחשבון.
  • לסרוק אייקונים, מסגרות ושדות טופס בדף לפי WCAG 1.4.11. המחשבון מציג את תוצאת ה-3:1 לכל זוג צבעים שמזינים בו.
  • לקרוא טקסט שהוא חלק מתמונה, כמו באנר שהמילים צרובות בתוכו.
  • לבדוק יותר מהדף שהזנת. הסריקה החינמית המלאה בודקת עד חמישה דפים מרכזיים.

למה זה חשוב

ניגודיות נמוכה היא כשל הנגישות הנפוץ ביותר באינטרנט. הניתוח של WebAIM לשנת 2026, שבדק את דפי הבית של מיליון האתרים המובילים, מצא טקסט בניגודיות נמוכה ב-83.9% מהם, עם ממוצע של 34 מקרים בכל דף.

טקסט חיוור קשה לקריאה לאנשים עם ראייה ירודה או עם ליקוי בראיית צבעים, ולכל מי שמשתמש בטלפון באור שמש חזק. קריטריון ההצלחה 1.4.3 של WCAG 2.2, ברמה AA, קובע מינימום של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.

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

איך לקרוא את התוצאות

יחס ניגודיות
מ-1:1 (אותו צבע פעמיים) עד 21:1 (שחור על לבן). היחסים מעוגלים כלפי מטה, ולכן זוג שמוצג כ-4.49:1 נכשל במינימום של 4.5:1.
טקסט רגיל, AA (4.5:1)
המינימום לטקסט גוף, לקישורים, לתוויות ולטקסט של כפתורים לפי WCAG 1.4.3.
טקסט גדול, AA (3:1)
לטקסט בגודל 24 פיקסלים לפחות, או 18.66 פיקסלים בהדגשה. WCAG מגדיר טקסט גדול כ-18 נקודות, או 14 נקודות בהדגשה.
AAA (7:1 ו-4.5:1)
הרמה המשופרת ב-WCAG 1.4.6. היא לא נדרשת לעמידה ברמה AA, אבל עוזרת ליותר קוראים.
אייקונים, מסגרות ושדות טופס (3:1)
WCAG 1.4.11 דורש 3:1 מול הצבעים הסמוכים לחלקים של פקדים וגרפיקה שאנשים צריכים לראות כדי להשתמש בהם.
טקסט שנכשל
כל רכיב שהסריקה מדדה מתחת לסף שלו, עם הסלקטור, הצבעים, הגודל והיחס שלו. אפשר לפתוח כל אחד כדי לראות את ה-markup שלו, ואם יש, גם צילום מסך.
לבדיקה בעין
טקסט ש-axe-core לא הצליח למדוד, עם הסיבה, למשל תמונה או מעבר צבעים מאחוריו.

איך לתקן את הבעיות הנפוצות ביותר

  • טקסט אפור על לבן

    #767676 הוא בערך האפור הבהיר ביותר שמגיע ל-4.5:1 על לבן (4.54:1). אפורים בהירים יותר כמו #999999 (2.84:1) הם סיבה נפוצה לכשלים בכותרות תחתונות, בכיתובים, בטקסט placeholder ובמחירים.

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

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

  • טקסט placeholder בטפסים

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

  • טקסט מעל תמונות וסליידרים

    יש להציב את הטקסט על רקע אטום או חצי-שקוף, או להוסיף שכבה כהה מעל התמונה, ואז לבדוק את החלק הבהיר ביותר של התמונה שנמצא מאחורי הטקסט.

  • תגיות מבצע ואותיות קטנות

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

ניגודיות צבעים נמוכה: למה זה חשוב ואיך מתקנים את זה ב-Shopify, ב-WooCommerce ובכל אתר

שאלות על הכלי

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

ברמה AA: יחס של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (קריטריון הצלחה 1.4.3), ו-3:1 לרכיבי ממשק ולגרפיקה בעלת משמעות (1.4.11). רמה AAA דורשת 7:1 ו-4.5:1 (1.4.6).

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

WCAG מגדיר טקסט בקנה מידה גדול כטקסט בגודל 18 נקודות לפחות, או 14 נקודות בהדגשה. בפיקסלים של CSS זה בערך 24px, או 18.66px בהדגשה.

האם לוגואים חייבים לעמוד במינימום הניגודיות?

לא. WCAG 1.4.3 פוטר לוגוטייפים וטקסט שהוא חלק מלוגו או משם מותג, וגם טקסט דקורטיבי בלבד וטקסט בפקדים לא פעילים.

למה הסריקה מציגה טקסט מעל תמונה לבדיקה?

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

האם נדרשת ניגודיות ברמת AAA?

AAA לא נדרשת לעמידה ברמה AA, ו-W3C לא ממליץ לדרוש AAA לאתרים שלמים. עדיין, יחס של 7:1 לטקסט גוף הוא שיטה טובה כשהעיצוב מאפשר זאת.

האם APCA הוא חלק מ-WCAG?

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

מקורות

כלים קשורים

דוח תיקוני נגישות ($174, תשלום חד-פעמי) מתחיל מהסריקה החינמית המלאה ומוסיף עוד עמודים, את השינוי שצריך לבצע לכל ממצא, קובץ PDF ובדיקות חוזרות לאימות התיקונים.

מידע על דוח תיקוני נגישות