دسترسی به وب: درک رنگ ها و درخشندگی

هنگام طراحی محتوای بصری و خواندنی با هدف دسترسی برای همه کاربران بینا، داشتن درک نور، رنگ و درک مهم است. این صفحه به طور خاص بحث می کند:

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

در حالی که درک این مفاهیم برای طراحی و خوانایی برای همه کاربران بینا مهم است، آنها به ویژه برای کسانی که دارای دید کاهش یافته و کمبود رنگ هستند، و همچنین برای کسانی که دارای برخی اختلالات عصبی، شناختی و دیگر هستند، مهم است.

استانداردها و دستورالعمل ها

WAI W3.org دستورالعمل های آزادانه را منتشر می کند که توسط AGWG (گروه کاری دستورالعمل های دسترسی) نگهداری می شود. در حال حاضر این دستورالعمل ها به عنوان دستورالعمل های دسترسی WCAG 2. 1 شناخته می شوند. نسل بعدی، WCAG 3. 0، در حال حاضر به عنوان یک پیش نویس عمومی منتشر شده است و در انتظار توسعه و تایید بیشتر است.

دستورالعمل های WCAG 2. x تلاش می کنند تا کنتراست روشنایی کافی را برای کاربران بینا با دید کاهش یافته تعریف کنند، و همچنین دستورالعمل هایی برای کمک به کاربرانی که بینایی حساس به رنگ دارند (که به اشتباه «کور رنگی» نامیده می شود)، و دستورالعمل های رنگ دیگری WCAG 2. x در نظر گرفته شده است. برای جلوگیری از تشنج و سایر واکنش های فیزیکی در افراد مبتلا به اختلالات دهلیزی یا عصبی.

اصول رنگ

رنگ و نحوه استفاده از آن بخش عمده ای از دسترسی است. در حالی که در ابتدا رنگ ممکن است ساده به نظر برسد زیرا چیزی است که اکثر کاربران بینا هر روز تجربه می کنند، علم اساسی درک رنگ پیچیده است و اغلب شهودی نیست.

برای شروع، رنگ "واقعی" نیست، که ممکن است برای یک مقاله در مورد رنگ، یک جمله عجیب به نظر برسد. واقعیت این است که در محدوده مرئی، نور به سادگی در فرکانس ها یا طول موج های مختلف وجود دارد. در نظر بگیرید که چگونه کلیدهای یک پیانو صداهایی را در فرکانس های مختلف ایجاد می کنند. اما در حالی که گوش و ادراک شنوایی ما ممکن است صدا را به صورت طیفی از نت ها «شنود» کند، چشم طبیعی انسان نور مرئی را به سه محدوده همپوشانی تقسیم می کند. این سه باند نور توسط سلول های حساس به نور در چشم که مخروط نامیده می شوند شناسایی می شوند و سه نوع مخروط L، M یا S برای طول موج های بلند، متوسط و کوتاه نامیده می شوند.

ما به طور معمول حساسیت مخروط L ، M یا S را با احساس رنگهای قرمز ، سبز و آبی به ترتیب سه رنگ اصلی نور مرتبط می کنیم. رنگهای خاص قرمز ، سبز و آبی برای "مقدمات رنگ" مورد استفاده در یک مدل رنگ افزودنی RGB استفاده می شود. SRGB Colorspace ، فضای استاندارد پیش فرض Colorspace برای محتوای وب ، نمونه ای از یک مدل رنگی RGB افزودنی است.

مدل افزودنی RGB

RGB یک مدل رنگ افزودنی نامیده می شود زیرا با اضافه کردن نور از طول موج های مختلف در نسبت های مختلف برای تحریک مخروط های L ، M ، S در چشم عمل می کند تا یک احساس رنگ خاص ایجاد شود. به عنوان مثال وقتی رنگ زرد روی مانیتور خود را می بینید ، مانیتور هنوز فقط چراغ قرمز و سبز ساطع می شود. قرمز و سبز جداگانه مخروط های L و M را به طور مشابه با چگونگی ایجاد طول موج "زرد" از نور تحریک می کند ، همانطور که زرد "بین" قرمز و سبز است. چراغ قرمز و سبز در هوا "مخلوط" نمی شود که گویی رنگ ، جدا از هم باقی می مانند."اختلاط" در پردازش عصبی سیستم بینایی ما اتفاق می افتد.

مانیتور فقط چراغ قرمز و سبز را که در بالا نشان داده شده است ساطع می کند تا نوار زرد را در زیر ایجاد کند.

مدل تفریق CMYK

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

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

درک رنگ و کنتراست

درک ما از درک ما از رنگ ، نور و کنتراست این است که:

• مطلق نیست ،
• که این یک درک حساس به متن است ،
• و این برداشت بیشتر از نظر طبیعت عصبی است.

زمینه کنتراست

