رنگ‌های حالت تاریک: انتخاب پس‌زمینه، متن و رنگ تأکیدی

چرا سفید خالص روی سیاه خالص چشم را خسته می‌کند

سفید #ffffff روی سیاه #000000 بیشترین کنتراستی است که یک صفحه‌نمایش می‌تواند نشان دهد: 21:1 در WCAG 2 و Lc -107.9 در APCA. برای برچسب یک دکمه اشکالی ندارد. برای پاراگراف‌ها زیادی است.

مشکل، هاله‌زدگی (halation) است. حروف روشن روی زمینه سیاه انگار نورشان را به تاریکی اطراف پخش می‌کنند، پس خطوط ضخیم‌تر و تار به نظر می‌رسند، به‌خصوص برای کسانی که آستیگمات دارند. چشم هم مدام بین متن خیره‌کننده و فاصله‌های سیاه تطبیق پیدا می‌کند که در مطالعه طولانی خسته‌کننده است.

پایین آوردن هر دو سر، مشکل را بدون آسیب به خوانایی حل می‌کند. #e5e5e5 روی #121212 هنوز 14.87:1 و Lc -90.4 می‌دهد که بالاتر از سطح ترجیحی APCA یعنی Lc 90 برای متن اصلی است.

• سیاه خالص#000000
• سطح تیره#121212
• متن سفید شکسته#e5e5e5
• سفید خالص#ffffff

بهترین رنگ پس‌زمینه برای حالت تاریک

بیشتر تم‌های تیره پس‌زمینه‌ای با روشنایی OKLCH بین 0.14 و 0.28 دارند. جدول انتخاب‌های رایج را با دو رنگ متن روی آن‌ها نشان می‌دهد: #e5e5e5 برای متن اصلی راحت و #fafafa برای بیشترین تأکید.

رفتن از سیاه خالص به #18181b از نظر APCA تقریباً هزینه‌ای ندارد: متن #e5e5e5 از Lc -91.0 به -89.9 می‌رسد. در عوض زیر پس‌زمینه برای سایه‌ها جا باز می‌شود و بالای آن برای سطح‌های بالاتر. #1f2937 کمی آبی است (کرومای 0.03)، که اگر برندتان سرد باشد خوب کار می‌کند و کنار رنگ‌های تأکیدی گرم ناجور به نظر می‌رسد.

WCAG 2 کنتراست را روی پس‌زمینه تیره بیش از واقع نشان می‌دهد

فرمول WCAG 2 با یک نسبت یکسان رفتار می‌کند، چه رنگ‌ها روشن باشند چه تیره. بینایی انسان این‌طور نیست: تفاوت بین رنگ‌های تیره سخت‌تر دیده می‌شود. APCA این را مدل می‌کند و فاصله زیاد است. جدول نشان می‌دهد روی هر پس‌زمینه به کدام خاکستری نیاز دارید تا به WCAG AA و دو سطح APCA برسید.

روی سفید، خاکستری‌ای که تازه AA را پاس می‌کند همین حالا به Lc 71.6 می‌رسد. روی #121212، خاکستری‌ای که تازه AA را پاس می‌کند فقط به Lc -32.8 می‌رسد، کمتر از حداقل Lc 45 در APCA برای تیترهای بزرگ. برای رسیدن به همان سطح APCA برای متن اصلی، یعنی Lc 75، روی سفید 5.10:1 کافی است اما روی #121212 به 11.67:1 نیاز دارید.

با رنگ‌ها هم همین اتفاق می‌افتد. آبی #4a83f0 روی #121212 با 5.17:1 از WCAG AA پاس می‌کند، اما مقدار APCA آن Lc -37.6 است. در حالت تاریک 4.5:1 را فقط حداقل بدانید. برای متن اصلی حدود 9:1 یا بیشتر را هدف بگیرید، یعنی جایی که خاکستری روی #121212 به Lc 60 می‌رسد، یا مستقیماً APCA را بسنجید.

چرا نمی‌شود پالت روشن را ساده معکوس کرد

رنگ برندی که برای پس‌زمینه سفید تنظیم شده معمولاً برای پس‌زمینه تیره زیادی تیره و زیادی اشباع است. آبی #2f6bdf را از یک تم روشن در نظر بگیرید. روی سفید با 4.90:1 به‌عنوان متن لینک پاس می‌کند. روی #121212 به 3.83:1 و Lc -27.7 افت می‌کند که برای متن در هر اندازه‌ای رد است.

راه‌حل، بالا رفتن در مقیاس برند است: روشنایی بیشتر، کرومای کمتر. جدول چهار درجه از همان مقیاس آبی را روی هر دو پس‌زمینه مقایسه می‌کند.

درجهٔ 300 در حالت تاریک همان نقش درجهٔ 600 را برای لینک‌ها و متن رنگی دارد: روشنایی از 0.555 به 0.805 می‌رسد و کروما از 0.188 به 0.082 کم می‌شود، یعنی کمتر از نصف. کمتر شدن کروما هم مهم است، چون رنگ‌های اشباع روی پس‌زمینه تیره انگار می‌درخشند و لبه‌هایشان می‌لرزد.

دکمه‌های توپر فرق دارند، چون دکمه پس‌زمینه خودش را همراه دارد. متن سفید روی #2f6bdf در هر دو تم 4.90:1 می‌ماند، پس دکمه اصلی می‌تواند همان بماند. فقط متن رنگی، آیکون‌ها و خطوط دور (outline) به درجه روشن‌تر نیاز دارند.

ارتفاع (elevation): سطح‌های روشن‌تر به‌جای سایه

سایه روی پس‌زمینه تیره به‌سختی دیده می‌شود، پس تم‌های تیره ارتفاع را با روشنایی نشان می‌دهند: هر سطح هرچه به بیننده نزدیک‌تر باشد، روشن‌تر است. تم تیره اولیه Material Design این کار را با یک لایه سفید روی #121212 انجام می‌داد، از 5% در ارتفاع 1 dp برای کارت‌ها تا 16% در 24 dp برای دیالوگ‌ها.

هر تراز حدود 0.02 تا 0.05 به روشنایی OKLCH اضافه می‌کند. حتی بالاترین تراز فقط 1.60:1 با پس‌زمینه فرق دارد، پس به سطح‌هایی که باید متمایز شوند یک حاشیه 1 px بدهید. در OKLCH می‌توانید همین سیستم را بدون لایه بنویسید: کروما و فام را ثابت نگه دارید و L را در هر تراز حدود 0.03 بالا ببرید.

prefers-color-scheme و ویژگی color-scheme

مدیا کوئری prefers-color-scheme به شما می‌گوید سیستم‌عامل روی حالت روشن تنظیم شده یا تاریک. ویژگی color-scheme به مرورگر می‌گوید صفحه شما از کدام طرح‌های رنگ پشتیبانی می‌کند تا نوار اسکرول، کنترل‌های فرم و بوم پیش‌فرض را با رنگ‌های هماهنگ نمایش دهد.

color-scheme را روی ریشه تنظیم کنید، بعد متغیرهای رنگ را داخل مدیا کوئری بازنویسی کنید.

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --surface: #f4f5f6;
    --text: #15171b;
    --text-muted: #6e7279;
    --link: #2f6bdf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --surface: #1e1e1e;
        --text: #e5e5e5;
        --text-muted: #b2b2b2;
        --link: #a3c0f5;
    }
}

body {
    background: var(--bg);
    color: var(--text);
}

بدون color-scheme، در بیشتر مرورگرها صفحه تیره هنوز نوار اسکرول روشن و فیلدهای سفید نشان می‌دهد. فقط یک خط است و به‌راحتی فراموش می‌شود.

تابع light-dark() در CSS

light-dark() دو رنگ می‌گیرد و در طرح رنگ روشن اولی و در طرح رنگ تیره دومی را برمی‌گرداند. از سال 2024 در همه مرورگرهای اصلی کار می‌کند: Chrome و Edge 123، Firefox 120 و Safari 17.5. این تابع ویژگی color-scheme را می‌خواند: بدون color-scheme: light dark همیشه مقدار روشن را برمی‌گرداند.

هر رنگ یک بار و کنار جفت تیره‌اش تعریف می‌شود، و برای تغییر تم کافی است فقط color-scheme عوض شود.

:root {
    color-scheme: light dark;
    --bg: light-dark(#ffffff, #121212);
    --surface: light-dark(#f4f5f6, #1e1e1e);
    --text: light-dark(#15171b, #e5e5e5);
    --text-muted: light-dark(#6e7279, #b2b2b2);
    --link: light-dark(#2f6bdf, #a3c0f5);
    --primary: #2f6bdf;
    --on-primary: #ffffff;
}

:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

روی پس‌زمینه صفحه، همه رنگ‌های متن این بلوک در هر دو تم AA را پاس می‌کنند. در تم روشن: متن 17.94:1، متن کم‌رنگ 4.83:1، لینک‌ها 4.90:1. در تم تیره: متن 14.87:1، متن کم‌رنگ 8.84:1 با Lc -60.1، لینک‌ها 10.18:1. هر جفت دلخواه خودتان را می‌توانید در ابزار بررسی کنتراست PickShade بسنجید که WCAG 2 و APCA را کنار هم نشان می‌دهد.

پرسش و پاسخ