مرور
پیوند واژگان نقشهای رنگ را از متریال دیزاین ۳ میگیرد: هر رنگِ پرکننده یک رنگِ روی خود دارد که با پیشوند on- نامیده میشود. یعنی وقتی primary را بهعنوان زمینه میگذارید، متن روی آن حتماً on-primary است و کنتراستش از پیش سنجیده شده.
دو نقش از خودِ پیوند به این واژگان اضافه شدهاند: brand و action. اینها دقیقاً همان دو رنگ برند مؤسسهاند و فقط بهعنوان سطحِ پر به کار میروند، هرگز بهعنوان رنگ متن.
قاعدهها
- هر پرکننده با
on-ی خودش میآید. اگر ترکیبی در جدول پایین نیست، ساخته نشده. brandوactionهرگز رنگ متن، خط یا آیکون نیستند.- کهربایی کمیاب است: در هر نما فقط یک اقدام اصلی میتواند
actionبگیرد. - کد فقط لایهی
pv.sysرا مصرف میکند؛ خواندن مستقیم پالتها ممنوع است. - صحنه میتواند رنگی باشد، کار باید آرام باشد: سطحهای پرِ برند فقط بالای صفحهها میآیند، نه زیر متن خواندنی.
توکنها
مقدارها از فایلهای توکن ساخته شدهاند؛ این جدول دستنویس نیست.
| توکن | روشن | تیره | توضیح |
|---|---|---|---|
--pv-sys-color-surface | #F3FBFF | #0E1418 | سطح |
--pv-sys-color-surface-container-low | #ECF5FA | #161C20 | ظرف کم |
--pv-sys-color-surface-container | #E6EFF4 | #1A2024 | ظرف |
--pv-sys-color-primary | #00658B | #77D1FF | اصلی |
--pv-sys-color-primary-container | #C0E8FF | #004C69 | ظرف اصلی |
--pv-sys-color-secondary | #7D5700 | #FDB933 | دوم |
--pv-sys-color-secondary-container | #FFDEA9 | #5F4100 | ظرف دوم |
--pv-sys-color-error | #B3261E | #FFB4A8 | خطا |
--pv-sys-color-error-container | #FFDAD4 | #930003 | ظرف خطا |
--pv-sys-color-outline | #687A84 | #81939E | خط |
--pv-sys-color-brand | #29AAE1 | #29AAE1 | برند |
--pv-sys-color-action | #FDB933 | #FDB933 | اقدام |
بکن / نکن
بکن
سطح brand با متن on-brand؛ کنتراست 6.48:1 قبول
چرا (برای همه): متن روی سطح برند باید سنجیده باشد، نه حدسی.
نکن
متن آبی برند روی سطح روشن؛ کنتراست 2.53:1 رد
چرا (برای همه): آبی برند روی سطح روشن برای متن رد میشود.
دسترسپذیری
هر جفت نقش و on-ی آن در زمان ساخت سنجیده میشود و اگر از حد WCAG 2.2 سطح AA پایینتر بیفتد، بیلد رد میشود. تنها استثنا عمدی است: brand روی سطح روشن، که دقیقاً به همین دلیل هرگز رنگ متن نیست.
رنگ هیچوقت تنها نشانه نیست: وضعیتها با شکل و واژه هم نشان داده میشوند، نه فقط با رنگ.
مرتبط
- پالتهای تونال — این نقشها از کجا میآیند.
- کنتراست — چطور میسنجیم.
- توکنها — سه لایه و قاعدهی مصرف.