{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Здоровий глузд: дописи з тегом доступність",
    "_rss_description": "Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems",
    "_rss_language": "uk",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/dostupnist\/",
    "feed_url": "https:\/\/blog-archive.alexkolodko.com\/tags\/dostupnist\/json\/",
    "icon": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547",
    "authors": [
        {
            "name": "Олександр Колодько",
            "url": "https:\/\/blog-archive.alexkolodko.com\/",
            "avatar": "https:\/\/blog-archive.alexkolodko.com\/pictures\/userpic\/userpic@2x.jpg?1768915547"
        }
    ],
    "items": [
        {
            "id": "70",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/barbican-access-guide\/",
            "title": "Гайди з доступності центру Barbican",
            "content_html": "<p>Ще приклад гайдів доступності (access guides) на сайті центру Barbican у Лондоні: <a href=\"https:\/\/www.barbican.org.uk\/your-visit\/accessibility\">https:\/\/www.barbican.org.uk\/your-visit\/accessibility<\/a><\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1748\" data-ratio=\"1.4096774193548\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-2.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-3.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-4.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-5.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-6.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-7.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-8.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-9.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-10.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-11.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-12.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-13.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-14.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-15.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-16.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-17.jpg\" width=\"1748\" height=\"1240\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Там є гайди, який можна роздрукувати з собою, при чому зроблений з урахуванням людей з вадами зору (великий шрифт, контрастні кольори), а також аудіогайди.<\/p>\n<p>У гайдах детально писано що і де на яких поверхах, де є туалети, як їздять ліфти тощо.<\/p>\n",
            "date_published": "2022-10-20T15:37:10+02:00",
            "date_modified": "2022-10-20T15:37:06+02:00",
            "tags": [
                "доступність",
                "навігація"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-2.jpg",
            "_date_published_rfc2822": "Thu, 20 Oct 2022 15:37:10 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "70",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-2.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-3.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-4.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-5.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-6.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-7.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-8.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-9.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-10.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-11.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-12.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-13.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-14.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-15.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-16.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/Access-Guide-Sep-2022-LR-ONLINE-VERSION-17.jpg"
                ]
            }
        },
        {
            "id": "69",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/wayfinding-in-advance\/",
            "title": "Навігація заздалегідь",
            "content_html": "<p>Коли знайшов <a href=\"https:\/\/blog.alexkolodko.com\/all\/hyperbolisation\/\">цю картинку<\/a> входу у музей мистецтв у Філадельфії (Philadelphia Museum of Art), то зайшов на їхній сайт та побачив гарний підхід до інформування.<\/p>\n<p>Шлях відвідувача (customer journey) починається ще до того, як людина попадає на локацію: відвідує сайт, знаходить інформацію як дістатись до локації різними видами транспорту, дивиться онлайн-карти, планує подорож, формує очікування тощо.<\/p>\n<p>—<\/p>\n<p>Ось, наприклад, аналіз сценаріїв з нашого проєкту навігації для MacPaw Space, який знаходиться у БЦ «Торонто». Частина навігації на самій локації не така велика, як шлях до неї.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"3.7795275590551\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-1.png\" width=\"2400\" height=\"635\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-2.png\" width=\"2400\" height=\"525\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-3.png\" width=\"2400\" height=\"525\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-4.png\" width=\"2400\" height=\"525\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">На картинках 4 сценарії відвідувачів: на івент, у музей, у кафе і як спікер.<\/div>\n<\/div>\n<p>Ще до входу на локацію треба цей вхід знайти: не зі всіх боків можна підійти до БЦ, щоб знайти правильний вхід, не зі всіх вулиць можна просто під’їхати до БЦ. А сценарій на візку взагалі на цій локації окремий, бо ліфт доступний для цього розташований з іншого входу біля іншої вулиці.<\/p>\n<p>І навіть до самого БЦ є точки комунікації про події (сайт, соцмережі, розсилки та квитки), в яких так само можна розповісти про те як і куди йти до входу на локацію.<\/p>\n<p>—<\/p>\n<p>Тому важливо окрім навігації на самій локації подивитись на весь шлях відвідувача від моменту, коли він тільки захотів кудись піти, та зрозуміти інші точки дотику у комунікації з ним: наприклад, на сайті, у соцмережах, у поштових розсилках тощо.<\/p>\n<p>І в цих місцях також можна давати всю потрібну інформацію для орієнтування, наприклад:<\/p>\n<ul>\n<li>карту та інструкцію як дійти пішки від метро чи зупинок транспорту, вказавши характерні орієнтири;<\/li>\n<li>фото або відео інструкцію з проходом до локації;<\/li>\n<li>інформацію про паркування для відвідувачів на авто (де паркінг, як доїхати, скільки це коштуватиме, які є орієнтири біля дороги);<\/li>\n<li>інструкції для відвідувачів на велосипедах та самокатах;<\/li>\n<li>інструкції (текстові, графічні, аудіо та відео) для людей з різними порушеннями (зору, слуху, маломобільні, на візках тощо), це також покращує загальну доступність (за кордоном це називається assistance guide або access guide);<\/li>\n<li>можливо якісь ще особливості міста, які існують тільки тут.<\/li>\n<\/ul>\n<p>На сайті музею є окрема сторінка з інформацією про те, як до них дістатись ріхними видами транспорту: <a href=\"https:\/\/philamuseum.org\/visit\/getting-here\"> philamuseum.org\/visit\/getting-here<\/a><\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2560\" data-ratio=\"1.3756045137023\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-1.jpg\" width=\"2560\" height=\"1861\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-2.jpg\" width=\"2560\" height=\"1861\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-3.jpg\" width=\"2560\" height=\"1861\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Розділ Getting Here<\/div>\n<\/div>\n<p>—<\/p>\n<p>Окремо хочеться відзначити дуже приємну <a href=\"https:\/\/philamuseum.org\/visit\/museum-map\">схему самого музею<\/a>. Подивіться, як на ній показані дуже характерні кругові сходи, які є в реальності. Це стає додатковим орієнтиром та дуже допомагає зв’язати картинку та будівлю. Плюс цю карту можна завантажити у <a href=\"https:\/\/cdn.sanity.io\/files\/f23a1pgq\/pma_beta\/bd288409efcb6789c656efe14c37f7baeb85cb87.pdf\">вигляді окремого PDF<\/a> зі всією інформацією та взяти з собою.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2000\" data-ratio=\"1.3271400132714\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/floor-1.jpg\" width=\"2000\" height=\"1507\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/floor-2.jpg\" width=\"2000\" height=\"1455\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Схема музею<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1704\" data-ratio=\"0.78021978021978\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_11-1704x2184.jpg\" width=\"1704\" height=\"2184\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_9-1704x2367.jpg\" width=\"1704\" height=\"2367\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_8-1704x2348.jpg\" width=\"1704\" height=\"2348\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Фото музею Джерело: <a href=\"https:\/\/www.dezeen.com\/2021\/05\/06\/frank-gehry-philadelphia-museum-of-art-opens\/\">https:\/\/www.dezeen.com\/2021\/05\/06\/frank-gehry-philadelphia-museum-of-art-opens\/<\/a><\/div>\n<\/div>\n<p>Ще з прикладів — офлайн Подія X від Projector у Unit.City. Після реєстрації на пошту разом з підтвердженням надіслали карту з проходом від входу до локації.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1854\" data-ratio=\"1.0842105263158\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/prjctr-event-mail.png\" width=\"1854\" height=\"1710\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/prjctr-event-map-resize.png\" width=\"2400\" height=\"1350\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Розсилка про Подію X від Projector<\/div>\n<\/div>\n<p>Або Епіцентр під час замовлення на сайті показує, де в самому магазині шукати відповідну зону. При цьому вже на місці немає ніяких вказівників до пункту видачі замовлень ¯\\_(ツ)_\/¯.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/epicenter-nav-online.jpg\" width=\"2560\" height=\"1361\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Підтвердження замовлення на сайті Епіцентру<\/div>\n<\/div>\n",
            "date_published": "2022-10-20T10:39:06+02:00",
            "date_modified": "2022-10-20T15:42:42+02:00",
            "tags": [
                "доступність",
                "навігація",
                "теорія"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-1.png",
            "_date_published_rfc2822": "Thu, 20 Oct 2022 10:39:06 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "69",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-3.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/MPS-CJs-4.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-1.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-2.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/museum-site-3.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/floor-1.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/floor-2.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_11-1704x2184.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_9-1704x2367.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/frank-gehry-philadelphia-museum-of-art-gehry-partners-architecture-extension-renovation-museums-usa_dezeen_2364_col_8-1704x2348.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/prjctr-event-mail.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/prjctr-event-map-resize.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/epicenter-nav-online.jpg"
                ]
            }
        },
        {
            "id": "24",
            "url": "https:\/\/blog-archive.alexkolodko.com\/all\/design-accessibility\/",
            "title": "Перевірка дизайну на доступність",
            "content_html": "<p>У своїй роботі ми завжди дотримуємось принципів <a href=\"http:\/\/ud.org.ua\/informatsiya\/shcho-take-universalnij-dizajn\">універсального дизайну<\/a>, основний з яких — рівність та доступність використання. Тому у цій статі опишемо, як можна перевіряти дизайн та кольори на доступність для людей із порушенням зору.<\/p>\n<h2>Дальтонізм<\/h2>\n<p>Близько 8% чоловіків та 0,5% жінок <a href=\"http:\/\/wearecolorblind.com\/article\/a-quick-introduction-to-color-blindness\/\">народжуються<\/a> з одним із видів дальтонізму. Тому будь-які макети треба перевіряти на доступність при кольоровій сліпоті, особливо, коли одночасно використовуються червоний та зелений кольори.<\/p>\n<h3>Adobe<\/h3>\n<p>У Adobe Photoshop, Illustrator та InDesign є вбудована функція перевірки макетів на два найпоширеніші види кольорової сліпоти: View \/ Proof Setup \/ Color Blindness Protanopia та Deuteranopia type. Для комфортної роботи можете додати гарячу клавішу для ввімкнення цих режимів у Edit \/ Keyboard Shortcuts.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-1-adobe.png\" width=\"2560\" height=\"1552\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Перевірка схеми метро на дейтеранопію<\/div>\n<\/div>\n<h3>Color Oracle<\/h3>\n<p>Якщо не прив’язуватись тільки до програм Adode, можна звернутись до більш універсальної програми — Color Oracle. Є версії для MacOS, Windows та Linux. Вона запускається незалежно від інших програм та переводить у режим перевірки на дальтонізм все, що відображується на екрані.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-2-colororacle.png\" width=\"2560\" height=\"1548\" alt=\"\" \/>\n<\/div>\n<h3>Sim Daltonism<\/h3>\n<p>Окремо для Mac є програма <a href=\"https:\/\/michelf.ca\/projects\/mac\/sim-daltonism\/\">Sim Daltonism<\/a>.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-3-sim.jpg\" width=\"1280\" height=\"800\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Sim Daltonism<\/div>\n<\/div>\n<h3>Sketch + Stark<\/h3>\n<p>Для тих, хто проектує інтерфейси у Скетчі, є окремий плагін <a href=\"http:\/\/www.getstark.co\/\">Stark<\/a>. Ще плагін вміє порівнювати два кольори на контрастність.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-4-Stark.png\" width=\"2560\" height=\"1506\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Sketch + Stark<\/div>\n<\/div>\n<h3>Figma + Color Blind<\/h3>\n<p>Для Фігми є плагін <a href=\"https:\/\/www.figma.com\/community\/plugin\/733343906244951586\">Color Blind<\/a>, який копіює артборд чи об’єкт та перетворює його кольори так, як би це бачили люди з дальтонізмом.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-5-Figma-ColorBlind.png\" width=\"2400\" height=\"1442\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Figma та плагін Color Blind<\/div>\n<\/div>\n<h2>Контраст кольорів<\/h2>\n<p>Є такий розповсюджений стереотип: «Усім давно відомо, що жовтий текст на чорному тлі — максимально доступний та читабельний» (або жовтий на синьому, або будь-яка інша пара кольорів, просто найчастіше згадують жовтий). Але це все маячня, звернемось до науки.<\/p>\n<h3>Light Reflectance Value<\/h3>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Light_reflectance_value\">Light reflectance value<\/a> (LRV) — здатність поверхні певного кольору відбивати світло. Чим більше LRV, тим більше світла відбиває поверхня, тим яскравіший колір. Читабельність тексту напряму залежить від різниці LRV двох кольорів: тла і тексту. Більша різниця — більший контраст та розпізнаваність (legibility) тексту.<\/p>\n<p>Різниця (P) рахується за формулою:<\/p>\n<blockquote>\n<p>P = [(B1 — B2) \/ B1] x 100<\/p>\n<\/blockquote>\n<p>де B1 — значення LRV світлого кольору, B2 — темного.<\/p>\n<p>Наприклад, для <a href=\"http:\/\/a3.kyiv.ua\/projects\/street-signs\/\">київських адресних покажчиків<\/a> LRV синього кольору (RAL 5013) дорівнює 3, а LRV білого — 88. Тому за формулою отримуємо контраст кольорів <i>P = (88−3)\/88 × 100% = 97%<\/i>. І для порівняння розрахуємо різницю чорного та жовтого. Чорний — Traffic Black 9017 з LRV = 2 та найбільш «отрутний» жовтий RAL Sulful Yellow 71, з LRV = 71. Отримаємо <i>P = (71−2)\/71 × 100% = 97%<\/i>. Як бачите, різниці по розпізнаваності немає.<\/p>\n<p>Згідно зі <a href=\"https:\/\/web.archive.org\/web\/20110514214351\/http:\/\/www.access-board.gov\/adaag\/html\/adaag.htm\">стандартом<\/a> The Americans with Disabilities Act accessibility guidelines (ADAAG) для знаків з піктограмами та текстом рекомендований контраст повинен бути <i>більше ніж 70%<\/i>. Хоча це не жорстке обмеження, для деяких кольорів 60-70% також працює непогано.<\/p>\n<blockquote>\n<p>On signage with words or pictograms The Americans with Disabilities Act accessibility guidelines recommend a light reflectance value of 70%, but this is not a strict requirement. Several other color combinations in the 60-70% range also work well.<\/p>\n<\/blockquote>\n<p>В Україні доступність регулює стандарт ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища» (ISO 21542 2011, IDT). У стандарті також використовуються розрахунки різниці LRV. Для тексту рекомендована така ж <i>різниця у 70%<\/i>.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1811\" data-ratio=\"0.707421875\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-1.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-2.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-3.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-4.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-5.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-6.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-7.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-8.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-9.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-10.jpg\" width=\"1811\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Уривок з ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища»<\/div>\n<\/div>\n<h3>Як розрахувати LRV<\/h3>\n<p>Простий калькулятор є у <a href=\"http:\/\/asisignage.com\/doc-resource\/lrv-calculator\/\">Asi Signage<\/a>. Але у них замало відтінків і не зовсім ясно, яким реальним кольорам в палітрах RAL чи Pantone вони відповідають.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-asi.png\" width=\"2560\" height=\"1600\" alt=\"\" \/>\n<\/div>\n<p>Приблизні значення LRV для реальних палітр RAL, Pantone та інших можна знайти на сайті <a href=\"https:\/\/www.e-paint.co.uk\/Lab_values.asp\">e-paint.co-uk<\/a>.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2416\" data-ratio=\"1.4950495049505\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-1.png\" width=\"2416\" height=\"1616\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-2.png\" width=\"2560\" height=\"1600\" alt=\"\" \/>\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-3.png\" width=\"1554\" height=\"876\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Саме значення з цього сайту лягли в основу сайту для порівняння контрасту кольорів реальних палітр (RAL, Pantone та інших) — <a href=\"http:\/\/color.a3.kyiv.ua\">color.a3.kyiv.ua<\/a>. Працює не ідеально, але основні висновки можна робити.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-color-a3.png\" width=\"2540\" height=\"1868\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Контраст кольорів реальних палітр<\/div>\n<\/div>\n<p>Ще один приклад від <a href=\"http:\/\/designworkplan.com\/design\/signage-and-color-contrast.htm\">Designworkplan<\/a> зі зрозумілою матрицею для порівняння основних кольорів.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-01.png\" width=\"720\" height=\"400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-02.png\" width=\"720\" height=\"400\" alt=\"\" \/>\n<\/div>\n<p><i>UPD:<\/i> інженер Віктор Петрук <a href=\"https:\/\/www.facebook.com\/victor.petruk.9\/posts\/1826396320749903\">правильно помітив<\/a>, що на попередній картинці деякі пари кольорів з низькою різницею контрасту читабельніші за інші пари з більшою різницею. Він порівнює кольори з картинки через яскравість у RGB. Але не коректно порівнювати RBG та LRV. <a href=\"https:\/\/uk.wikipedia.org\/wiki\/RGB\">RGB<\/a> — адитивна колірна модель, яка відтворює зображення за допомогою випромінення світла екрану. LRV — параметр, що описує яскравість світла, яке відбивається від кольорової поверхні (це більше відноситься до субтрактивної моделі, як CMYK). Це все одно, що порівнювати фінальний вигляд картинки на моніторі та на паперовому носії.<\/p>\n<h3>Нюанси сприйняття шрифтів<\/h3>\n<p>За розрахунками різниці LRV контраст чорного на білому та білого на чорному може бути однаковим. Але сприйняття шрифтів працює по-різному: білий текст на темному тлі візуально здається трохи жирнішим, ніж чорний на білому.<\/p>\n<p>Наприклад, шрифт <a href=\"http:\/\/www.fsmillbank.com\/#\/typeface-versions\">FS Millbank<\/a> має дві версії: для світлого тла та для темного (із врахуванням внутрішньої підсвітки знаків).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-fs-millbank.png\" width=\"1468\" height=\"1230\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт FS Millbank<\/div>\n<\/div>\n<p>Можна це враховувати при підборі шрифтів для проекту.<\/p>\n<h2>P.S.<\/h2>\n<p>Ще один ненауковий метод визначення контрастності кольорів — переведення зображення у чорно-білий режим. У такому виді ми відкидаємо будь-який колір та дивимось лише на контраст яскравості. Більша різниця яскравості — краща розпізнаваність.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-01-grayscale.png\" width=\"720\" height=\"400\" alt=\"\" \/>\n<\/div>\n<h2>P.P.S.<\/h2>\n<p><a href=\"http:\/\/contrast-ratio.com\/\">Contrast-ratio.com<\/a> —інструмент для перевірки контрасту для екранів<\/p>\n",
            "date_published": "2019-01-31T18:24:00+02:00",
            "date_modified": "2021-03-27T18:25:03+02:00",
            "tags": [
                "дальтонізм",
                "дизайн",
                "доступність"
            ],
            "image": "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-1-adobe.png",
            "_date_published_rfc2822": "Thu, 31 Jan 2019 18:24:00 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "24",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-1-adobe.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-2-colororacle.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-3-sim.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-4-Stark.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/daltonism-5-Figma-ColorBlind.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-1.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-2.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-3.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-4.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-5.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-6.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-7.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-8.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-9.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-dstu-10.jpg",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-asi.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-1.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-2.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-e-paint-3.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-color-a3.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-01.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-02.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-fs-millbank.png",
                    "https:\/\/blog-archive.alexkolodko.com\/pictures\/contrast-arthur-passini-color-wayfinding-01-grayscale.png"
                ]
            }
        }
    ],
    "_e2_version": 4134,
    "_e2_ua_string": "Aegea 11.3 (v4134)"
}