כלי צבע

בודק ניגודיות צבעים: יחס WCAG AA ו-AAA – חינם

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

טקסט גדול נראה כך

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

טקסט קטן: כיתוב של 14px.

כפתור
יחס ניגודיות13.08:1
  • טקסט רגיל, AA: עוברטקסט גוף, לפחות 4.5:1
  • טקסט רגיל, AAA: עוברמשופר, לפחות 7:1
  • טקסט גדול, AA: עובר18pt ומעלה, או 14pt ומעלה מודגש, לפחות 3:1
  • טקסט גדול, AAA: עוברמשופר, לפחות 4.5:1
  • אייקונים ובקרות, AA: עוברכפתורים, מסגרות, קווי גרפים: 3:1

משתמש בנוסחת הניגודיות של WCAG 2. היחסים לעולם לא מעוגלים כלפי מעלה, ולכן 4.49:1 לא נחשב כ-4.5:1. הבדיקה נעשית במכשיר שלך.

למה כדאי להשתמש ב-בודק ניגודיות צבעים

100% חינם
השתמשו בו כמה שתרצו. בלי הרשמה, בלי סימן מים, בלי צורך בהתקנה.
פרטיות מובנית
מה שאתם מקלידים נשאר בדפדפן שלכם ולעולם לא נשלח אלינו.
עובד בכל מכשיר
פועל בדפדפן ב-Windows, ב-Mac, ב-Linux, באנדרואיד ובאייפון. בלי צורך באפליקציה.

איך משתמשים ב-בודק ניגודיות צבעים

  1. הזינו את «צבע הטקסט» ואת «הרקע» כ-HEX, rgb(), hsl() או שם כמו navy, או בחרו אותם בדוגמיות. השתמשו ב«החלפה» כדי להפוך אותם.
  2. קראו את יחס הניגודיות ואת חמש התוצאות: טקסט רגיל AA ו-AAA, טקסט גדול AA ו-AAA, ואייקונים ופקדים.
  3. בדקו את התצוגה המקדימה כדי לראות כותרות, טקסט גוף, טקסט קטן וכפתור בצבעים שלכם.
  4. אם רמה נכשלת, לחצו על אחד מ«הצבעים הקרובים שעוברים». הוא שומר על הגוון שלכם ומשנה רק את מידת הבהירות או הכהות של הטקסט.

שאלות נפוצות

איזה יחס ניגודיות צריך?

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

מה נחשב טקסט גדול?

לפחות 18 נקודות (24px) רגיל, או 14 נקודות (בערך 18.7px) מודגש.

איך מחשבים את יחס הניגודיות?

לפי נוסחת WCAG 2: מחשבים את הבהירות היחסית של כל צבע, ואז מחלקים את הבהיר יותר בתוספת 0.05 בכהה יותר בתוספת 0.05. התוצאה נעה מ-1:1 (בלי ניגודיות) עד 21:1 (שחור על לבן).

למה 4.49:1 נכשל?

לפי WCAG אסור לעגל יחסים כלפי מעלה, ולכן כל מה שמתחת ל-4.5:1 לא עומד ב-AA לטקסט רגיל. הכלי הזה אף פעם לא מעגל יחס כלפי מעלה.

איך מתקנים צבע שנכשל?

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

האם הכלי מטפל בצבעי טקסט שקופים?

כן. צבע טקסט שקוף, כמו rgba(26, 20, 70, 0.6), מעורבב עם הרקע לפני שהניגודיות נמדדת. שקיפות של הרקע אינה נלקחת בחשבון, והוא נחשב לאטום.

גם כפתורים ואייקונים צריכים ניגודיות?

כן. WCAG 2.1 דורש יחס של 3:1 בין חלקי הממשק (מסגרות כפתורים, שדות טופס, אייקונים, קווים בגרפים) לבין הצבעים שלידם. התוצאה «אייקונים ופקדים» בודקת את זה.

אם עומדים בבדיקה, האם האתר נגיש?

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

האם בודק ניגודיות צבעים חינמי?

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

עזרה ומדריכים (באנגלית)

כלים קשורים