رنگ و کنتراست

آیا تا به حال سعی کرده‌اید متنی را روی صفحه نمایش بخوانید و به دلیل طرح رنگ، خواندن آن برایتان دشوار بوده یا در دیدن صفحه نمایش در محیط بسیار روشن یا کم نور دچار مشکل شده‌اید؟ یا شاید شما کسی هستید که مشکل بینایی رنگی دائمی‌تری دارد، مانند حدود ۳۰۰ میلیون نفر مبتلا به کوررنگی یا ۲۵۳ میلیون نفر مبتلا به کم‌بینایی ؟

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

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

درک رنگ

آیا می‌دانستید که اشیاء رنگ ندارند، اما طول موج‌های نور را منعکس می‌کنند؟ وقتی رنگ را می‌بینید، چشمان شما آن طول موج‌ها را دریافت و پردازش کرده و به رنگ تبدیل می‌کنند.

وقتی صحبت از دسترسی دیجیتال می‌شود، ما در مورد این طول موج‌ها از نظر رنگ، اشباع و روشنایی (HSL) صحبت می‌کنیم. مدل HSL به عنوان جایگزینی برای مدل رنگ RGB ایجاد شده است و بیشتر با نحوه درک رنگ توسط انسان مطابقت دارد.

رنگمایه (Hue ) روشی کیفی برای توصیف یک رنگ، مانند قرمز، سبز یا آبی است که در آن هر رنگمایه جایگاه خاصی در طیف رنگ با مقادیری از ۰ تا ۳۶۰ دارد، به طوری که قرمز در ۰، سبز در ۱۲۰ و آبی در ۲۴۰ قرار دارند.

اشباع، شدت یک رنگ است که با درصدهایی از 0٪ تا 100٪ اندازه‌گیری می‌شود. رنگی با اشباع کامل (100٪) بسیار زنده خواهد بود، در حالی که رنگی بدون اشباع (0٪) خاکستری یا سیاه و سفید خواهد بود.

روشنایی، میزان روشنی یا تیرگی یک رنگ است که با درصدهایی از 0% (سیاه) تا 100% (سفید) اندازه‌گیری می‌شود.

اندازه‌گیری کنتراست رنگ

برای کمک به افراد دارای معلولیت‌های مختلف بینایی، گروه WAI یک فرمول کنتراست رنگ ایجاد کرد تا از وجود کنتراست کافی بین متن و پس‌زمینه آن اطمینان حاصل شود. هنگامی که این نسبت‌های کنتراست رنگ رعایت شوند، افراد با بینایی نسبتاً کم می‌توانند متن روی پس‌زمینه را بدون نیاز به فناوری کمکی افزایش کنتراست بخوانند.

به تصاویری با پالت رنگی پر جنب و جوش نگاهی بیندازید و مقایسه کنید که آن تصویر برای افرادی که انواع خاصی از کوررنگی دارند چگونه به نظر می‌رسد.

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

دوترانوپیا

دوترانوپیا (که معمولاً به عنوان کوررنگی سبز شناخته می‌شود) در ۱٪ تا ۵٪ از مردان و ۰.۳۵٪ تا ۰.۱٪ از زنان رخ می‌دهد.

افراد مبتلا به کوررنگی دوترانوپیا حساسیت کمتری به نور سبز دارند. این فیلتر کوررنگی، این نوع کوررنگی را شبیه‌سازی می‌کند.

پروتانوپیا

پروتانوپیا (که معمولاً به عنوان کوررنگی قرمز شناخته می‌شود) در ۱.۰۱٪ تا ۱.۰۸٪ از مردان و ۰.۰۲٪ از ۰.۰۳٪ از زنان رخ می‌دهد.

افراد مبتلا به پروتانوپیا حساسیت کمتری به نور قرمز دارند. این فیلتر کوررنگی، این نوع کوررنگی را شبیه‌سازی می‌کند.

آکروماتوپسی یا تک‌رنگی

آکروماتوپسی یا تک‌رنگی (یا کوررنگی کامل) بسیار بسیار نادر اتفاق می‌افتد.

افراد مبتلا به آکروماتوپسی یا تک‌رنگی تقریباً هیچ درکی از نور قرمز، سبز یا آبی ندارند. این فیلتر کوررنگی، این نوع کوررنگی را شبیه‌سازی می‌کند.

محاسبه کنتراست رنگ

فرمول کنتراست رنگ از درخشندگی نسبی رنگ‌ها برای تعیین کنتراست استفاده می‌کند که می‌تواند از ۱ تا ۲۱ متغیر باشد. این فرمول اغلب به صورت [color value]:1 خلاصه می‌شود. به عنوان مثال، سیاه خالص در برابر سفید خالص، بزرگترین نسبت کنتراست رنگ را با 21:1 دارد.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

