אימות ניגודיות הפלטה

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

סקירה כללית

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

פורמט קלט

היכולת מקבלת פלטת צבעים כקלט:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

פרמטרים

פרמטר	סוג	נדרש	תיאור
`colors`	array	כן	מערך של אובייקטי צבע עם מאפיינים `name` ו-`hex`
`wcag_level`	string	לא	רמת עמידה ב-WCAG: "A", "AA" (ברירת מחדל), או "AAA"
`pairs_to_check`	array	לא	זוגות צבעים ספציפיים לאימות (לדוגמה: `["primary-text", "background-text"]`)

רמות WCAG המאומתות

היכולת מאמתת יחסי ניגודיות בהתאם לתקני WCAG:

רמה	טקסט רגיל	טקסט גדול	מינימום יחס
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

טקסט רגיל — טקסט קטן מ-18pt (או 14pt מודגש)
טקסט גדול — טקסט בגודל 18pt או יותר (או 14pt מודגש או יותר)

סכמת פלט

היכולת מחזירה דוח אימות מפורט:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

שדות פלט

שדה	סוג	תיאור
`compliant`	boolean	האם כל הפלטה עומדת ברמת ה-WCAG שצוינה
`wcag_level`	string	רמת ה-WCAG שנבדקה
`pairs`	array	תוצאות מפורטות עבור כל זוג צבעים
`contrast_ratio`	number	יחס הניגודיות המחושב (מ-1:1 עד 21:1)
`status`	string	"pass" או "fail" עבור כל זוג
`recommendations`	array	הצעות לשיפור זוגות שנכשלו

דוגמת שימוש

הנחיה:

Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5.

תוצאה: היכולת מאמתת את כל שילוב הצבעים ומחזירה:

✅ ראשי + טקסט: יחס 5.2:1 (עובר WCAG AA)
✅ רקע + טקסט: יחס 12.1:1 (עובר WCAG AAA)
סך הכל: תואם ל-WCAG AA

אינטגרציה עם בונה התבניות (Theme Builder)

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

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

שיטות עבודה מומלצות

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

זוגות שנכשלו והמלצות

אם זוג צבעים נכשל באימות, היכולת מספקת המלצות:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "בהיר את צבע הטקסט ל-#ffffff (היחס יהיה 5.2:1)",
    "הכהה את צבע הרקע ל-#556b2f (היחס יהיה 4.8:1)",
    "השתמש בצבע ראשי אחר כמו #4a6b1f (היחס יהיה 6.1:1)"
  ]
}

יכולות קשורות

Generate Logo SVG — צור לוגואים עם פלטת הצבעים המאומתת שלך
Create Menu — בנה ניווט עם צבעים נגישים

סקירה כללית​

פורמט קלט​

פרמטרים​

רמות WCAG המאומתות​

סכמת פלט​

שדות פלט​

דוגמת שימוש​

אינטגרציה עם בונה התבניות (Theme Builder)​

שיטות עבודה מומלצות​

זוגות שנכשלו והמלצות​

יכולות קשורות​