بررسی کنتراست رنگ: نسبت‌های WCAG 2.2 و کدهای HEX و RGB و HSL

متنی که سخت خوانده شود خواننده را فراری می‌دهد، و یکی از رایج‌ترین مشکلات دسترس‌پذیری در وب‌سایت‌هاست. رهنمودهای دسترس‌پذیری محتوای وب (WCAG) برای آن یک عدد ساده تعریف کرده‌اند: نسبت کنتراست میان متن و پس‌زمینه. در این راهنما کدهای رنگی را که با آن‌ها سروکار دارید (HEX و RGB و HSL) توضیح می‌دهیم، می‌گوییم این نسبت چطور حساب می‌شود و چه حدهایی دارد، و نمونه‌های محاسبه‌شده‌ای برای رنگ‌های محبوب در وب نشان می‌دهیم. هر جفت رنگی را می‌توانید با ابزار تبدیل رنگ و بررسی کنتراست ما بسنجید: رنگ متن را وارد کنید، پس‌زمینه را اضافه کنید، و ابزار نسبت کنتراست، نتیجه‌ی WCAG و نزدیک‌ترین رنگی را که قبول می‌شود نشان می‌دهد.

HEX و RGB و HSL: سه شیوه برای نوشتن یک رنگ

نمایشگرها هر رنگ را از نور قرمز، سبز و آبی می‌سازند. هر سه شیوه‌ی رایج همین ترکیب را توصیف می‌کنند:

HEX و RGB دقیق‌اند؛ در تبدیل به HSL گرد کردن پیش می‌آید، پس رنگ ممکن است با چند بار رفت‌وبرگشت یک واحد جابه‌جا شود. HSL محبوب است چون با تغییر یک عدد می‌شود رنگ را روشن‌تر یا تیره‌تر کرد. اما برای کنتراست، مقدار روشنایی آن گمراه‌کننده است؛ چند سطر پایین‌تر می‌بینید چرا.

نسبت کنتراست چطور حساب می‌شود

WCAG درخشندگی نسبی دو رنگ را مقایسه می‌کند، یعنی اینکه هر رنگ در چشم انسان چقدر روشن دیده می‌شود. هر کانال رنگ اول از منحنی sRGB به نور خطی تبدیل می‌شود و بعد کانال‌ها به اندازه‌ی حساسیت چشم ما وزن می‌گیرند:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(R, G, B: linear channel values between 0 and 1)

contrast = (L1 + 0.05) / (L2 + 0.05)
(L1 = lighter color, L2 = darker color)

وزن‌ها نکته‌ی اصلی را نشان می‌دهند: سهم سبز در روشنایی‌ای که می‌بینیم بیش از ده برابر آبی است. نسبت کنتراست از ۱:۱ (دو بار یک رنگ) تا ۲۱:۱ (سیاه روی سفید) است. از مه ۲۰۲۱ آستانه‌ی تبدیل sRGB در این فرمول به‌جای ۰٫۰۳۹۲۸ عدد ۰٫۰۴۰۴۵ است؛ به گفته‌ی W3C این تغییر در عمل اثری بر نتیجه‌ها ندارد.

حدهای WCAG 2.2

سطح AA هدف معمول است و بیشتر قانون‌ها و شرایط خرید دولتی به آن ارجاع می‌دهند. در اتحادیه‌ی اروپا، قانون دسترس‌پذیری اروپا (European Accessibility Act) از ۲۸ ژوئن ۲۰۲۵ برای بسیاری از محصولات و خدمات دیجیتال، از جمله فروشگاه‌های اینترنتی، اجرا می‌شود، و استاندارد اروپایی EN 301 549 که برای سنجش دسترس‌پذیری زیاد به کار می‌رود بر پایه‌ی WCAG است.

چرا روشنایی در HSL گمراه‌کننده است