متن با اندازه معمولی، شامل تصاویر متن، باید نسبت کنتراست رنگی 4.5:1 داشته باشد تا حداقل الزامات WCAG برای رنگ را برآورده کند. متن با اندازه بزرگ و آیکون‌های ضروری باید نسبت کنتراست رنگی 3:1 داشته باشند. متن با اندازه بزرگ با حداقل ۱۸pt / ۲۴px یا ۱۴pt / ۱۸.۵px پررنگ مشخص می‌شود. لوگوها و عناصر تزئینی از این الزامات کنتراست رنگی معاف هستند.

خوشبختانه، نیازی به ریاضیات پیشرفته نیست زیرا ابزارهای زیادی وجود دارند که محاسبات کنتراست رنگ را برای شما انجام می‌دهند. ابزارهایی مانند Adobe Color ، Color Contrast Analyzer ، Leonardo و ابزار انتخاب رنگ DevTools کروم می‌توانند به سرعت نسبت‌های کنتراست رنگ را به شما بگویند و پیشنهادهایی برای ایجاد جامع‌ترین جفت‌ها و پالت‌های رنگی ارائه دهند.

با استفاده از رنگ

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

برای مثال، اگر بگویید « برای ادامه روی دکمه سبز کلیک کنید »، اما هرگونه محتوا یا شناسه اضافی را از دکمه حذف کنید، برای افرادی که انواع خاصی از کوررنگی دارند، تشخیص اینکه روی کدام دکمه کلیک کنند دشوار خواهد بود. به طور مشابه، بسیاری از نمودارها، چارت‌ها و جداول فقط از رنگ برای انتقال اطلاعات استفاده می‌کنند. اضافه کردن یک شناسه دیگر، مانند یک الگو، متن یا آیکون، برای کمک به افراد در درک محتوا بسیار مهم است.

بررسی محصولات دیجیتال شما در مقیاس خاکستری، روش خوبی برای تشخیص سریع مشکلات احتمالی رنگ است.

کوئری‌های رسانه‌ای متمرکز بر رنگ

فراتر از بررسی نسبت کنتراست رنگ و استفاده از رنگ در صفحه نمایش، باید استفاده از مدیا کوئری‌های محبوب و پشتیبانی‌شده را در نظر بگیرید که به کاربران کنترل بیشتری بر آنچه روی صفحه نمایش داده می‌شود، ارائه می‌دهند.

برای مثال، با استفاده از کوئری مدیای @prefers-color-scheme ، می‌توانید یک تم تاریک ایجاد کنید که می‌تواند برای افرادی که از نورگریزی یا حساسیت به نور رنج می‌برند مفید باشد. همچنین می‌توانید با @prefers-contrast یک تم با کنتراست بالا ایجاد کنید که از افرادی که دارای نقص رنگ و حساسیت به کنتراست هستند، پشتیبانی می‌کند.

طرح رنگی را ترجیح می‌دهد

کوئری رسانه‌ای @prefers-color-scheme به کاربران اجازه می‌دهد تا نسخه‌ای با تم روشن یا تیره از وب‌سایت یا برنامه‌ای که بازدید می‌کنند را انتخاب کنند. می‌توانید با تغییر تنظیمات ترجیحی روشن یا تیره و رفتن به مرورگری که از این کوئری رسانه‌ای پشتیبانی می‌کند، تغییر این تم را در عمل مشاهده کنید. دستورالعمل‌های مک و ویندوز را برای حالت تاریک مرور کنید.

حالت روشن و تاریک را با هم مقایسه کنید.

کنتراست را ترجیح می‌دهد

کوئری رسانه‌ای @prefers-contrast تنظیمات سیستم عامل کاربر را بررسی می‌کند تا ببیند آیا کنتراست بالا فعال است یا غیرفعال. می‌توانید با تغییر تنظیمات ترجیحی کنتراست و رفتن به مرورگری که از این کوئری رسانه‌ای پشتیبانی می‌کند (تنظیمات حالت کنتراست مک و ویندوز )، تغییر این تم را در عمل مشاهده کنید.

کنتراست معمولی و کنتراست بالا را با هم مقایسه کنید.

کوئری‌های لایه‌ای مدیا

شما می‌توانید از چندین مدیا کوئری متمرکز بر رنگ استفاده کنید تا به کاربران خود گزینه‌های بیشتری بدهید. در این مثال، ما @prefers-color-scheme و @prefers-contrast با هم ترکیب کردیم.

هم رنگ و هم کنتراست را مقایسه کنید.