Skip to main content
LibreTexts - Ukrayinska

4.7: Оцінка кольорового контрасту

  1. Last updated
  2. Save as PDF
  • Page ID
    103682

    • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)

    Кольорова сліпота Симулятори

    Спробуйте це: Щоб відчути, як колірна сліпота впливає на здатність людей бачити колір, поекспериментуйте з Coblis - симулятором кольорової сліпоти.

    Тестери кольорового контрасту

    Швидкий пошук в Інтернеті «тест на контрастність кольорів» повинен викликати різні інструменти, які ви можете використовувати для перевірки контрастності. Тут ми згадаємо WebAim Color Contrast Checker, але якщо ви віддаєте перевагу іншому, ви можете додати його до свого інструментарію.

    Інструментарій: Закладка для перевірки кольорового контрасту WebAim та додайте його до свого інструментарію.

    Чому колірний контраст важливий

    Ви можете згадати з пристрою Вступ до WCAG 2.0, що Рекомендації WCAG 2.0 1.4.3 та 1.4.6 стосуються проблем доступності, пов'язаних з колірним контрастом. Ці два рекомендації представлені нижче. Зверніть увагу на коефіцієнти контрастності на кожному рівні (4, 5:1 та 3:1 на рівні AA та 7:1 та 4. 5:1 на рівні AAA для меншого та більшого тексту відповідно).

    1.4.3 Контрастність (мінімум): Візуальне представлення тексту та зображень тексту має коефіцієнт контрастності не менше 4, 5:1, за винятком наступного (Level AA):

    • Великий текст: Масштабний текст і зображення великомасштабного тексту мають коефіцієнт контрастності не менше 3:1
    • Випадкові: текст або зображення тексту, які є частиною неактивного компонента інтерфейсу користувача, які є чистим прикрасою, які нікому не видно або які є частиною зображення, що містить значний інший візуальний вміст, не мають вимог щодо контрасту.
    • Логотипи: текст, який є частиною логотипу або торгової марки, не має мінімальних вимог щодо контрасту.

    1.4.6 Контрастність (Enhanced): Візуальне представлення тексту та зображень тексту має коефіцієнт контрастності не менше 7:1, за винятком наступних (Level AAA):

    • Великий текст: Масштабний текст і зображення великомасштабного тексту мають коефіцієнт контрастності не менше 4, 5:1.
    • Випадкові: текст або зображення тексту, які є частиною неактивного компонента інтерфейсу користувача, які є чистим прикрасою, які нікому не видно або які є частиною зображення, що містить значний інший візуальний вміст, не мають вимог щодо контрасту.
    • Логотипи: текст, який є частиною логотипу або торгової марки, не має мінімальних вимог щодо контрасту.

    Деякі засоби перевірки доступності матимуть вбудовану оцінку кольорового контрасту (наприклад, aChecker), але інші — ні.

    Технічні:

    Існує багато оцінювачів кольорового контрасту, з яких ви можете вибрати для підтримки тестування контрастності (див. деякі пропозиції нижче). Використання будь-якого з цих інструментів вимагає збору колірних кодів з елементів, що оцінюються. Існує безліч способів знайти ці коди, хоча найпростішим є використання функції «Оглядати» браузера. Ви можете оглянути кольори в правій рамці, як показано на малюнку нижче.

    Скріншот firebug, з кольоровими кодами, виділеними на правій панелі.

    Малюнок: Огляньте панель, яка показує колірні коди на панелі «Стиль» праворуч
    Після того, як ви протестуєте кілька колірних комбінацій, ви швидко сформуєте «відчуття» для гарного контрасту та зможете швидко сканувати сторінку та визначити, де контрастність може бути недостатньою. Ви можете перевірити конкретні кольори, пов'язані з тими елементами, які ви визначили під час сканування. Однак існують інструменти, які оцінять всі кольори на сторінці (наприклад, aChecker) - це може бути кращим, якщо ви переглядаєте сайт, який, здається, має кілька проблем із контрастом.

    Щоб прогулятися по перевірці кольорового контрасту WebAim, перегляньте наступне відео:

    Відео: Перевірка кольорового контрасту

    Мініатюра вбудованого елемента «Перевірка кольорового контрасту»

    Елемент YouTube був виключений з цієї версії тексту. Ви можете переглянути його онлайн тут: https://pressbooks.library.ryerson.ca/pwaa/?p=1317

    Екран результатів анатомії кольорового контрасту

    На малюнку нижче ви можете побачити коди кольору переднього плану (#007ac6) та кольору фону (#ffffff), введені у відповідні поля. Нижче ви побачите статус відповідності для нормального та великого тексту, на рівні AA та Level AAA. У цьому випадку кольори контрастують досить добре, щоб передати рівень AA (4. 57:1), але для меншого тексту коефіцієнт контрастності не вдається на рівні AAA. Сайти повинні прагнути до контрасту рівня AA, але, якщо це можливо, спробуйте відповідати рівню AAA.

    Зверніть увагу на освітлення та затемнення посилань поруч із полем введення кольору. Ви можете натиснути їх (на тестовому майданчику), щоб відрегулювати кольори, щоб вони пройшли, а потім взяти отримані колірні коди та замінити існуючі коди, щоб налаштувати колір на сайті, що оцінюється, щоб він відповідав.

    Перевірка кольорового контрасту WebAim

    Малюнок: Перевірка кольорового контрасту WebAim

    Інші тестери контрасту

    Ось кілька інших тестерів кольорового контрасту, з якими ви можете поекспериментувати: