Files
freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md

3.9 KiB
Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
587d778e367417b2b2512aab Як покращити читабельність за допомогою контрасного тексту 0 https://scrimba.com/c/cKb3nCq 301017 improve-readability-with-high-contrast-text

--description--

Низький контраст між кольорами тексту та фону може ускладнити читання тексту. Достатня контрастність покращує читабельність вмісту, але що саме означає "достатня"?

В рекомендаціях Web Content Accessibility Guidelines (WCAG) пропонується виставляти коефіцієнт контрастності від 4.5 до 1 для звичайного тексту. Коефіцієнт вираховується шляхом порівняння відносної яскравості двох кольорів. Співвідношення варіюється від 1:1 для одного й того ж кольору (без контрасту) до 21:1 для білого на фоні чорного (найбільший контраст). Існує багато онлайн-засобів, які перевіряють контрастність та розраховують для вас цей коефіцієнт.

--instructions--

Світло сірий текст на білому фоні в останньому пості блогу Кота Кампера зі співвідношенням коефіцієнта контрастності 1.5:1 ускладнює прочитання тексту. Змініть color тексту з наявного сірого (#D3D3D3) на темніший сірий (#636363), щоб покращити коефіцієнт контрастності до 6:1.

--hints--

Ваш код повинен змінити текст color для body на темно-сірий.

assert($('body').css('color') == 'rgb(99, 99, 99)');

Ваш код не повинен міняти колір фона background-color для body.

assert($('body').css('background-color') == 'rgb(255, 255, 255)');

--seed--

--seed-contents--

<head>
  <style>
  body {
    color: #D3D3D3;
    background-color: #FFF;
  }
  </style>
</head>
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>
    <h2>A Word on the Recent Catnip Doping Scandal</h2>
    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
  </article>
</body>

--solutions--

<head>
  <style>
  body {
    color: #636363;
    background-color: #FFF;
  }
  </style>
</head>
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>
    <h2>A Word on the Recent Catnip Doping Scandal</h2>
    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
  </article>
</body>