שימוש ניגודיות צבע גבוהה עבור עיצוב נגיש יותר
שיעור גבוה של יציאה מדף הכניסה נגרם לעתים קרובות על ידי נגישות ויזואלית ירודה של אתר. כאשר גופנים הם קטנים מדי, או שהם בקושי קריא, כאשר יש יותר מדי distractions או לא מספיק שטח לבן, אנשים רבים פשוט לעזוב את האתר בלי מחשבה שנייה.
אחת הסיבות הנפוצות ביותר לנטישה מוקדמת היא הבחירה הנמוכה צבעים אשר להפחית את הקריאות של התוכן.
על פי הסטטיסטיקה של ארגון הבריאות העולמי, ישנם כ 285 מיליון אנשים לקויי ראייה ברחבי העולם, רבים מהם עיוורים בצבע מלא או חלקי. אנשים נכים חזותיים רואים צבעים בצורה שונה, כך הימנעות ניגודיות צבע נמוכה בדגמים שלנו הוא בלתי נמנע אם ברצוננו לספק ללקוחותינו אתר נגיש וידידותי למשתמש.
תקני אינטרנט עבור ניגודיות צבע
יחס ניגודיות צבעים מודד את ההבדל בין שני צבעים. ככל שהערך גבוה יותר, כך קל יותר להבדיל בין האובייקט (טקסט, תמונה, גרפיקה) בחזית מרקע.
צבעים יכולים בניגוד בדרכים רבות ושונות, כגון ב גוון, ערך ו רוויה. יחס ניגודיות הצבע מחושב על ידי נוסחה שמספקת W3C, ארגון התקנים הבינלאומי הראשי של World Wide Web.
זה יכול לקחת ערך בין 1: 1 (ללא ניגוד כלל, בחזית וברקע יש אותו צבע) 21: 1 (את הניגוד המרבי כי קיים רק בין שחור לבן).
ההנחיות האחרונות בנושא נגישות תוכן אינטרנט (WCAG) 2.0 של W3C מציעות מפתחי אינטרנט ויוצרי תוכן עם מדדים עבור המינימום (רמה AA) והערך המשופר (רמה AAA) של יחס ניגודיות צבעים מקובל.
רמה AA דורש לפחות 4.5: 1 יחס לטקסט רגיל, ו 3: 1 עבור טקסט גדול. זה הרבה יותר קל לקרוא טקסט גדול כמו כתוביות, ולכן זה צריך ניגודיות צבע נמוכה יותר.
אם אתה רוצה להגיע לרמה AAA המהווה את רמת משופרת, אתה צריך לעצב את ערכת הצבעים שלך עם טיפול גדול יותר, כפי שהוא דורש לפחות יחס ניגודיות 7: 1 לטקסט רגיל, ו 4.5: 1 עבור גדול. אם טקסט הוא חלק מלוגו או שם מותג, אין דרישה לניגוד צבע מינימלי ברמת WCAG.
אנחנו יכולים רק להתקשר לאתר חזותית נגיש אם יחס ניגודיות הצבע בין כל אובייקט קדמי לבין הרקע שלו מגיע לפחות רמה AA.
היתרונות של יחס ניגודיות צבע גבוהה
על ידי הבטחת הקריאות טוב יותר אתה לא רק לעסוק משתמשים לקויי ראייה, אלא גם אנשים שקראו את התוכן שלך במסכים קטנים כגון על טלפון חכם או smartwatch, בין תנאי תאורה גרועים, וכן הלאה צגים איכותיים יותר.
אנשים גם קוראים מהר יותר כאשר יש ניגודיות גבוהה יותר בין הטקסט לבין הרקע, כך שזה יהיה כנראה לקחת יותר זמן להם להשתעמם עם התוכן של האתר.
אם אתה חושש כי החלת יחס ניגודיות גבוה יותר תהיה השפעה שלילית על האסתטיקה של העיצוב שלך, אתה צריך לבדוק את פרויקט האינטרנט מרד המרד אשר מוכיח, עם דוגמאות בחיים האמיתיים, כי דבק גבוה יחס ניגודיות הכללים עדיין יכול לגרום בעיצובים אטרקטיביים וקרירים.
יישומים לבדיקת ניגודיות צבע
ישנם כלים רבים בחינם בחינם בכל רחבי האינטרנט שיכולים לעזור למעצבים לבדוק את יחס ניגודיות צבע של האתר שלהם.
הדרך הקלה ביותר לבדוק את העיצוב שלך עבור ניגודיות צבע היא לבחור את הצבעים העיקריים עם Photoshop או הרחבת דפדפן מתאים כמו זה עבור Firefox, ולהעתיק את הערכים לתוך אחד היישומים הבאים.
הדבר החשוב ביותר לזכור הוא שאתה תמיד צריך השווה את צבע הקידמה, כגון צבע טקסט לאזור שמסביב (צבע רקע).
1. WebAim צבע בודק ניגודיות
WebAim (Web Accessibility In Mind) הוא ארגון המקדם נגישות לאינטרנט שמציע למפתחים בודק ניגודיות צבעוני פשוט אך אמין, בין כלי נגישות רבים אחרים, כגון גל, הערכה כללית להערכת נגישות שיכולה לעזור לך להעריך במהירות את בעיות הנגישות של האתר שלך.
בודק ניגודיות הצבע של WebAim אומר לך אם הצבעים שלך לעבור את WAAG AA ו בדיקות AAA, הן עבור טקסטים נורמליים וגדולים.
2. סנוק צבע ניגודיות בדוק
ג'ונת'ן סנוק, שעובד כיום כמפתח מוביל בחזית Shopify, מארח את כלי הניקוד הצבעוני שלו, מזה למעלה מעשור. האפליקציה של סנוק מאפשרת לך לשנות את ערכי HSL ו- RGB של צבע הקדמי ואת הרקע בזה אחר זה באמצעות מחוונים טווח נוח עד שתגיע לתוצאה שתואמת את אמות המידה של WCAG 2.0.
CheckMyColours
CheckMyColours שנוצרו על ידי ג 'ובאני סקאלה מאפשר לך לבדוק את יחס ניגודיות הצבע של כל שילובי צבע רקע קדמי באתר אינטרנט חי.
זה מחשב יחס ניגודיות בהירות, הבדל בהירות, ו הבדל צבע, ומספק לך דו"ח מלא על התוצאות. הדו"ח של CheckMyColours יכול לשפר באופן משמעותי את ההבנה של האופן שבו תוכל לשפר את הנגישות החזותית של האתר שלך.
מעצב צבע ערכת
צבע Scheme מעצב לא במיוחד בודק בניגוד צבע, אבל כלי עיצוב ערכות צבעים מלאות.
אנו כוללים את זה באוסף זה, כי יש לו תכונה המאפשרת לך לראות איך את ערכת הצבעים נתפסת על ידי אנשים עם סוגים שונים של מוגבלות חזותית. אתה יכול לבדוק את הצבעים שלך עבור עיוורון צבע מלא, פרוטנוביה, deuteranopy, ליקויי ראייה רבים אחרים. האפליקציה כוללת גרסה חדשה יותר בשם Paletton שעושה אפילו סימולציה חזותית מתוחכמת יותר (אפשר גם לבדוק דברים כמו תצוגת LED מחורבנת או תצוגת CRT חלשה).
W3C גם מספק לך אינטרנט ענקית נגישות כלי הערכה רשימת שבו ניתן למצוא כלים רבים אחרים בניגוד צבע כגון זה שימושי נגישות צבע גלגל.
טיפים ליצירת אתרי אינטרנט נגיש
אם אתה רוצה ליצור אתר נגיש ויזואלית, זה תמיד רעיון טוב הימנעו משימוש בצבע בלבד כדי להעביר פונקציונליות או משמעות. סמלים שמשנים את צבעם על בסיס מצבם הנוכחי הם דוגמאות אופייניות לכך.
אם זה אפשרי, תמיד עיצוב רמזים חזותיים נוספים המסייעים לאנשים שרואים צבעים שונים בהבנת הפונקציונליות.
לעולם אל תשכח להקדיש תשומת לב נוספת לניגודיות הצבע של לחצנים, קישורים ותפריטים, כפי שהם אמצעי ניווט באתר שלך. אם משתמשים אינם יכולים לנווט בקלות באתר שלך, תאבד אותם במהירות. צבעים נגישים עבור לחצני קריאה לפעולה הם גם חיוני לשיעורי המרות טובים.
זהו תרגול עבודה טוב כדי לבדוק את יחס ניגודיות הצבע מוקדם ככל האפשר בתהליך העיצוב שכן יהיה קשה לשכנע את הלקוח לשנות את ערכת הצבעים של האתר בהמשך תהליך התכנון.
עכשיו קרא: גישה מעשית לבחירת תוכנית צבע האתר