مانند رنگ ، کنتراست "واقعی" نیست ، این یک درک است. 20 سال اول زندگی ما طول می کشد تا اوج حساسیت کنتراست را ایجاد کنیم. سن و بسیاری از اشکال بهداشتی - حتی دارویی که ممکن است تجویز کنید - می تواند بر ادراک کنتراست شما تأثیر بگذارد.

در تصویر زیر هر دو نقطه زرد ، و خاکستری مربعی که در آن قرار دارند ، از نظر مقدار رنگ SRGB که روی مانیتور شما نمایش داده می شود ، یکسان هستند. این درک حساس به متن شما از این رنگ ها است که باعث می شود آنها بسیار متفاوت باشند ، زیرا پردازش تصویر مغز شما ادراک را بر اساس آنچه فکر می کند در سایه است یا خیر ، تنظیم می کند.

نقاط زرد موجود در این تصویر رنگهای یکسان از مانیتور شما هستند ، اما به دلیل زمینه متفاوت به نظر می رسند. تصویر d. lyon

کنتراست ، سبکی و درک رنگ ما تحت تأثیر زمینه رنگهای مجاور و سایر ویژگی های یک طراحی یا تصویر قرار می گیرد. این باعث می شود پیش بینی کنتراست به چالش کشیده شود. به وضوح به سادگی فاصله یا نسبت بین دو رنگ ساده نیست.

کنتراست خوانایی

برای محتوای وب ، خوانایی یک هدف بسیار مهم است. خوانایی با خوانایی یکسان نیست. خوانایی نکته ای است که یک کاربر خاص می تواند با بهترین سرعت و بهترین درک خود بخواند. خوانایی به "تفاوت فقط قابل توجه" (JND) اشاره دارد که در آن چهره ای مانند نامه فقط قابل تشخیص است.

برای بینایی طبیعی ، سطح خوانایی JND حساسیت به کنتراست (CS) حدود 1 ٪ است ، در حالی که شخصی با اختلال خفیف ممکن است CS 3 ٪ داشته باشد. 10 ٪ نشان دهنده اختلال عمیق در منطقه بینایی کم است. این سطوح برای فونت های بزرگ و جسورانه در نمودار ویژه ای است که برای آزمایش حساسیت کنتراست استفاده می شود.

اما آستانه 1 ٪ تا 3 ٪ کاملاً برای خواندن روان و آسان کافی نیست. حداقل سطح کنتراست بحرانی ده برابر CS JND است و 20 برابر JND هدف بهتری برای "ذخیره کنتراست" در نظر گرفته می شود.(نیازهای بصری برای خواندن ، S G Whittaker ، J Lovie-Kitchin).

فرکانس مکانی

درک ما از تضاد نه تنها تحت تأثیر عناصر اطراف و محیط زیست بلکه "فرکانس مکانی" خود محرک است. فرکانس مکانی بالاتر به معنای کوچکتر ، نازک تر و شلوغ تر است. این امر برای متن و اندازه و وزن قلم مورد استفاده و همچنین فاصله نامه و خط بسیار صدق می کند.

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

چاپ "عادی" معمولاً 11. 5pt تا 12pt در نظر گرفته می شود ، این معادل 16px روی صفحه است. و این برای بینایی طبیعی است. برای ارتباط این موضوع با حدت بینایی دنیای واقعی ، اگر به نمودار پزشک چشم فکر می کنید ، و تمرکز روی یک سرمایه E. اگر آن E در حد خوانایی یا حدت برای 20/20 بینایی باشد ، و این در تضاد کامل است ، این استمعادل یک Capital Helvetica E که 3. 9px روی صفحه نمایش است ، به معنی یک فونت CSS 5. 5px.(در چاپ ، این یک قلم 4PT روی کاغذ روکش شده است).

این حداقل برای نامه های "فقط بیرون کشیدن" است~70 ٪ دقت. این خوانایی است ، نه خوانایی. برای خوانایی ، میزان ارتفاع X حداقل باید دو برابر آن ارتفاع درپوش باشد. به این اندازه فونت بحرانی برای خوانایی گفته می شود.

این بدان معناست که در حالی که یک قلم 5. 5px ممکن است حداقل برای خوانایی 20/20 باشد ، حداقل برای خوانایی 15. 6px است (در چاپ ، در حدود 12pt ، استاندارد معمولی در کتاب ها). و این برای بینایی طبیعی است. شخصی با 20/40 به دو برابر نیاز دارد ، حدود یک قلم 31px. به همین دلیل است که استاندارد WCAG مستلزم آن است که کاربران توانایی بزرگنمایی متن را بزرگتر کنند.

