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

לבדוק ניגודיות צבעים לפי WCAG ולתקן שילובים שנכשלים בלחיצה אחת.

מאת Nethanel Bar, Co-founder & CEO

עודכן לאחרונה 15 במאי 2026

מוכנים ללמוד תכנות באמת?

ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.

מה זה בודק ניגודיות צבעים WCAG?

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

WCAG מגדיר שלושה ספים. **3:1** הוא המינימום לכותרות גדולות (24px ומעלה במשקל רגיל או 18.66px ומעלה מודגש) ולגבול הנראה של רכיבי ממשק אינטראקטיביים כמו כפתורים, שדות טופס ואייקונים. **4.5:1** הוא מינימום ה-AA לטקסט גוף, הרף שרוב הצוותים מכוונים אליו. **7:1** הוא AAA, הציון הגבוה ביותר, שנותן תמיכה חזקה לקוראים עם ראייה ירודה.

ניגודיות היא **לא** אותו דבר כמו כמה חיים שני צבעים נראים. שני צבעי מותג בולטים עדיין יכולים להיות קשים לקריאה אם ה*בהירות היחסית* (luminance) שלהם קרובה. הכלי הזה מריץ את נוסחת ה-luminance של WCAG על כל ערוץ, מדווח את היחס המדויק ונותן ציון לכל הקשר, כך שלא תצטרכו לנחש.

מה תלמדו תוך כדי בדיקת ניגודיות

יחסי ניגודיות נעים בין 1:1 (צבעים זהים) ל-21:1 (שחור טהור על לבן טהור). זוגות מותג יומיומיים נוחתים בדרך כלל בין 2:1 ל-12:1.
WCAG משתמש ב*בהירות יחסית*, לא בבהירות נתפסת: צהוב על לבן יכול להיראות לעין בסדר ועדיין להיכשל עם 1.3:1.
טקסט גדול מקבל סף מקל (3:1 ל-AA) כי קל יותר לזהות גליפים גדולים ברמת ניגודיות נתונה.
כפתורים, גבולות של טפסים ואייקונים חייבים להגיע ל-3:1 מול הרקע הסמוך: זה כלל *הניגודיות שאינה טקסט* שנוסף ב-WCAG 2.1.
שינוי *בהירות* (לא גוון) הוא הדרך הבטוחה ביותר לתקן זוג שנכשל בלי לשנות את צבע המותג.

איך לבדוק ניגודיות צבעים צעד אחר צעד

הזינו את שני הצבעים
הקלידו או הדביקו ערך HEX, או השתמשו בבוחר הצבעים. צבע החזית הוא הטקסט או האייקון; הרקע הוא מה שנמצא מאחוריו.
קראו את יחס הניגודיות
המספר הגדול הוא יחס הניגודיות של WCAG. כל דבר מתחת ל-3:1 מסוכן לכל ממשק; מתחת ל-4.5:1 נכשל לטקסט גוף.
בדקו את ציוני AA/AAA
שלוש שורות מציגות עבר/נכשל לטקסט רגיל (4.5/7), לטקסט גדול (3/4.5) ולרכיבי ממשק (3:1). כוונו לסימני וי ירוקים בכל שורה שהעיצוב שלכם באמת משתמש בה.
לחצו על "התאמת צבע החזית" אם שורה נכשלת
כש-AA נכשל, הכלי יכול להזיז את בהירות צבע החזית למעלה או למטה, תוך שמירה על הגוון, עד שהזוג עובר. לחצו שוב בשביל AAA.
העתיקו את הזוג הסופי
ברגע ששני הצבעים עוברים בהקשרים שאתם צריכים, העתיקו את קטע ה-CSS (color: + background:) והכניסו אותו לגיליון הסגנונות או לקובץ ה-design tokens.

יעדי ניגודיות WCAG במבט אחד

הצליבו את מה שאתם מעצבים עם הרמה שאתם צריכים. מקור: WCAG 2.2 Understanding 1.4.3 ו-1.4.11.

יעד	מינימום AA	מינימום AAA	הערות
טקסט גוף (< 18pt רגיל)	4.5 : 1	7 : 1	כלל ברירת המחדל לפסקאות, תוויות, כיתובים
טקסט גדול (≥ 18pt רגיל או ≥ 14pt מודגש)	3 : 1	4.5 : 1	כותרות, טקסט hero, ציטוטים גדולים
רכיבי ממשק ואובייקטים גרפיים	3 : 1	-	גבולות כפתורים, שדות טופס, אייקונים, טבעות פוקוס
לוגו או קישוט בלבד	פטור	פטור	לוגוטייפים וטקסט אגבי פטורים, אבל השימושיות עדיין חשובה
מצב מושבת	פטור	פטור	פקדים לא פעילים פטורים, אבל היזהרו לא להישען על זה כדי להשיק ברירות מחדל עם ניגודיות נמוכה

דוגמאות ניגודיות לנסות

זוג כהה על בהיר שעובר

טקסט גוף, AA + AAA בנוחות

color: #1f2937;       /* slate-800 */background: #f9fafb;  /* slate-50  *//* Contrast ratio ≈ 14.6:1 */

אפור-כחלחל כהה קלאסי על כמעט לבן. עובר AAA לטקסט גוף (≥ 7:1) עם מרווח. רוב ממשקי המוצר צריכים לכוון לסביבה הזו כברירת מחדל.

כחול מותג שנכשל ב-AA בקושי

נראה בולט, נכשל בחישוב

color: #3b82f6;       /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */

כחולים חיים על לבן נוחתים לעתים קרובות סביב 4:1: קריאים לכותרות גדולות (עוברים 3:1 AA Large) אבל נכשלים ברף של 4.5:1 לטקסט גוף. השתמשו בהם לכפתורים ולתוויות CTA ב-18px ומעלה, לא לטקסט פסקאות.

צהוב שנראה בסדר ולא באמת בסדר

העין משקרת, ה-luminance לא

color: #facc15;       /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 - fails everything */

צהוב בוהק על לבן הוא מלכודת מפורסמת: הצבעים נראים רועשים אבל ה-luminance שלהם קרובה מדי. שמרו את השילוב הזה לרקעים כהים (למשל #facc15 על #1f2937 מגיע ל-≈ 12:1).

טעויות ניגודיות נפוצות

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

שאלות נפוצות על בודק ניגודיות WCAG

מה יחס ניגודיות צבעים טוב?

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

מה ההבדל בין AA ל-AAA?

AA הוא בסיס הנגישות החוקי שרוב התקנות דורשות (WCAG 2.1/2.2 AA). AAA הוא היעד המחמיר יותר לארגונים שרוצים לתמוך במשתמשים עם ראייה ירודה. AAA אינו חובה, אבל בטקסט גוף הוא יעד סביר.

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

WCAG מגדיר טקסט גדול כ-18pt ומעלה (כ-24px) במשקל רגיל, או 14pt ומעלה (כ-18.66px) במשקל מודגש. טקסט גדול צריך רק 3:1 כדי לעבור AA; טקסט קטן יותר צריך 4.5:1.

למה צבע המותג שלי נכשל בניגודיות?

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

האם פקדים מושבתים צריכים לעבור את ניגודיות WCAG?

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