در HSL، زرد خالص hsl(60, 100%, 50%) و آبی خالص hsl(240, 100%, 50%) دقیقاً یک روشنایی دارند: ۵۰ درصد. اما روی زمینه‌ی سفید تفاوتشان از این بیشتر نمی‌شود:

هر هفت رنگ روشنایی HSL یکسانی دارند، اما کنتراستشان با سفید از ۱٫۰۷:۱ تا ۸٫۵۹:۱ است. قرمز خالص که خیلی‌ها آن را رنگ هشدار پررنگی می‌دانند، روی سفید حتی به ۴٫۵:۱ هم نمی‌رسد. پس هیچ‌وقت کنتراست را از روی مقدار L در HSL قضاوت نکنید؛ آن را حساب کنید.

رنگ‌های محبوبی که با متن سفید رد می‌شوند

متن سفید روی دکمه‌ی رنگی از رایج‌ترین ترکیب‌های وب است و اغلب از رایج‌ترین اشتباه‌ها. چند رنگ میانه‌ی رایج را حساب کرده‌ایم:

متن سفید روی این دکمه‌های آبی و سبز و نارنجی، اگر هم قبول شود، فقط برای متن درشت قبول می‌شود. پشت این یک قاعده‌ی ساده هست: روی هر پس‌زمینه‌ای که درخشندگی نسبی‌اش بیش از حدود ۰٫۱۸ باشد، متن سیاه کنتراست بیشتری از متن سفید دارد. پس برای بیشتر رنگ‌های روشن و پراشباع، متن سیاه خواناتر است، حتی اگر سفید آشناتر به نظر برسد.

متن خاکستری: حد کجاست

خاکستری روشن برای اطلاعات فرعی، زیرنویس تصویر و متن راهنمای داخل فیلدهای فرم محبوب است. روی زمینه‌ی سفید حدها این‌هاست:

همین برای متن نیمه‌شفاف هم صدق می‌کند. متن سیاه با شفافیت ۵۴ درصد روی سفید مثل #757575 دیده می‌شود (۴٫۶۱:۱) و با ۳۸ درصد مثل #9E9E9E (۲٫۶۸:۱). آنچه اهمیت دارد رنگی است که در نهایت به چشم خواننده می‌رسد، پس رنگ‌های شفاف را روی همان پس‌زمینه‌ای که نمایش داده می‌شوند حساب کنید.

گام‌به‌گام: رنگ‌هایتان را بسنجید

1. جفت‌های واقعی را جمع کنید: متن اصلی روی پس‌زمینه‌ی صفحه، رنگ لینک، متن دکمه روی رنگ دکمه، متن راهنمای داخل فیلدها و متن روی تصویر یا کادرهای رنگی.
2. رنگ متن را در ابزار تبدیل رنگ ما وارد کنید و پس‌زمینه را زیر آن.
3. نتیجه‌ها را برای متن معمولی، متن درشت و گرافیک‌ها ببینید. برای متن اصلی دست‌کم ۴٫۵:۱ لازم است.
4. اگر جفتی رد شد، از نزدیک‌ترین سایه‌ی پیشنهادی استفاده کنید: فام و اشباع را نگه می‌دارد و فقط روشنایی را عوض می‌کند تا طراحی‌تان قابل‌تشخیص بماند.
5. حالت تاریک را جداگانه بسنجید. رنگ‌هایی که روی سفید جواب می‌دهند روی پس‌زمینه‌ی تیره اغلب رد می‌شوند، و برعکس.

یک نکته برای متن فارسی: در بسیاری از قلم‌ها، حروف فارسی در اندازه‌ی یکسان کوچک‌تر و ظریف‌تر از حروف لاتین دیده می‌شوند، و نقطه‌ها و نشانه‌ها جزئیات ریزی دارند. حد کنتراست WCAG برای همه‌ی خط‌ها یکی است، اما برای متن فارسی بهتر است فقط به حداقل بسنده نکنید و اندازه‌ی قلم را هم کمی بزرگ‌تر بگیرید.

