پالتی که میتوانید بازرسی، ارسال و دوباره استفاده کنید
رنگهای هگز مات نامگذاریشده را به متغیرهای سفارشی CSS مصون از تصادم و JSON ساختاریافته تبدیل کنید، با درخشندگی نسبی WCAG و متن سیاه یا سفید قویتری که برای هر نمونهٔ رنگ اندازهگیری میشود.
متغیرهای سفارشی CSS
برای هر توکن یک متغیر رنگ و یک متغیر رنگ متن پیشنهادی، درون یک بلوک :root.
JSON ساختاریافتهٔ پالت
نامها، مقادیر متعارف هگز و RGB، درخشندگی نسبی، متن پیشنهادی سیاه یا سفید و نسبت کنتراست آن.
هر رنگ پالت
| ink | #1f2937 | 31, 41, 55 | ۰٫۰۲ | #ffffff | ۱۴٫۶۸ |
| paper | #f8fafc | 248, 250, 252 | ۰٫۹۵ | #000000 | ۲۰٫۰۷ |
| accent | #ea980e | 234, 152, 14 | ۰٫۴ | #000000 | ۹ |
| success | #16803a | 22, 128, 58 | ۰٫۱۶ | #ffffff | ۵٫۰۲ |
نتیجهها بدون تضمین درستی ارائه میشوند. روش و منابع در پایین صفحه منتشر شدهاند تا بتوانید محاسبه را بررسی کنید.
چگونگی کار
درخشندگی نسبی همان روشنایی میانگین نیست
برای هر کانال، دو رقم هگز به عددی از ۰ تا ۲۵۵ تبدیل، بر ۲۵۵ تقسیم و سپس خطی میشود:
linear(c) = c / 12.92 when c <= 0.04045
linear(c) = ((c + 0.055) / 1.055) ^ 2.4 otherwise
L = 0.2126 R + 0.7152 G + 0.0722 B
سهم سبز در درخشندگی نسبی بیشتر از آبی است، و خطیسازی به این معناست که نمیتوان دو مقدار کدگذاریشدهٔ کانال را پیش از محاسبه میانگین گرفت. نسبت کنتراست برای دو درخشندگی (lighter + 0.05) / (darker + 0.05) است.
این ابزار آن نسبت را یک بار با سیاه در درخشندگی ۰ و یک بار با سفید در درخشندگی ۱ محاسبه میکند. هر کدام بزرگتر باشد، توکن متن پیشنهادی میشود.
پالت پیشفرض
| توکن | هگز | بهترین متن | نسبت کنتراست |
|---|---|---|---|
| ink | #1f2937 | سفید | ۱۴٫۶۷۹۱ |
| paper | #f8fafc | سیاه | ۲۰٫۰۷۱۲ |
| accent | #ea980e | سیاه | ۸٫۹۹۶۱ |
| success | #16803a | سفید | ۵٫۰۲۰۵ |
خروجیهای اصلی عبارتاند از ۴ رنگ، ۲ رنگ با متن روشن، ۰ توکن تغییرنامیافته و کمترین نسبت بهترین متن ۵٫۰۲ پس از گرد کردن برای نمایش. این کمینه متعلق به success است؛ میانگینی روی کل پالت نیست.
فایلها چه چیزی در بر دارند
دانلود CSS جفتسازی را نزدیک به خود رنگ نگه میدارد:
:root {
--brand-ink: #1f2937;
--brand-ink-text: #ffffff;
}
دانلود JSON هگز متعارف، کانالهای RGB بهصورت عدد صحیح، درخشندگی نسبی، متن پیشنهادی و نسبت کنتراستِ گردنشده برای نمایش را در بر دارد. هگز سهرقمی مانند #abc در هر دو فایل به #aabbcc تبدیل میشود، بنابراین مصرفکنندههای پاییندستی مجبور نیستند از دو املا پشتیبانی کنند.
نامهای متغیرهای سفارشی CSS به بزرگی و کوچکی حروف حساساند. نرمال کردن همهٔ نامهای واردشده به یک قرارداد kebab-case در ASCII جلوی این را میگیرد که --brand-Ink و --brand-ink یک توکن بهنظر برسند در حالی که بهعنوان دو ویژگی متفاوت رفتار میکنند.
آنچه نتیجه گواهی نمیکند
هدف متن معمولی WCAG ویژگیِ پیشزمینه و پسزمینهٔ واقعی، آنگونه که رندر میشوند، است. یک فایل توکن نمیتواند بداند متن بزرگ، پررنگ یا غیرفعال خواهد بود، روی یک گرادیان قرار میگیرد، با شفافیت (opacity) ترکیب میشود یا در حالت hover تغییر میکند. همچنین نمیتواند جایگزین نمایان بودن فوکوس یا نشانههای وضعیتِ غیررنگی شود.
متغیر جفتشده را یک پیشفرض قوی و اندازهگیریشده بدانید، سپس کامپوننت واقعی را آزمایش کنید. از مبدل PNG به JPEG فقط برای کار با قالب فایل استفاده کنید؛ تغییر قالب (container) تصویر، متن جاسازیشده در آن را دسترسپذیر نمیکند.
مراحل انجام کار
- در هر خط غیرخالی یک نام بهعلاوهٔ یک رنگ هگز مات سه یا ششرقمی را تجزیه کنید و شکل کوتاه را به RGB ششرقمی متعارف با حروف کوچک بسط دهید.
- نامها و پیشوند را به kebab-case با حروف کوچک ASCII نرمال کنید و بهجای بازنویسی توکنهای تکراری، پسوندهای -۲، -۳ و بعدی را اضافه کنید.
- هر کانال sRGB کدگذاریشده را خطی کنید، درخشندگی نسبی را با وزنهای WCAG ترکیب کنید و کنتراست حاصل را با سیاه و سفید مقایسه کنید.
- برای هر توکن یک متغیر سفارشی رنگ و یک متغیر متن پیشنهادی در CSS خروجی بگیرید و همان مقادیر، کانالها، درخشندگی و نسبت را بهصورت JSON ساختاریافته.
فرضها
- هر رنگ واردشده مات است. رنگهای دارای آلفا رد میشوند، زیرا کنتراست نمایشدادهشدهٔ آنها به سطحی ناگفته در زیرشان بستگی دارد.
- انتخاب متن گزارششده فقط #000000 و #ffffff را مقایسه میکند؛ هر رنگ پیشزمینهٔ ممکن را جستوجو نمیکند.
- نسبت اندازهگیریشدهٔ بالاتر بهخودیخود یک کامپوننت کامل را دسترسپذیر نمیکند؛ اندازهٔ قلم، وزن، حالتها، فوکوس، نشانههای غیرمتنی و رنگهای واقعاً رندرشده همچنان مهماند.
- مقادیر هگز بهعنوان sRGB تفسیر میشوند و هیچ نمایهٔ ICC یا فضای رنگی پهندامنهای به توکنهای خروجی پیوست نمیشود.
پرسشهای رایج
آیا سیاه یا سفید همیشه رنگ متن بهتری است؟
یکی از آن دو همیشه نسبت بالاتری در برابر یک رنگ مات دارد و ابزار همان برندهٔ اندازهگیریشده را گزارش میکند. «بهتر» در اینجا فقط به معنای کنتراست است؛ محدودیتهای برند و بقیهٔ کامپوننت همچنان نیاز به بررسی دارند.
چرا اعداد قرمز، سبز و آبی را میانگین نمیگیریم؟
کانالهای هگز مقادیر sRGB با کدگذاری گاما هستند، نه مقدار نور متناسب. WCAG ابتدا هر کانال را به یک مقدار خطی تبدیل میکند و سپس وزنهای متفاوتی به قرمز، سبز و آبی میدهد.
وقتی دو نام به یک توکن CSS یکسان تبدیل میشوند چه میشود؟
اولی نام پایه را نگه میدارد و موارد بعدی -۲، -۳ و غیره میگیرند. هیچ اعلانی بیسروصدا جایگزین نمیشود و جدول همهٔ توکنهای نهایی را پیش از دانلود نشان میدهد.
چرا رنگهای هگز هشترقمی رد میشوند؟
کانال آلفای آنها پیش از آنکه کنتراستی وجود داشته باشد با پسزمینه ترکیب میشود. یک نسبت قابل اعتماد به آن پسزمینه بهعنوان ورودی صریح دیگری نیاز دارد، بنابراین این ابزار فقط مقادیر مات #RGB و #RRGGBB را میپذیرد.