מהו בודק ניגודיות הצבע?
בודק ניגודיות הצבע מודד את יחס הניגודיות בין צבע חזית (טקסט) לצבע רקע ואומר לך אם הזוג הזה עומד בהנחיות הנגישות לתוכן אינטרנט. הוא מדווח על מספר בודד בין 1:1 ל-21:1 ומדרג אותו מול ספי WCAG 2.2 עבור AAA ו-AAA בגדלים רגילים וגדולים של טקסט, בתוספת סף 3:1 נפרד לרכיבי ממשק משתמש וגרפיקה.
ניגודיות היא ההבדל בבהירות היחסית בין שני צבעים, לא רק כמה הם נראים שונים. שני צבעים יכולים להרגיש ברורים תוך כדי כישלון עבור קוראים עם ראייה לקויה, חוסר ראייה צבעונית או כל מי שמשתמש בטלפון באור שמש בהיר. היחס מחושב עם נוסחת הבהירות היחסית המדויקת של sRGB שהוגדרה על ידי WCAG, כך שהתוצאה תואמת את מה שחווים כלי ביקורת ומשתמשי קורא מסך במקום ניחוש חזותי גס.
הכל פועל בדפדפן שלך. הקלד או הדבק צבעים כ-hex, rgb, hsl או מילת מפתח CSS, צפה בעדכון תצוגה מקדימה של טקסט חי, ואם זוג נכשל אתה יכול להחיל צבע מוצע שעובר. שום דבר לא מועלה, אין הרשמה, והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
נוסחת הניגודיות של WCAG 2 היא יחס של בהירות יחסית, והסף שלה הם מה שנמדדות ביקורת נגישות ורוב הדרישות החוקיות, אז זה המספר הנכון לעצב אליו. ידוע גם שהוא לא מושלם: הוא יכול להיות נדיב לטקסט בהיר על רקע כהה וקשה בכמה זוגות גוונים בינוניים, וזו הסיבה שהאלגוריתם היורש, APCA, קיים ונבדק עבור גרסאות עתידיות. לטקסט גדול יש פס תחתון, ואמצעים גדולים 18pt, או 14pt כשהם מודגשים, שזה בסביבות 24px ו-18.66px. אלמנטים שאינם טקסט מכוסים בנפרד ב-1.4.11 ב-3:1, וזה הכלל שהכי הרבה פעמים מתגעגע: כפתורי אייקונים, גבולות קלט וטבעות מיקוד כולם צריכים את זה, ועיצוב יכול להעביר כל פסקה ועדיין להיכשל בשדות הצורה שלה.
כיצד להשתמש בבודק ניגודיות הצבע?
הזן את צבע הטקסט שלך
הקלד או הדבק את צבע החזית בכל פורמט נפוץ - #1a1a1a, rgb (26,26,26), hsl (0,0%,10%), או מילת מפתח כמו navy. דוגמית צבע ובוחר מקורי מאפשרים לך לכוונן אותו.
הזן את צבע הרקע שלך
הגדר את הרקע שהטקסט יושב עליו. אם לצבע הטקסט שלך יש שקיפות, הוא משולב על רקע זה לפני שמודדים את היחס, תואם למה שהמשתמשים רואים בפועל.
קרא את היחס והציונים
יחס הניגודיות המדויק מופיע עם תגי מעבר או נכשל עבור AA ו-AAA בגדלים רגילים וגדולים, בתוספת בדיקת רכיבי ממשק משתמש 3:1, הכל לצד מדגם חי של טקסט על הרקע שלך.
תקן כשלים באופן מיידי
אם שילוב נכשל, החל את הצבע הנגיש המוצע - הכלי דוחף את הטקסט בהיר יותר או כהה יותר עד שהוא מנקה את רמת היעד שלך, אז אתה יכול להעתיק את הערך הקבוע.
תכונות מפתח
יחס WCAG מדויק
משתמש בנוסחאות הרשמיות של sRGB-right-luminance ויחס ניגודיות מ-WCAG 2.2, כך שהמספר מתאים לביקורות רשמיות עד לשני מקומות עשרוניים במקום לקירוב
דירוג AAA, AAA ו-UI
כל תוצאה מדורגת מול Aa (4.5:1), AAA (7:1), ספי הטקסט הגדול (3:1 ו-4.5:1), וכלל 3:1 עבור רכיבי ממשק משתמש שאינם טקסט ואובייקטים גרפיים
תצוגה מקדימה של טקסט חי
דוגמה אמיתית של טקסט רגיל וגדול מוצג על הרקע שבחרת תוך כדי הקלדה, כך שתוכל לשפוט קריאות לצד הניקוד המספרי
הצעות צבע נגישות
כאשר זוג נכשל, הכלי הולך בצבע הטקסט בהיר או כהה יותר ב-HSL עד שהוא עומד ביחס היעד שלך ומציע ערך עובר שאתה יכול ליישם בלחיצה אחת
Frequently Asked Questions
Related Tools
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!