در حالی که متنی که خیلی کوچک است ، خواندن آن دشوار است ، بنابراین متنی که خیلی بزرگ است. بالاتر از حدود 96px ، سرعت خواندن کاهش می یابد. همچنین ، فونت های بسیار بزرگ ، بزرگ کردن متن کوچکتر در صفحه را برای کاربر دشوار می کند ، زیرا بیشتر مرورگرها در حال حاضر بدون در نظر گرفتن متن ، همه را زوم می کنند.

دستورالعمل های اندازه متن

دستورالعمل های کنتراست فعلی WCAG 2. x 1. 4. 3 و 1. 4. 6 متن "بزرگ" را به عنوان متنی تعریف می کند که 18pt (24px) یا با وزن طبیعی (400) بزرگتر است ، یا متنی که 14pt (18. 7px) با جسورانه استوزن (700). این ممکن است در سال 2008 هنگامی که استاندارد ایجاد شد ، کافی باشد. در آن زمان ، بیشتر "فونت های وب" مانند وردانا فقط در یک وزن طبیعی و جسورانه در دسترس بودند.

امروزه ، گسترش فونت های وب به راحتی در دسترس از همه اندازه ها و وزن ها این مسئله را پیچیده است. استاندارد WCAG 3. 0 در حال ظهور در کنتراست بصری به عنوان الگوریتم کنتراست ادراکی پیشرفته (APCA) شناخته می شود و وزن و اندازه قلم را به روشی متغیر ، نسبت به مقدار کنتراست پیش بینی شده در نظر می گیرد.

CSS و SRGB ColorSpace

W3.org SRGB ColorSpace را به عنوان پیش فرض محتوای وب تعریف می کند. صفحه MDN در مورد "نوع داده رنگ CSS نشان دهنده رنگ در فضای SRGB است."

نمادهای سطح 3 رنگ CSS

اینها نمونه هایی از نمادهای CSS است که برای تعریف رنگ استفاده می شود. در اینجا رنگ مثال برای هر یک از Magenta است:

مثال اول استفاده از یکی از نام های رنگی تعریف شده است. لیست کلمات کلیدی اصلی رنگ عبارتند از: آبزی ، سیاه ، آبی ، فوکسیا ، خاکستری ، سبز ، آهک ، مارون ، نیروی دریایی ، زیتون ، بنفش ، قرمز ، نقره ، اشک آور ، سفید و زرد. به عنوان مثال ، برخی از نام های رنگی دارای نام مستعار هستند ، به عنوان مثال ، سیان و آکوا همان رنگ هستند ، همانطور که فوکسیا و مگنتا و خاکستری و خاکستری هستند. بیش از صد و چهل نام دیگر وجود دارد که از مشخصات SVG آمده است که توسط بیشتر مرورگرها پشتیبانی می شود.

مثالهای بعدی "HSL" را نشان می دهد که مخفف "رنگ ، اشباع ، سبکی" است. رنگ تولید شده از تنظیمات هنوز در فضای SRGB است ، اما HSL به عنوان روشی راحت تر برای انتخاب و کار با رنگ در نظر گرفته شده است. از آنجا که رنگ به عنوان زاویه تنظیم می شود ، ایجاد رابط کاربری با استفاده از یک دستگیره یا کنترل دایره ای برای تنظیم رنگ آسان است.

در مرحله بعد ، ما می توانیم مقادیر SRGB را مستقیماً ، به عنوان درصد ، 0 ٪ خاموش (سیاه) و 100 ٪ ارزش کامل آن رنگ را تنظیم کنیم. مقادیر به ترتیب قرمز ، سبز ، آبی است.

ما همچنین می توانیم مقادیر SRGB را مستقیماً با یک عدد عدد صحیح 8bit تنظیم کنیم ، این بدان معنی است که یک عدد کامل از 0 تا 255 است. این تعداد مقادیر موجود در یک بایت 8bit است ، به این ترتیب که اعداد اغلب در یک رایانه ذخیره می شوند.

پس از آن نشان داده شده است ، ما می توانیم از یک مقدار هگز استفاده کنیم. مقدار هگز به معنی "شش ضلعی" است ، جایی که عدد صحیح 0-255 توسط دو رقم نشان داده شده است که هر یک از 0-15 است. از آنجا که هیچ عددی عربی بالاتر از 9 وجود ندارد ، ما از حروف A-F برای نشان دادن 10-15 استفاده می کنیم. ما نماد "#" را اضافه می کنیم تا نشان دهد که ارزش هگز است. بنابراین ، #ff = 255.

در برخی از مثالهای قبلی ، متوجه خواهید شد که برخی از آنها یک مقدار چهارم دارند که "آلفا" نامیده می شود ، A در RGBA. کانال آلفا یک کانال رنگی نیست ، اما شفافیت را از نظر ارزش کدورت رنگ تعریف می کند. مقدار بالاتر به این معنی است که رنگ مات تر است بنابراین شفاف تر است. در مثالهای بالا ، مقدار آلفا به نصف یا 50 ٪ مات تنظیم شده است.

