freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d778e367417b2b2512aab	Improve Readability with High Contrast Text	0		تحسين إمكانية القراءة مع نص عالي التباين

Description

قد يؤدي التباين المنخفض بين ألوان المقدمة والخلفية إلى صعوبة قراءة النص. يحسن التباين الكافي من سهولة قراءة المحتوى الخاص بك ، ولكن ماذا يعني "كاف" بالضبط؟ توصي إرشادات الوصول إلى محتوى الويب (WCAG) بنسبة تباين تبلغ 4.5 إلى 1 على الأقل للنص العادي. يتم حساب النسبة بمقارنة قيم النصوع النسبي للونين. يتراوح هذا من 1: 1 لنفس اللون ، أو بدون تباين ، إلى 21: 1 للون الأبيض في مقابل أسود ، وهو أقوى تباين. هناك العديد من أدوات التحقق من التباين المتاحة عبر الإنترنت والتي تحسب هذه النسبة لك.

Instructions

يتميز اختيار Camper Cat للنص باللون الرمادي الفاتح على خلفية بيضاء لمشاركته الأخيرة في المدونة بنسبة تباين تبلغ 1.5: 1 ، مما يجعل من الصعب قراءتها. قم بتغيير color النص من الرمادي الحالي ( #D3D3D3 ) إلى اللون الرمادي الداكن ( #636363 ) لتحسين نسبة التباين إلى 6: 1.

Tests

tests:
  - text: يجب تغيير التعليمات البرمجية الخاصة بك <code>color</code> النص الخاص <code>body</code> إلى الرمادي الداكن.
    testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
  - text: التعليمات البرمجية لا ينبغي تغيير <code>background-color</code> لل <code>body</code> .
    testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'

Challenge Seed

<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>

Solution

// solution required

3.3 KiB Raw Blame History