‏عدد 500 تو blue-500 دقیقاً یعنی چی؟

تو Tailwind متن سفید روی bg-blue-600 نسبت کنتراست 5.17:1 داره و سطح AA استاندارد WCAG (یعنی حداقل 4.5:1 برای متن معمولی) رو پاس می‌کنه. ولی همین ترکیب روی bg-green-600 فقط 3.30:1 هست و رد می‌شه. نویسنده می‌گه دلیلش اینه که تو پالت‌ها عدد شید حداقل چهار معنی مختلف داره: جایگاه، فاصلهٔ تضمین‌شدهٔ کنتراست، روشنایی اندازه‌گیری‌شده، یا نقش شید.

عدد به‌عنوان جایگاه: Material Design از 2014 مقیاس 50 تا 900 رو آورد و Tailwind تو نسخهٔ 1.0 همونو برداشت؛ 50 تو نسخهٔ 2.0 و 950 تو نسخهٔ 3.3 اضافه شد. اینجا عدد فقط می‌گه شید کجای طیف همون رنگه. مشکل از HSL شروع می‌شه که روشنایی رو میانگین بیشترین و کمترین کانال RGB حساب می‌کنه؛ برای همین زرد و آبی خالص هر دو 50% حساب می‌شن، در حالی که تو CIELAB (یعنی مقیاسی که با روشنایی درک‌شده توسط چشم جوره) زرد حدود 98 و آبی حدود 30 هست.

نتیجه‌ش تو Tailwind v3 اینه که روشنایی OKLCH شیدهای 500 از 0.585 برای indigo تا 0.795 برای yellow فرق می‌کنه. متن 200 روی 700 تو violet با 5.12:1 پاس می‌شه ولی تو yellow با 4.23:1 رد می‌شه، و از هفده خانوادهٔ رنگ، تو دوازده‌تاش رد می‌شه. یعنی قانونی مثل «متن 200 روی 700» رو نمی‌شه یه بار برای کل پالت نوشت و هر ترکیب جدا باید چک بشه.

عدد به‌عنوان کنتراست: تو IBM Carbon (مقیاس 10 تا 100) اگه فاصلهٔ دو عدد 50 یا بیشتر باشه، ترکیب accessible هست. USWDS هم «magic number» داره: فاصلهٔ 40 برای متن بزرگ AA، 50 برای متن معمولی AA و 70 برای AAA. Stripe هم پالتش رو با CIELAB از نو ساخت و هر دو رنگی که پنج سطح فاصله داشته باشن برای متن کوچیک کافی‌ان. عدد به‌عنوان روشنایی: تو Material 3 با فضای رنگی HCT، tone 40 یعنی روشنایی CIELAB برابر 40 تو هر رنگی. هزینه‌ش اینه که زرد تو این شیدها زیتونی تیره می‌شه، مثلاً #8a7237 تو USWDS.

عدد به‌عنوان نقش: Radix Colors دوازده قدم داره که هر کدوم کاربرد مشخصی دارن: 1 و 2 پس‌زمینهٔ اپ، 9 و 10 رنگ پر، 11 و 12 متن. کنتراستش هم با APCA بیان می‌شه، یعنی روش جدیدتری که جهت متن و پس‌زمینه رو هم حساب می‌کنه. نویسنده به نقل از Adrian Roselli اشاره می‌کنه که WCAG 3 هنوز فرمول کنتراست رو مشخص نکرده و احتمالاً قبل از 2030 تموم نمی‌شه. پس اگه فرمول عوض بشه، این تضمین‌ها باید دوباره چک بشن.

Tailwind v4 هم پالت رو به oklch برد ولی تو 220 شید از 242 شید روشنایی رو دقیقاً نگه داشت و بیشتر تغییر تو اشباع بود. برای همین کنتراست تقریباً عوض نشد (سفید روی blue-600 از 5.17:1 به 5.26:1 رسید) و عددها هنوزم فقط جایگاه رو نشون می‌دن. حرف آخر نویسنده اینه که blue-500 همون معنی‌ای رو داره که پالتش براش تعیین کرده.

نکات کلیدی:

• تو Tailwind v3 متن سفید روی blue-600 کنتراست 5.17:1 داره ولی روی green-600 فقط 3.30:1.
• WCAG 2 برای متن معمولی حداقل 4.5:1 و برای متن بزرگ 3:1 می‌خواد.
• تو Tailwind و Material 2014 عدد فقط جایگاه شیده و قانون کنتراست باید برای هر رنگ جدا چک بشه.
• تو Carbon و USWDS فاصلهٔ 50 بین عددها کنتراست AA رو تو همهٔ رنگ‌ها تضمین می‌کنه.
• Material 3 عدد رو با tone (روشنایی CIELAB) تعریف می‌کنه و Radix با نقش شید.
• Tailwind v4 تو 220 از 242 شید روشنایی v3 رو دقیقاً حفظ کرد.
• فرمول کنتراست WCAG 3 هنوز مشخص نیست.