ImageColorPicker.com

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

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

בדוק את הצבעים שלך

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

5.39 ל-1
ניגודיות
AA
תוצאת טקסט
טוב

מושווים: #000000 על #4989A4

טקסט

16px, רגיל (400)

נחשב לטקסט רגיל.

  • AA (WCAG 1.4.3): לפחות 4.5:1

    עובר

  • AAA (WCAG 1.4.6): לפחות 7:1

    1.61 דרושים נוספים

    לא עבר

רכיבי ממשק וגרפיקה

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

  • AA (WCAG 1.4.11): לפחות 3:1

    עובר
5.39 ל-1. טקסט: עומד בדרישות AA, לא עומד בדרישות AAA. רכיבי ממשק: עומד.
איך זה נבדק
צבעים שמשווים (לאחר מיזוג)
טקסט #000000 על רקע #4989A4
בהירות יחסית
טקסט 0.0000, רקע 0.2198
נוסחה
(L1 + 0.05) / (L2 + 0.05) כאשר L1 היא הבהירות של הצבע הבהיר יותר ו-L2 של הצבע הכהה יותר.
יחס מדויק
5.3976 ל-1, מוצג כ-5.39 ל-1. הערך המוצג נחתך ולא מעוגל, לכן הוא אף פעם לא נראה טוב יותר ממה שהוא באמת. הערך המדויק הוא שמושווה לדרישה.

גודל טקסט: 16px, רגיל (400)

נחשב לטקסט רגיל. טקסט גדול הוא לפחות 24px (18pt), או לפחות 18.67px (14pt) כאשר הוא מודגש (משקל 700 או יותר). הגדלים מוצגים בקיצוץ, לא מעוגלים.

נחשב לטקסט רגיל. טקסט גדול הוא לפחות 24px (18pt), או לפחות 18.67px (14pt) כאשר הוא מודגש (משקל 700 או יותר). הגדלים מוצגים בקיצוץ, לא מעוגלים.

Aa
כותרת תצוגה מקדימה

השועל החום המהיר קופץ מעל הכלב העצלן

דוגמה לטקסט קטן (12px)

טקסט
#000000
רקע
#4989a4

תקני WCAG

רמה AA

יחס ניגודיות מינימלי של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. נדרש לרוב האתרים.

רמה AAA

יחס ניגודיות משופר של 7:1 לטקסט רגיל ו-4.5:1 לטקסט גדול. מומלץ לנגישות מיטבית.

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

חשב את יחס הניגודיות של צבעי טקסט ורקע.

בחר צבע באמצעות ה-Color Picker עבור צבע טקסט ורקע או הזן צבע בפורמט הקסדצימלי RGB (למשל, #259 או #2596BE). תוכל להתאים את המחוון כדי לבחור צבע. הנחיות הנגישות לתוכן אינטרנט (WCAG) כוללות הנחיה ספציפית לעזור לקבוע אם הטקסט קריא למשתמשים רואים. קריטריון זה משתמש באלגוריתם מסוים למיפוי שילובי צבעים ליחסים ניתנים להשוואה. באמצעות נוסחה זו, WCAG קובעת שיחס ניגודיות של 4.5:1 בין טקסט לרקע שלו הוא מספיק לטקסט רגיל, וטקסט גדול (18+ נקודות רגיל, או 14+ נקודות מודגש) צריך להיות בעל יחס ניגודיות של לפחות 3:1.

תכונות עיקריות

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

כלים מתקדמים

  • תיקון צבע אוטומטי
  • דוגמאות טקסט ורקע
  • זיהוי שם צבע
  • ייצוא תוצאות

שאלות נפוצות

לעמידה ב-WCAG AA, טקסט רגיל דורש יחס ניגודיות מינימלי של 4.5:1, ואילו טקסט גדול (18pt או 14pt מודגש) דורש 3:1.

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

השתמש בתכונת התיקון האוטומטי שלנו כדי להתאים את צבע הטקסט או הרקע תוך שמירה על כוונת העיצוב שלך, או התאם את הצבעים ידנית באמצעות מחווני HSL עם אזורים שמראים את הטווחים המיטביים לעמידה ב-AA/AAA.

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

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