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

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

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

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

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

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

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

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

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

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

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

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

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

תצליחי,
חגית

את יכולה להתחיל לעבוד עם ג'ט אנג'ין כבר היום!

קורס ג’ט אנג’יין ליצירת שדות מותאמים אישית וליסטינג

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

צריך לעצב את הכפתור שרואה מי שלא מחוברת

כתיבת תגובה

כלים נוספים שיכולים לעזור לך

איך לרכוש אחסון אתרים ביופרס (חודש מתנה וקופון הנחה)

כלי ליצירת תרשימי זרימה והיררכיות לאפיון אתר

למצוא בקלות את חברת האחסון של כל אתר בעולם

כלי להוספת שקיפות לצבע הקסדצימאלי (צבע עם קוד המתחיל ב#)

כלי לכיווץ תמונות לצורך העלאה לאתר

אלופה בפתרונות

11 תשובות לשאלות
באפיון, עיצוב ובניית אתרים

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