WCAG 3 هنوز پیش‌نویس است و اینکه کنتراست را چطور خواهد سنجید هنوز قطعی نشده. تا وقتی به استاندارد تبدیل شود، WCAG 2.2 و حدهای آن مبنای قانون‌ها و ممیزی‌ها می‌ماند.

تبدیل رنگ (HEX، RGB، HSL)رنگ‌ها را بین HEX، RGB، HSL و CMYK تبدیل کنید، رنگ را به‌صورت تصویری انتخاب کنید و کنتراست WCAG را با متن سفید و مشکی بسنجید.باز کردن ابزار

ابزارهای این راهنما

• تبدیل رنگ (HEX، RGB، HSL)

  رنگ‌ها را بین HEX، RGB، HSL و CMYK تبدیل کنید، رنگ را به‌صورت تصویری انتخاب کنید و کنتراست WCAG را با متن سفید و مشکی بسنجید.

  باز کردن ابزار

پرسش‌های متداول

برای متن معمولی چه نسبت کنتراستی لازم است؟

دست‌کم ۴٫۵ به ۱ برای سطح AA در WCAG که هدف معمول است. سطح AAA نسبت ۷ به ۱ می‌خواهد. متن درشت، از ۲۴ پیکسل یا از حدود ۱۸٫۷ پیکسل پررنگ، برای AA دست‌کم ۳ به ۱ لازم دارد.

چرا متن سفید روی دکمه‌ی آبی من رد می‌شود؟

خیلی از آبی‌های پررنگ روشن‌تر از آن‌اند که به نظر می‌رسند. مثلاً متن سفید روی #2196F3 فقط به ۳٫۱۲ به ۱ می‌رسد. آبی را آن‌قدر تیره کنید که نسبت دست‌کم ۴٫۵ به ۱ شود، یا از متن سیاه استفاده کنید که روی همان آبی به ۶٫۷۲ به ۱ می‌رسد.

آیا روشنایی در HSL همان روشنایی‌ای است که چشم می‌بیند؟

نه. روشنایی HSL تفاوت واکنش چشم به قرمز و سبز و آبی را در نظر نمی‌گیرد. زرد خالص و آبی خالص هر دو در HSL روشنایی ۵۰ درصد دارند، اما کنتراست زرد روی سفید ۱٫۰۷ به ۱ است و کنتراست آبی ۸٫۵۹ به ۱.

لوگو و آیکون هم به کنتراست مشخصی نیاز دارند؟

لوگو و نام تجاری مستثنا هستند. آیکون‌هایی که معنا دارند، کادر فیلدهای فرم و نشانگر فوکوس طبق معیار 1.4.11 در WCAG 2.2 دست‌کم به نسبت ۳ به ۱ با رنگ‌های کنارشان نیاز دارند.

آیا بررسی کنتراست رنگ‌های مرا جایی می‌فرستد؟

نه. ابزار تبدیل رنگ و بررسی کنتراست ما کاملاً در مرورگر شما اجرا می‌شود و هیچ چیزی از آنچه وارد می‌کنید بارگذاری نمی‌شود.

نسبت ۴٫۴۹ به ۱ کافی است؟

نه. این حد یک حداقل است و گرد نمی‌شود: ۴٫۴۹ به ۱ شرط ۴٫۵ به ۱ را برآورده نمی‌کند. سایه‌ای کمی تیره‌تر یا روشن‌تر انتخاب کنید تا نسبت دست‌کم ۴٫۵ به ۱ شود.

منابع و مطالعه‌ی بیشتر

1. W3C: Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation of 12 December 2024 (www.w3.org)
2. W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) (www.w3.org)
3. W3C: Relative luminance (definition and formula) (www.w3.org)
4. Directive (EU) 2019/882 – European Accessibility Act (eur-lex.europa.eu)