انتخاب متن سیاه یا سفید برای رنگهای هگز
انتخاب به درخشندگی نسبی بستگی دارد، نه به اینکه یک مقدار هگز بهنظر روشن برسد. در پالت نمونه، رنگ تأکیدی نارنجی با سیاه جفت قویتری میسازد، در حالی که سرمهای تیره با سفید جفت قویتری دارد؛ جدول بهجای اعمال یک آستانه بر همهٔ نمونهها، نسبت برنده را برای هر کدام گزارش میکند.
متغیرهای سفارشی CSS
برای هر توکن یک متغیر رنگ و یک متغیر رنگ متن پیشنهادی، درون یک بلوک :root.
JSON ساختاریافتهٔ پالت
نامها، مقادیر متعارف هگز و RGB، درخشندگی نسبی، متن پیشنهادی سیاه یا سفید و نسبت کنتراست آن.
هر رنگ پالت
| navy | #1f2937 | 31, 41, 55 | ۰٫۰۲ | #ffffff | ۱۴٫۶۸ |
| orange | #ea980e | 234, 152, 14 | ۰٫۴ | #000000 | ۹ |
| cloud | #f8fafc | 248, 250, 252 | ۰٫۹۵ | #000000 | ۲۰٫۰۷ |
| forest | #16803a | 22, 128, 58 | ۰٫۱۶ | #ffffff | ۵٫۰۲ |
نتیجهها بدون تضمین درستی ارائه میشوند. روش و منابع در پایین صفحه منتشر شدهاند تا بتوانید محاسبه را بررسی کنید.
کانالهای sRGB پیش از جمع شدن درخشندگی وزندارشان خطی میشوند، بنابراین میانگینگیری از مقادیر کدگذاریشدهٔ قرمز، سبز و آبی نتیجهٔ اشتباهی میدهد.
کنتراست برابر است با درخشندگی روشنتر بهعلاوهٔ ۰٫۰۵، تقسیم بر درخشندگی تیرهتر بهعلاوهٔ ۰٫۰۵.
CSS خروجی هر نمونهٔ رنگ را با توکن متن سیاه یا سفیدی که جداگانه برایش اندازهگیری شده جفت میکند.
چگونگی کار
مراحل انجام کار
- در هر خط غیرخالی یک نام بهعلاوهٔ یک رنگ هگز مات سه یا ششرقمی را تجزیه کنید و شکل کوتاه را به RGB ششرقمی متعارف با حروف کوچک بسط دهید.
- نامها و پیشوند را به kebab-case با حروف کوچک ASCII نرمال کنید و بهجای بازنویسی توکنهای تکراری، پسوندهای -۲، -۳ و بعدی را اضافه کنید.
- هر کانال sRGB کدگذاریشده را خطی کنید، درخشندگی نسبی را با وزنهای WCAG ترکیب کنید و کنتراست حاصل را با سیاه و سفید مقایسه کنید.
- برای هر توکن یک متغیر سفارشی رنگ و یک متغیر متن پیشنهادی در CSS خروجی بگیرید و همان مقادیر، کانالها، درخشندگی و نسبت را بهصورت JSON ساختاریافته.
فرضها
- هر رنگ واردشده مات است. رنگهای دارای آلفا رد میشوند، زیرا کنتراست نمایشدادهشدهٔ آنها به سطحی ناگفته در زیرشان بستگی دارد.
- انتخاب متن گزارششده فقط #000000 و #ffffff را مقایسه میکند؛ هر رنگ پیشزمینهٔ ممکن را جستوجو نمیکند.
- نسبت اندازهگیریشدهٔ بالاتر بهخودیخود یک کامپوننت کامل را دسترسپذیر نمیکند؛ اندازهٔ قلم، وزن، حالتها، فوکوس، نشانههای غیرمتنی و رنگهای واقعاً رندرشده همچنان مهماند.
- مقادیر هگز بهعنوان sRGB تفسیر میشوند و هیچ نمایهٔ ICC یا فضای رنگی پهندامنهای به توکنهای خروجی پیوست نمیشود.
پرسشهای رایج
آیا بالاترِ سیاه یا سفید همیشه به کنتراست متن معمولی میرسد؟
برای یک رنگ sRGB مات، یکی از این دو سرِ طیف نسبتی کمی بالاتر از ۴٫۵ یا بهتر میسازد، اما عوامل دسترسپذیری دیگری مانند وزن قلم و نشانههای حالت همچنان مهماند.
چرا رنگهای هگز شفاف رد میشوند؟
کنتراست یک رنگ شفاف به سطح پشت آن بستگی دارد. الزام به نمونهٔ رنگ مات، نسبت گزارششده را ویژگیِ همان جفتِ واردشده نگه میدارد، نه فرضی ناگفته دربارهٔ پسزمینه.
منابع
روش کامل، مثال محاسبهشده و همهٔ فرضهای این نتیجه در این صفحه آمده است: فایلساز پالت رنگ.