ממיר צבע לעבודת ממשק משתמש אמיתית

המירו ערכי צבע, בדקו ניגודיות וחקורו פלטות קשורות לפני ש-design token נכנס לאתר פעיל.

לחצו כדי לבחור צבע
4.70vs Black
4.46vs White
בדיקת ניגודיות WCAG
יחס ניגודיות של 4.5:1 הוא קו הבסיס הרגיל של WCAG עבור טקסט גוף רגיל. לטקסט גדול יש סף נמוך יותר, אבל ניגודיות חלשה עדיין פוגעת במשתמשים אמיתיים.
HEX
RGB
HSL
CMYK

הצעות ליחסי צבע

משלים
#6366f1
#f1ef63
אנלוגי
#63acf1
#6365f1
#a863f1
גוונים
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

מדריך לפורמט צבע

HEX

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

RGB

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

HSL

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

CMYK

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

Contrast

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

שאלות נפוצות

מדוע המרות RGB ו-CMYK נסחפות מעט?

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

מה המשמעות של ציון הניגודיות של WCAG?

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

האם יש להשתמש בצבעי מותג עבור טקסט גוף?

לא בהכרח. צבע מותג שעובד היטב בלוגו או בהדגשות עלול להיכשל כטקסט גוף. השתמשו בנייטרלים חזקים יותר או בגוונים מותאמים כאשר הקריאות חשובה.

מדוע הצבעים נראים שונה בין הכלים?

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