SRGB: فضای Colorspore در دسترس

برای دستورالعمل های دسترسی ، فضای SRGB Colorspace بیشتر مورد استفاده قرار می گیرد. این نه تنها به این دلیل است که SRGB استاندارد پیش فرض فعلی برای وب است ، بلکه همچنین مقدمات رنگ SRGB برای نگرانی های دسترسی به خوبی مناسب است. به عنوان مثال ، SRGB اولیه "قرمز" در واقع یک نارنجی قرمز است ، با طول موج غالب 611nm که در حساسیت مخروط M (سبز) همپوشانی دارد.

این برای برخی از اختلالات مربوط به کمبود بینایی رنگ (CVD) مفید است. یک شکل از CVD به نام Protanopia به این معنی است که چشم هیچ مخروطی قرمز ندارد. اما پروتانوپیا هنوز هم قادر به درک اولیه SRGB قرمز خواهد بود زیرا مخروط های سبز باقیمانده آن را درک می کنند ، اگرچه حدود 35 ٪ تاریک تر از دید طبیعی است. با این وجود ، هر دو نوع CVD یک نوع پروتان (کمبود قرمز) و دوتان (کمبود سبز) در تمایز بین قرمز و سبز مشکل دارند.

برخی دیگر از فضای صفحه نمایش از رنگ های اولیه مختلف استفاده می کنند. برای فضای جدید Ultrahd rec2020 Colorspace ، Primary Red دارای طول موج طولانی تر 630 نانومتر است. این امر به شدت وفاداری رنگ را برای بینایی طبیعی بهبود می بخشد ، اما همچنین به این معنی است که شخصی مبتلا به پروتانوپیا اصلاً این قرمز را نمی بیند ، یا در بهترین حالت بسیار کم رنگ است. Primary Green Rec2020 ممکن است باعث کاهش بیشتر درخشندگی برای دوترانوپی (بینایی کمبود سبز) شود.

در حالی که برخی از استانداردهای توسعه مانند CSS Color Module سطح 4 در حال اضافه کردن فضای رنگ های اضافی است ، SRGB همچنان به طور پیش فرض Colorspace و فضای Colors Colors برای دسترسی به آینده قابل پیش بینی باقی می ماند.

نور و درخشندگی

درخشش یک اندازه گیری خطی از نور است ، که برای دید انسان طیفی وزن دارد ، اما از نظر سبکی تا تاریکی از نظر ادراکی وزن ندارد. این توسط Y برای درخشندگی نسبی یا L CD/m² برای مطلق نماد است. ما برای بیشتر بحث های خود از Y استفاده خواهیم کرد. وزن طیفی حساسیت های مختلف مخروط های L ، M ، S را در نظر می گیرد (که گاهی اوقات به عنوان سلولهای حساس قرمز ، سبز و آبی در چشم تصور می شود).

