ימים
שעות
דקות
שניות
הנחות בלאק פריידי על כל הקורסים באתר!

בדיקת ניגודיות של שני צבעים (שימושי לנגישות אתרים)

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

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

צבעים מנוגדים הם צבעים שההבדל החזותי ביניהם מאוד ברור.

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

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

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

איך בודקים ניגודיות של צבע?

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

השלבים לבדיקת ניגודיות צבעים לאתר:

  1. פתחי את הכלי לבדיקת ניגודיות צבעים: https://webaim.org/resources/contrastchecker/
  2. העתיקי את קוד הצבע של האובייקט שלך (טקסט, אייקון וכדומה) והדביקי במלבן השמאלי.
  3. העתיקי את קוד הצבע של הרקע, והדביקי במלבן הימני.
  4. בדקי את התוצאות: תוצאה של WCAG AA במצב PASS (מסומן בירוק) – היא תקינה
    תוצאה של WCAG AAA במצב PASS – היא מצויינת.
    (לצורך הנגשת אתרים יש להתייעץ עם איש מקצוע איזה רמת תוצאה נדרשת בבדיקה)
הוספת קודי צבע לבדיקת ניגודיות
תוצאה טובה של ניגודיות צבעים
תוצאה מצויינת של ניגודיות צבעים

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

דילוג לתוכן