באג הנגישות הראשון ששלחתי אי פעם היה חותמת זמן אפור בהיר על כרטיס לבן. זה נראה אלגנטי בפיגמה, זה נראה בסדר על הצג המכויל שלי, וזה היה בלתי נראה לחלוטין ללקוח שקורא אימייל בטלפון שלו במכונית חונה. הוא היה 't לקוי ראייה. זה היה רק אור שמש. כרטיס התמיכה היחיד הזה לימד אותי משהו שהדגם העיצובי מעולם לא יכול היה: ניגודיות היא לא עניין של טעם, זה מאפיין מדיד, ואם אתה עושה ' לא מודד את זה אתה שולח ניחושים.
מאז בניתי את בודק ניגודיות צבע על Toolz.dev, כללי ניגודיות קוויים לתוך אסימוני העיצוב עבור WP Adminify, ומבוקר יותר רכיבי React ממה שאני רוצה לספור מדריך זה הוא הגרסה של אותה חוויה הלוואי שמישהו היה מוסר לי בהתחלה זה מסביר מה יחס הניגודיות בעצם הוא, איך המספר מחושב, מה ה WCAG משמעות הספים היא, וכיצד לתקן זוג צבעים כושל מבלי לזרוק את פלטת המותג שלך.
TL;DR: ניגודיות WCAG היא יחס מ-1:1 ל-21:1 בהתבסס על הבהירות היחסית של שני צבעים עבור גוף טקסט רגיל אתה צריך לפחות 4.5:1 כדי לעבור AA ו-7:1 כדי לעבור AAA. טקסט גדול (בערך 24px, או 18.66px מודגש) יורד ל-3:1 עבור AA ו-4.5:1 עבור AAA. ממשק משתמש שאינו טקסט אוהב אייקונים וגבולות קלט צריך 3:1. מדוד כל זוג טקסט על רקע, התייחס ל-AA כאל סרגל המעבר, ותן לכלי להציע צבע חולף כאשר אתה נופל.
למה ניגודיות הצבעים כל כך חשובה?
ניגודיות היא כשל הנגישות היחיד הנפוץ ביותר ברשת שנה אחר שנה, ביקורות אוטומטיות של מיליון דפי הבית המובילים מגלים שטקסט בעל ניגודיות נמוכה הוא הפרת ה-WCAG השכיחה ביותר בפער גדול. זה גם זה שמשפיע על הכי הרבה אנשים, כי זה לא נוגע רק למשתמשים שרשומים עיוורים. זה נוגע לכל מי שיש לו ראייה מופחתת מגיל, לכל מי שיש לו מצב שכיח כמו קטרקט, לכל מי שמשתמש בתצוגה זולה, לכל מי שנמצא בחדר מואר ולכל אחד מאיתנו כשהשמש פוגעת במסך.
יש גם זווית עסקית, ואני לא מתכוון להעמיד פנים אחרת חוק הנגישות מתייחס כעת ישירות ל-WCAG באזורים רבים, מה שאומר שממשק בלתי נגיש הוא חשיפה משפטית, לא רק בעיית נימוס. אבל הסיבה שאכפת לי, והסיבה שבניתי עבורו כלי ייעודי, היא פשוטה יותר טקסט שאנשים לא יכולים לקרוא הוא טקסט שנכשל בעבודה היחידה שלו ממשק מדהים שאף אחד לא יכול להשתמש בו הוא לא הישג עיצובי.
המלכודת היא שהעיניים שלנו הן קריינים לא אמינים אנחנו מסתגלים למסכים של עצמנו, אנחנו יודעים מה הטקסט אמור להגיד אז המוח שלנו ממלא אותו, ואנחנו מסתכלים על עיצובים בתנאים אידיאליים יחס הניגודיות מסיר את כל זה זה נותן לך מספר שלא אכפת לו מהצג שלך או מהציפיות שלך.
מהו בדיוק יחס ניגודיות?
יחס הניגודיות הוא השוואה של הבהירות היחסית של שני צבעים: החזית שלך (בדרך כלל טקסט) והרקע שלך בהירות יחסית היא מדד לכמות האור שצבע פולט או מחזיר, משוקלל לאופן שבו העין האנושית תופסת למעשה אדום, ירוק וכחול. ירוק תורם הכי הרבה לבהירות הנתפסת, כחול הכי פחות, וזו הסיבה שטקסט כחול טהור על שחור הרבה יותר קשה לקריאה מאשר ירוק טהור.
היחס עצמו מוגדר על ידי WCAG כ:
(L1 + 0.05) / (L2 + 0.05)
איפה L1 האם הבהירות היחסית של הצבע הבהיר יותר ו L2 הוא של האפל יותר. ה 0.05 מונחים מדגמים אור סביבתי המשתקף מהמסך, וזו הסיבה שהסקאלה אף פעם לא ממש מגיעה לאינסוף צבעים זהים מייצרים יחס של 1:1 בדיוק טקסט שחור טהור על לבן טהור נותן את המקסימום של 21:1. כל מה שחי אמיתי בין שני הקצוות הללו.
הדבר החשוב להפנים הוא שהיחס אינו ליניארי עם האופן שבו "different" שני צבעים נראים במובן הגוון. שני צבעים יכולים להיות שונים מאוד בגוון - נניח אדום רווי וירוק רווי - ועדיין יש להם כמעט אותה בהירות, מה שהופך אותם לסיוט לקריאה למרות שהם מתנגשים באלימות. ניגודיות עוסקת בהבדל בהירות, לא בהבדל צבע. זו בדיוק הסיבה שאתה לא יכול לגלגל את זה, ולמה בודק ניגודיות צבע ממיר את שני הצבעים לבהירות לפני ביצוע השוואה כלשהי.
איך בעצם מחושב המספר?
אם אתה רוצה להבין את הכלי במקום רק לסמוך עליו, הנה הצינור המלא, שעוקב בדיוק אחר הגדרות WCAG 2.2.
ראשית, כל ערוץ צבע מנורמל מהטווח של 0–255 ל-0–1. לאחר מכן כל ערוץ עובר ליניאריזציה כדי לבטל את עקומת הגמא sRGB. הנוסחה מיישמת קטע ליניארי קטן עבור ערכים כהים מאוד ועקומת הספק עבור השאר:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
לאחר מכן, שלושת הערוצים הליניאריים משולבים עם מקדמי הבהירות המשקפים את התפיסה האנושית:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
המשקולות האלה אינן שרירותיות. הם באים מהאופן שבו תאי החרוט 's מגיבים לאורכי גל שונים, והם הסיבה לכך שהירוק שולט. לבסוף, שני ערכי הבהירות מחוברים לנוסחת היחס שלמעלה, כשהקל יותר למעלה.
יש עדינות אחת שמכשילה אנשים, והיא שקיפות יחס ניגודיות הוא בעל משמעות רק בין שני צבעים אטומים, כי צבע שקוף למחצה' המראה האמיתי תלוי בכל מה שיושב מאחוריו. אם לצבע הטקסט שלך יש ערך אלפא, אינך יכול למדוד אותו ישירות. הגישה הנכונה, וזו שהכלי נוקט, היא להרכיב את החזית השקופה על הרקע תחילה באמצעות מיזוג מקור-אובר סטנדרטי, ולאחר מכן למדוד את היחס מול התוצאה המשוטחת. זה תואם למה שמשתמש באמת רואה ולא לצבע שהגדרת באופן נומינלי.
מהם ספי ה-WCAG שאני צריך לפגוע בהם?
WCAG מגדיר דרישות ניגודיות בשתי רמות התאמה ולשלושה סוגי תוכן רחבים הנה התמונה כולה במקום אחד.
| סוג תוכן | מינימום AA | מינימום AAA |
|---|---|---|
| טקסט רגיל (מתחת ל~24px) | 4.5:1 | 7:1 |
| טקסט גדול (~24px, או ~18.66px מודגש) | 3:1 | 4.5:1 |
| רכיבי ממשק משתמש וגרפיקה | 3:1 | 3:1 (ללא AAA נפרד) |
| לוגוטיפים וטקסט מקרי | פטור | פטור |
כמה הערות מיישום טבלה זו פעמים רבות. "Large text" מוגדר על ידי גודל מעובד, לא על ידי כמה חשוב מרגיש הטקסט. הסף הוא 18pt למשקל רגיל ו-14pt מודגש, שמתורגמים בערך ל-24px ו-18.66px. כל דבר ב-3:1 או מעל שמקבל את הפס הרגוע של 3:1 עבור AA, מכיוון שצורות אותיות גדולות יותר נשארות קריאות בניגוד נמוך יותר.
כלל רכיבי ממשק המשתמש הוא קריטריון הצלחה 1.4.11, והוא זה שהצוותים שוכחים לרוב. הוא אומר שהגבול החזותי של רכיב אינטראקטיבי - הגבול של קלט טקסט, קווי המתאר של כפתור, צורתו של אייקון המעביר משמעות - צריך 3:1 כנגד סביבתו. טופס מלא בטקסט תווית עובר AA עם גבולות קלט בלתי נראים עדיין נכשל, וראיתי בדיוק את זה בייצור יותר מפעם אחת.
לבסוף, טקסט דקורטיבי, בקרות מושבתות ולוגו פטורים. הפטור הזה צר. תווית כפתור אפורה היא בסדר; פסקה בעלת ניגודיות נמוכה שקראת לה "משנית" לא.
כיצד אוכל להשתמש בבודק ניגודיות הצבעים?
זרימת העבודה שאני משתמש בה מדי יום אורכת כעשר שניות לזוג. Open the בודק ניגודיות צבע והזן את צבע הטקסט שלך בשדה הראשון אתה יכול להדביק כל פורמט - hex בן שש ספרות כמו #4b5563, משושה בן שמונה ספרות עם אלפא, an rgb() או rgba() מחרוזת, א hsl() ערך, או מילת מפתח רגילה של CSS כמו navy. הכלי מנרמל את כל מה שאתה נותן לו, כך שתוכל לערבב פורמטים בחופשיות בין שני השדות.
הזן את צבע הרקע שלך בשדה השני ברגע ששניהם תקפים, היחס המדויק מופיע לצד מדגם חי של טקסט גדול, רגיל וכתוביות שניתנו על הרקע האמיתי שלך. התצוגה המקדימה הזו חשובה. המספר אומר לך אם הוא עובר, אבל לראות מילים אמיתיות על הצבע האמיתי אומר לך אם הוא נוח, וזה פס גבוה יותר מאשר חוקי בלבד.
מתחת ליחס אתה מקבל רשת של תגי מעבר ונכשל: AA ו-AAA עבור טקסט רגיל וגדול כאחד, בתוספת בדיקת רכיב ממשק המשתמש של 3:1. אם שילוב נכשל, הכלי מציע תיקון בלחיצה אחת. הוא הולך על צבע הטקסט שלך בהיר או כהה יותר בחלל HSL - שומר על הגוון והרוויה שבחרת - עד שהוא מנקה את יחס היעד, ואז מוסר לך ערך עובר שתוכל להעתיק ישר לגיליון הסגנונות שלך. החלק האחרון הוא ההבדל בין בודק שנוזף בך לבין כזה שעוזר למעשה: הוא שומר על גוון המותג שלך ללא פגע ומזיז את הקלילות רק במינימום הדרוש.
הכל פועל באופן מקומי בדפדפן שלך אין צבעים, פלטות, או ערכי מותג שלא פורסמו לעזוב את המכשיר שלך, מה שחשוב כאשר אתה מבקר לקוח's מערכת עיצוב טרום השקה.זה אותו גישה פרטיות-ראשון אני משתמש בכל כלי באתר, וכתבתי על למה כי ארכיטקטורה משנה ב מדריך פרטיות נתונים.
מקרי שימוש נפוצים מפרויקטים אמיתיים
ביקורת מערכת עיצוב's אסימונים
כשאני מגדיר אסימוני צבע לפרויקט חדש, אני בודק כל זיווג סמנטי לפני שרכיב בודד נשלח: טקסט ראשי על רקע, טקסט מושתק על רקע, טקסט על ראשי, טקסט על כרטיס, טקסט על כל וריאנט התראה אסימון שנכשל פעם אחת נכשל בכל מקום שבו הוא משמש, כך שתפיסתו ברמת האסימון זולה מאוד מתפיסתו לכל רכיב. אני שומר רשימת בדיקה פשוטה ומריץ כל זוג דרך הבודק, רושם את היחס ליד שם האסימון.
הצלת צבע מותג ש-"has to" לשמש
שיווק מושיט לך כחול מותג ואומר הכפתורים חייבים להשתמש בו אתה בודק טקסט לבן על זה ולקבל 3.1:1 - בסדר עבור טקסט גדול, נכשל עבור תווית כפתור בגודל רגיל יש לך שלוש אפשרויות כנות: להכהות את המותג כחול מעט עבור משטחים אינטראקטיביים, להשתמש תווית גדולה יותר או נועזת יותר כך סף 3:1 חל, או להחליף את התווית צבע כהה יותר אם הכפתור בהיר הכלי & #39;s הצעה תכונה מוצא את הגוון העובר הקרוב ביותר כך שתוכל להראות שיווק בטון, שינוי מינימלי ולא שטוח "no."
בדיקת טקסט מציין מיקום ועוזר
טקסט מציין מיקום הוא עבריין חוזר מכיוון שדפדפנים מציגים אותו באטימות מופחתת כברירת מחדל, ומעצבים בוחרים אפור בהיר כבר נוסף על כך. זכור לבדוק את התוצאה המרוכבת, לא את הצבע הנומינלי. הבודק ' קומפוזיציה אלפא עושה זאת עבורך: הזן את צבע מציין המיקום עם האטימות האמיתית שלו על רקע הקלט וקרא את היחס האמיתי.
אימות סמל ונראות גבול
לבדיקת ממשק המשתמש 1.4.11, אני בודק את הסמל או צבע הגבול מול כל מה שיושב מיד מאחוריו. מחלק אפור בכרטיס לבן, שברון בכותרת צבעונית, טבעת המיקוד מול השדה - כל אלה צריכים 3:1. זוהי בדיקה מהירה שתופסת את " הכל שם מבחינה טכנית אבל אני יכול ' לא רואה שום דבר מזה" סוג של באג.
איך זה בהשוואה לשימוש בכלי עיצוב 's צ'ק מובנה?
כלי עיצוב הוסיפו מחווני ניגודיות, וכלי פיתוח דפדפן מראים יחס בבורר הצבעים, כך ששאלה הוגנת היא למה להגיע לכלי ייעודי בכלל. הנה ההשוואה הכנה שלי.
| גישה | כוח | הגבלה |
|---|---|---|
| בודק ניגודיות ייעודי | יחס מדויק, כל הספים, קומפוזיציה אלפא, הצעות צבע עובר, עובד על כל מחרוזת צבע | אתה מדביק צבעים באופן ידני |
| תוסף כלי עיצוב | בשורה אחת עם לוח האמנות שלך | לעתים קרובות מתקרב, עלול להתעלם מאלפא, הקשור לאפליקציה זו |
| כלי פיתוח דפדפן | בודק את הדף המעובד בשידור חי | זוג אחד בכל פעם, ללא הצעות, דורש שהדף יהיה קיים קודם |
| Eyeballing זה | מהיר | לא נכון, כל הזמן |
הכלי הייעודי מנצח בכל פעם שאתה עובד מתוך ערכים ולא מדף מעובד - סקירת אסימונים, בדיקת מפרט או תיקון באג מדווח - ובכל פעם שאתה צריך חלופה חולפת ולא רק פסק דין. כלי הפיתוח של הדפדפן טובים יותר ברגע שהדף קיים ואתה רוצה לבדוק נקודתית מה נשלח בפועל. אני משתמש בשניהם, בשלבים שונים.
הערות מתקדמות לצוותים שאכפת להם
כמה דברים שלמדתי שהם מעבר ליסודות ראשית, ניגודיות היא הכרחית אך לא מספקת מעבר 4.5:1 מסיר מחסום אחד; הוא לא הופך ממשק לנגיש בפני עצמו אתה עדיין צריך מצבי מיקוד גלויים, אתה עדיין חייב להימנע מהעברת משמעות באמצעות צבע בלבד, ואתה עדיין צריך בדיקה אמיתית עם טכנולוגיה מסייעת אמיתית התייחס ליחס כאל רצפה, לא כקו סיום.
שנית, מצב כהה אינו חופשי פלטה שעוברת במצב אור עלולה להיכשל במצב כהה מכיוון שיחסי הבהירות מתהפכים בדוק את שני הנושאים. החלפת התצוגה המקדימה של checker's ברקע כהה קיימת בדיוק בגלל שכל הזמן שכחתי לעשות זאת.
שלישית, היזהר מ-" קרוב מספיק." יחס של 4.48:1 הוא כישלון, לא ניצחון עיגול. המסכים משתנים, המשתמשים משתנים, ולסף יש מרווח מובנה מסיבה כלשהי. אם אתה גבולי, דחוף על פניו.
אם אתה מרכיב ערכת כלים רחבה יותר, ה מדריך ערכת כלים למפתחי אינטרנט מכסה כיצד ניגודיות מתאימה לצד הבדיקות האחרות ששווה לבצע אוטומציה וברגע שהצבעים שלך עוברים, כלים כמו ה מחולל שיפוע ו בוחר צבעים עזור לך לבנות את שאר הפלטה על בסיס שכבר אימתת. אם אתה גם מייצר מטא נתונים של דפים ותצוגות מקדימות חברתיות, ה מחולל מטא תגים זוגות היטב באותו מעבר טרום שיגור.
שָׁוא
מהו יחס ניגודיות צבע טוב?
עבור גוף טקסט רגיל, שאפו לפחות 4.5:1 כדי לעמוד ב-WCAG AA ו-7:1 כדי לעמוד ברמת AAA המחמירה יותר. טקסט גדול, כלומר בערך 24px או 18.66px מודגש, צריך רק 3:1 עבור AA ו-4.5:1 עבור AAA. סמלים ורכיבי ממשק משתמש אינטראקטיביים צריכים לפחות 3:1 כנגד הסביבה שלהם.
מה נחשב כטקסט גדול תחת WCAG?
טקסט גדול הוא לפחות 18pt, בערך 24px, עבור משקל רגיל, או לפחות 14pt, בערך 18.66px, כאשר מודגש. טקסט בגודל זה או מעליו מתאים לסף ה-3:1 AA הרגוע מכיוון שצורות אותיות גדולות יותר נשארות קריאות בניגוד נמוך יותר מאשר קטנות.
מה ההבדל בין WCAG AA ל-AAA?
AA היא הרמה שרוב החוקים והארגונים מכוונים אליה ודורשת 4.5:1 עבור טקסט רגיל. AAA היא הרמה המשופרת ודורשת 7:1, מה שמתאים לתוכן המכוון למשתמשים עם ראייה לקויה אך קשה לפגוע בו על פני פלטה שלמה. רוב הצוותים מתייחסים ל-AA כאל פס המעבר ול-AAA כשאיפה לתוכן קריאה ביקורתי.
כיצד מחושב יחס הניגודיות?
כל צבע מומר לבהירות היחסית שלו ב-WCAG, מדד בהירות מתוקן גמא ומשוקלל תפיסתית. היחס הוא (L_lighter + 0.05) חלקי (L_darker + 0.05), ומייצר ערך מ-1:1 עבור צבעים זהים ל-21:1 עבור שחור טהור על לבן טהור.
האם השקיפות משפיעה על תוצאת הניגוד?
כן. צבע טקסט שקוף למחצה מאפשר לרקע להופיע, מה שמשנה את צבעו האפקטיבי. השיטה הנכונה היא לחבר תחילה את החזית השקופה על הרקע, ואז למדוד את היחס, כך שהציון משקף את מה שמשתמש באמת רואה ולא את הצבע הנומינלי שהגדרת.
למה הטקסט שלי עובר בגודל גדול אבל נכשל בגודל רגיל?
הספים שונים טקסט רגיל צריך 4.5:1 עבור AA בעוד טקסט גדול צריך רק 3:1, כך שיחס בין 3 ל-4.5 עובר עבור כותרות אך נכשל עבור עותק גוף או להעלות את הניגודיות עבור גוף טקסט או לוודא כי זיווג משמש רק בגדלים גדולים שבהם חל הסף הרגוע.
האם מספיק יחס ניגודיות עובר לנגישות?
מס 'ניגודיות היא הכרחית אבל לא מספיק אתה גם צריך מצבי מיקוד גלוי, עליך להימנע העברת משמעות על ידי צבע בלבד, ואתה צריך לבדוק עם תוכן אמיתי וטכנולוגיה מסייעת עובר את היחס מסיר מחסום אחד משותף אבל לא כשלעצמו להפוך ממשק נגיש.
האם בודק ניגודיות הצבעים שולח את הצבעים שלי לכל מקום?
מס 'כל הניתוח והמתמטיקה לרוץ באופן מקומי בדפדפן שלך באמצעות JavaScript. אין ערכי צבע, פלטות מותג, או צילומי מסך מועלים או מאוחסנים, והכלי ממשיך לעבוד ללא חיבור לרשת לאחר הדף נטען.