تا کنون چشم ما به رنگ سبز تنظیم شده است که اکثر درخشندگی را تشکیل می دهد. نسبت به کل SRGB سفید (#FFF) ، سبز 71 ٪ از کل اندازه گیری درخشندگی است. قرمز در 21 ٪ دوم است و آبی به عنوان 7 ٪ درخشندگی سوم است.

شیرجه عمیق تر به حساسیت طیفی

چگالی نسبی سه نوع سلول مخروطی 63 ٪ مخروط L ، 31 ٪ مخروط و مخروط 6 ٪ S است و برای هر فرد کاملاً متغیر است. حال اگر برای لحظه ای به این اعداد نگاه کنیم ، ممکن است تعجب کنیم که چرا اکثر مخروط ها از نوع موج بلند ، L هستند ، اما "قرمز" در مانیتور SRGB تنها 21 ٪ از درخشندگی را تشکیل می دهد.

این امر به این دلیل است که حساسیت اوج مخروط L در واقع یک سبز/زرد است و پاسخ مخروط L تقریباً کاملاً با پاسخ مخروط M همپوشانی دارد. دلیل اینکه ما اغلب به مخروط L به عنوان مخروط "قرمز" اشاره می کنیم این است که بیشتر به چراغ قرمز موج بلند نسبت به مخروط M پاسخ می دهد. این دیفرانسیل بین مخروط های M و L است که منجر به احساس قرمز می شود.

در 611 نانومتر ، اصلی قرمز در یک مانیتور SRGB از حساسیت اوج مخروط L در 565 نانومتر فاصله دارد. اما SRGB Green اولیه 549 نانومتر است ، در قله مخروط L و قله مخروط M در 540 نانومتر. این توضیح می دهد که چرا Green Primary چنین بخش بزرگی از کل درخشندگی را روی مانیتور تشکیل می دهد.

مقدار مقادیر درخشندگی

هنگامی که مقدار رنگ SRGB به مقدار نور خطی درخشندگی (Y) تبدیل شود ، می توان از مقدار درخشندگی نسبت به درخشندگی رنگ دیگر برای تعیین نسبت کنتراست استفاده کرد ، یا برای پیش بینی کنتراست ادراکی استفاده می شود. این بخش مهمی از تعیین خوانایی متن در صفحه است.

در WCAG 2. x ، ریاضی کنتراست از نظر ادراکی یکنواخت نیست ، بنابراین ظاهر کنتراست را در طیف گسترده ای از نور تا تاریکی پیش بینی نمی کند. برای WCAG 3. 0 ، روشی جدید که به عنوان الگوریتم کنتراست ادراکی پیشرفته شناخته می شود ، یک مقدار کنتراست عددی را ارائه می دهد که نسبت به ادراک است.

همچنین به این مقاله در مورد کنتراست درخشندگی مراجعه کنید که در مورد روشهای مختلف ریاضی مربوط به درخشندگی و کنتراست بحث می کند

سبکی ادراکی

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

راه دیگر برای توصیف این موضوع این است که درک ما تقریباً از یک منحنی قدرت با یک نماینده پیروی می کند~0. 425 ، بنابراین سبکی ادراکی تقریباً L * = y 0. 425 است ، اگرچه این به سازگاری بستگی دارد.

انطباق

سیستم بینایی انسان به طور معمول دارای طیف چشمگیر چشم انداز گسترده ای است ، از نور روز روشن تا یک شب ماه تاریک که در آن چشم بسیار حساس است ، یک مطالعه نشان داد که یک فوتون های نور صرف 54 نور برای درک "چیزی" کافی است. این محققان در شرایط تاریک ایده آل تخمین زده می شوند که چشم می تواند یک شعله شمع را در 30 مایل دورتر ببیند.

این طیف فوق العاده گسترده به دلیل مکانیسمی که به عنوان سازگاری نور و تیره شناخته می شود ، امکان پذیر است ، جایی که چشم با سطح نور کلی فعلی تنظیم می شود.

سازگاری تاریک

همچنین به عنوان اسکاتوپی یا "دید شب" شناخته می شود. در اینجا چشم با یک سطح بسیار تاریک سازگار است. به جای مخروط های حساس "رنگ" ، نوع دیگری از سلول به نام میله ها فعال می شود. میله ها به سطح بسیار کم نور حساس هستند و رنگ آن را حس نمی کنند. علیرغم اینکه نسبت به نور بسیار حساس است ، با دید در شب وضوح وضوح بسیار ضعیف است و دیدن جزئیات می تواند سخت باشد.

هنگام تطبیق با یک وضعیت تاریک ، برای دستیابی به سازگاری کامل تاریک می تواند سی دقیقه طول بکشد. با این وجود ، قرار گرفتن در معرض کوتاه با یک چراغ روشن می تواند آن چشم انداز شبانه را از بین ببرد و یک بار دیگر زمان قابل توجهی را برای انطباق بگذارد. در شرایطی که حفظ سازگاری تاریک مهم است اما باید چیزی روشن شود (مانند نقشه یا کنترل) اغلب از یک چراغ قرمز استفاده می شود ، زیرا احتمال کمتری در میله هایی که بین سبز و آبی حساس هستند ، کمتر است.

سازگاری سبک

این همچنین به عنوان فتوپی یا "دید نور روز" شناخته می شود. در اینجا چشم با سطح بسیار بالاتری از نور سازگار است ، به طور معمول درخشندگی بیشتر از 8 سی دی بر متر 2. معادل با مقدار CSS بین #444 و #555 برای یک مانیتور رومیزی معمولی.

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

منطقه گرگ و میش

یک منطقه انتقالی بین سازگاری تاریک و نور معروف به دید بین النهرین وجود دارد ، که در آن هم میله ها و مخروط ها همزمان کار می کنند. در مانیتور ، ما این سیاه (حدود #000005) را تا حد 555 برای مانیتور دسک تاپ روشن در نظر می گیریم.

سازگاری های دیگر

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

کروما رنگ و اشباع

جایی که درخشش اندازه گیری نور است ، و L * (LSTAR) اندازه گیری درک ما از سبکی ، رنگ ، کروما ، اشباع به درک ما از رنگ آن نور است.

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

نظریه رنگ

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

شرایط رنگ

استاندارد جهانی از نظر رنگ سنجی (اندازه گیری رنگ) CIE است و واژه نامه تعاملی آنها با اطلاعات رنگی پر شده است.

توجه: نکته: هنگام جستجوی واژه نامه CIE از املای "رنگ" انگلیس استفاده کنید.

رنگارنگ بودن

رنگ آمیزی "ویژگی یک درک بصری است که براساس آن به نظر می رسد رنگ درک شده یک منطقه کم و بیش کروماتیک است."(CIE 17-233). برای رنگ یک کروماتیک خاص این ویژگی معمولاً با افزایش درخشندگی افزایش می یابد ، به جز در مواردی که روشنایی بسیار زیاد است.

اشباع

اشباع "رنگارنگ بودن منطقه ای است که متناسب با روشنایی آن قضاوت می شود."(CIE 17-1136). برای شرایط مشاهده روز عادی ، یک کروماتیک خاص تقریباً اشباع ثابت برای تمام سطح درخشندگی نشان می دهد ، به جز وقتی که روشنایی بسیار زیاد باشد.

کروما

Chroma "رنگارنگ بودن منطقه ای است که به عنوان بخشی از روشنایی یک منطقه مشابه روشن که به نظر می رسد سفید یا بسیار انتقال دهنده است ، قضاوت می شود.(CIE 17-139). یک رنگ تقریباً برای تمام سطوح روشنایی در شرایط مشاهده روز عادی ، کروما تقریباً ثابت را نشان می دهد (به جز وقتی که روشنایی بسیار زیاد باشد). در صورت افزایش درخشندگی ، کروما معمولاً در همان شرایط افزایش می یابد.

در اینجا نمونه ای از کروما بالا در مقابل هیچ کروما وجود دارد. در سمت راست ، هر یک از سه ابتدای SRGB حداکثر هستند. در سمت چپ ، هیچ کروما وجود ندارد ، همچنین به عنوان "Achromatic" شناخته می شود.

یک منبع خوب با نمونه های دقیق تر در سایت Color Munsell است.

ترکیبات رنگی

برخی از ترکیبات رنگی می تواند در مانیتور رایانه یا دستگاه تلفن همراه بسیار مشکل ساز باشد و برخی از ترکیبات رنگی می توانند در برخی از اختلالات اختلال ایجاد کنند. ترکیبی از قرمز/آبی یکی از این نمونه ها است.

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

• هرگز برای تمایز جزئیات به تنهایی اعتماد نکنید. کنتراست درخشندگی کافی لازم است.
• سبز موجود در یک مانیتور اکثریت قریب به اتفاق درخشندگی (نور) را تشکیل می دهد ، بنابراین معمولاً بخش مهمی از رنگهای سبک تر خواهد بود.

کار با آبی

• بلوزهای خالص معمولاً باید تاریک ترین دو رنگ باشند.
• برای استفاده از آبی به عنوان سبک تر دو رنگ ، سبز باید اضافه شود ، در غیر این صورت کنتراست کافی و خوانایی ضعیف وجود نخواهد داشت.
• این هم به دلیل کنتراست کم است و هم به دلیل دیدن چشم انسان با وضوح پایین تر از سبز و قرمز.

ماهیت نور آبی باعث می شود که آن را در یک مکان متفاوت بر روی شبکیه نسبت به قرمز متمرکز کند ، بنابراین یک رنگ قرمز خالص و یک رنگ آبی خالص که بلافاصله مجاور و لمس کننده است ، ممکن است در کنار یکدیگر "براق" شود. در مثال زیر: سمت چپ ، خالص خالص ( #F00) و آبی خالص ( #00D). درست ، مقدار مساوی از آبی به پس زمینه اضافه شد که تمام جزئیات را از کانال آبی حذف می کند.

کاهش یا جلوگیری از جزئیات در کانال آبی می تواند به جلوگیری از انحراف کروماتیک ، تابش خیره کننده یا براق کمک کند. با این حال ، هر دو این ترکیب رنگ هنوز برای برخی از اشکال کمبود بینایی رنگ یک مشکل مهم است. به عنوان مثال ، شخصی مبتلا به پروتانوپیا (دید کمبود قرمز) نمونه های فوق را به این صورت می بیند:

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

بنابراین همیشه اطمینان از کنتراست درخشندگی فراوان مهم است. این به راحتی با افزودن سبز به درخشان ترین دو رنگ تنظیم می شود.

کار با قرمز

متن خالص قرمز ( #F00) روی یک پس زمینه خالص سیاه ( #000) حداقل کنتراست برای یک فونت جسورانه وزن 24px 700 برای بینایی طبیعی است. شخصی مبتلا به Protanopia می تواند این کار را بر روی مانیتور SRGB دشوار کند و به معنای واقعی کلمه در صفحه نمایش نسل بعدی Rec2020 نامرئی خواهد بود.

اضافه کردن مقدار کمی از سبز (#77) تفاوت قابل توجهی را برای پروتانوپیا ایجاد می کند و در واقع با بهبود کنتراست درخشندگی ، خوانایی را برای همه کاربران بهبود می بخشد.

شبیه سازهای بینایی رنگ وجود دارد که به شما امکان می دهد تصویری از طراحی خود را پردازش کنید تا نشان دهید که چگونه ممکن است طراحی شما به کسی با کمبود بینایی رنگ نگاه کند.

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

جنبه های روانپزشکی رنگ

رنگ مانند رنگ ها و اشباع می تواند بر روحیه ما تأثیر بگذارد و تجربیات تعاملی ما را تقویت کند.

نمونه هایی از اثر رنگ فراتر از بینایی

• رنگ می تواند از نظر فرهنگی وابسته باشد: یک مطالعه متقابل فرهنگی از معانی عاطفی رنگ
• رنگ بر احساسات ما تأثیر می گذارد: رنگ و احساسات: تأثیر رنگ ، اشباع و روشنایی
• تضادهای بالاتر همچنین می تواند تأثیر مثبتی بر احساسات ما داشته باشد: تغییر احساسات از کنترل کنتراست محتویات بصری از طریق تشخیص احساسات عمیق مبتنی بر EEG
• برخی از رنگ ها می توانند بر درک ما از زمان تأثیر بگذارند: رنگ و ادراک زمان: شواهدی برای بیش از حد زمانی محرکهای آبی
• آبی همچنین تأثیر قابل توجهی در روشنایی و تابش درخشش دارد: آبی و تابش نور و روشنایی
• عینک های رنگی قرمز می توانند خوشبختی یا شادی بیشتری را فراهم کنند: نگاه از طریق عینک "گل رز": تأثیر رنگ بر پردازش عاطفی بصری
• قرمز به خوبی شناخته شده است که تأثیرات قابل توجهی در رفتار ما دارد: چگونه رنگ قرمز بر رفتار ما تأثیر می گذارد ، آمریکایی علمی ، S. مارتینز-کوند ، استفان L. مکنیک
• محیط قرمز: مطالعات نشان داده اند که یک محیط قرمز شناخت را تحریک می کند ، اما برای کسانی که از عملکرد شناختی آسیب زای مغزی رنج می برند ممکن است در یک محیط قرمز کاهش یابد ، در حالی که یک محیط سبز هیچ اثر قابل اندازه گیری ای نداشت.

چشمک زن و تشنج

چشمک زن مداوم روشن تر/تاریک تر در نرخ بالاتر از 3 فلاش در ثانیه ، و بیش از منطقه ای که فقط 5 درجه از دید مرکزی را در بر می گیرد ، نشان داده شده است که باعث ایجاد تشنج عکس در بعضی از افراد ، به احتمال زیاد در کودکان و نوجوانان می شود. همچنین مشخص شده است که برخی از الگوهای کنتراست بسیار منظم و مرتفع مانند نوارهای موازی سفید و سیاه نیز می توانند باعث ایجاد تشنج شوند. برخی از مطالعات نشان داده اند که قرمز اشباع بسیار عمیق (با طول موج 660 نانومتر-700 نانومتر+) ممکن است مشکل را تشدید کند ، اگر این قرمزهای عمیق بین حالت اشباع و اشباع نشده ، بدون توجه به درخشندگی.

بنیاد صرع آمریكا تشنج های مربوط به عكس را به طور كامل در این انتشار تشنج های عكس و الگوی ناشی از بررسی كاملاً بررسی كرد. این مطالعه منجر به چندین دستورالعمل مهم شد ، چند دستورالعمل اصلی عبارتند از:

فلاش های یک ، دوتایی یا سه گانه در یک ثانیه قابل قبول است ، اما در صورت بروز هر دو مورد ، دنباله ای از گرگرفتگی توصیه نمی شود:

1. بیش از سه چشمک در هر دوره دوم.
2. از حداقل فاصله مشاهده مورد انتظار ، مساحت کل چشمک زن همزمان زاویه دید 5 درجه یا بیشتر (200px تا 300px مربع روی مانیتور دسک تاپ تا حداقل مربع 50px برای یک دستگاه تلفن همراه نزدیک است).

هنگامی که نوارهای نور و ترس از هر الگوی بزرگتر از زاویه دید 5 درجه هستند و درخشش سبک ترین نوار بیش از 50 CD/m² است ، این الگوی نباید بیش از:

1. پنج جفت نوری نوری نوری ، اگر نوارها جهت ، نوسان ، فلاش یا برعکس را تغییر دهند.
2. اگر این الگوی تغییر ناپذیر باشد یا به طور مداوم و یکدست در یک جهت حرکت کند ، هشت جفت نوری نور.

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

یادداشت های اضافی: توصیه EFA از سال 2005 تلفنهای هوشمند قبل از تاریخ ، و مبتنی بر استفاده از مجموعه تلویزیونی بود ، و یک فلاش را تعریف می کند که "زاویه دیداری جامد از 00. 006 steradians (10 ٪ از میدان بصری مرکزی یا 25 ٪ صفحه نمایش را اشغال می کند. منطقه در مسافت های مشاهده معمولی). "این در اصل معادل زاویه دید 5 درجه مربع است. از آن زمان ، دستگاه های تلفن همراه نحوه مشاهده ما رسانه را تغییر داده اند. برای یک تلفن هوشمند معمولی که بسیار نزدیک (5 "-6" یا 12cm-15cm) مشاهده شده است که می تواند منطقه ای در حدود 50px تا 70px مربع باشد.

مدل سازی رنگ و دید نور

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

محاسبه درخشندگی نسبی

استاندارد IEC برای محاسبه درخشندگی نسبی (Y) از رنگ SRGB به شرح زیر است:

مرحله اول: عدد صحیح 8 بیتی برای شناور

با تقسیم 255. 0 مقادیر SRGB 8 بیتی را به شناور (0. 0 به 1. 0) تبدیل کنید:

اگر مقادیر SRGB شما 16 بیتی باشد ، با تقسیم 65535 به اعشاری تبدیل می شوید.

مرحله دوم: خطی

برای حذف منحنی انتقال رمزگذاری شده ، داده ها را خطی کنید.

با استفاده از عملکرد نشان داده شده در زیر:

توجه: آنهایی که با ریاضی کنتراست WCAG 2. x آشنا هستند ممکن است متوجه شوند که کد فوق از مقدار آستانه 0. 04045 استفاده می کند. این استاندارد رسمی IEC است. دستورالعمل های WCAG 2. 0 با استناد به یک مقدار منسوخ تهیه شد. در ماه مه 2021 ، این در سند WCAG 2. 1 به 0. 03928 اصلاح شد. برای رکورد ، مقدار WCAG 2. 0 0. 03928 است.

مرحله سوم: درخشندگی وزنی طیفی

چشم طبیعی انسان دارای سه نوع مخروط است که به نور قرمز ، سبز و آبی حساس هستند. اما حساسیت طیفی ما یکنواخت نیست ، زیرا ما نسبت به سبز (555 نانومتر) حساس هستیم و آبی آخرین مکان دور است. درخشندگی به صورت طیفی وزن دارد تا این موضوع را با استفاده از ضرایب زیر برای SRGB منعکس کند:

y = r_لین* 0. 2126 + گرم_لین* 0. 7152 + b_لین* 0. 0722

هر کانال رنگی خطی را با ضریب خود ضرب کرده و همه آنها را جمع کنید تا y ، درخشندگی پیدا کنید.

جایگزین: SRGB به Y ، ساده

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

هر کانال رنگی را به قدرت 2. 2 ، همانند صفحه نمایش SRGB بالا ببرید. این برای اکثر برنامه ها خوب است. اما اگر نیاز دارید که چندین سفر دور را به داخل و خارج از فضای رمزگذاری شده SRGB انجام دهید ، از نسخه دقیق تر در بالا استفاده کنید.

y = 0. 2126 * (R´/255. 0) 2. 2 + 0. 7152 * (G´/255. 0) 2. 2 + 0. 0722 * (B´/255. 0) 2. 2

ریاضی و روشها

در W3 AGWG بحث و بررسی فعال در مورد روش کنتراست WCAG 2. x ، ریاضیات و پیشنهادات آینده وجود دارد. موضوع اصلی بحث در مورد GitHub به عنوان شماره W3C/WCAG شماره 695 است.

• WCAG 2. x Contrast Checker در webaim.org. این چک کنتراست محبوب و آسان برای استفاده از دستورالعمل های WCAG 2. x 1. 4. 3 و 1. 4. 6 است
• ماشین حساب کنتراست APCA روش پیشنهادی برای ارزیابی کنتراست WCAG 3. همچنین به این فهرست پیوندها به مستندات و بحث های بیشتر در مورد کنتراست خوانایی مراجعه کنید.
• Brucelindbloom.com سایت Bruce Lindbloom در ColorsPaces و ریاضیات و تحولات مربوطه. این یک ماشین حساب بسیار مفید است که بین بسیاری از مدل های رنگی ، از جمله مدل های کلیدی CIE مبدل می شود.
• W3 CSS Color Module سطح 4 کد برای تبدیل رنگ که بخشی از ماژول رنگ CSS سطح 4 است

منابع اضافی

مسائل و بحث های W3C

• برای WCAG 3. & WCAG 3. 0 کنتراست (موضوع نقره #261) و موضوع شماره تصویری مرتبط با شماره 695 موضوع #236 ، موضوع آستانه SRGB منسوخ #360

استانداردها و دستورالعمل های W3C

منبع صفحه

این صفحه عمدتا بر روی کاغذ سفید روی رنگ و کنتراست توسط اندرو سامرز است که برای گروه کاری W3 و دستورالعمل های دسترسی ، که در اینجا توسط مجوز استفاده می شود ، تهیه شده است. اندرو سامرز یک متخصص دعوت شده از W3 و AGWG ، نویسنده مشخصات کنتراست بصری WCAG 3 و مخترع APCA است.