freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-hi...

---
id: 587d778e367417b2b2512aab
title: 使用高对比度文本提高可读性
challengeType: 0
videoUrl: 'https://scrimba.com/c/cKb3nCq'
forumTopicId: 301017
dashedName: improve-readability-with-high-contrast-text
---

# --description--

低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？

Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对于相同颜色来说，对比度是 1 : 1，即无对比度；白色与黑色拥有最高对比度 21 : 1。其他颜色间的对比度都在这个范围之内。网上有很多可以帮助你计算对比度的工具。

# --instructions--

Camper Cat 为他的博客选择了白色背景和浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的 `color` 从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。

# --hints--

应该将 `body` 的 `color` 修改为深灰色。

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

不应修改 `body` 的 `background-color`。

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

# --seed--

## --seed-contents--

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

```html
<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>
```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
 								id: 587d778e367417b2b2512aab
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								title: 使用高对比度文本提高可读性
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								challengeType: 0
-												fix(i18n): update Chinese translation of applied accessibility (#37920)



											
										
										
											2020-02-11 09:06:41 +00:00
+								videoUrl: 'https://scrimba.com/c/cKb3nCq'
 								forumTopicId: 301017
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								dashedName: improve-readability-with-high-contrast-text
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --description--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对于相同颜色来说，对比度是 1 : 1，即无对比度；白色与黑色拥有最高对比度 21 : 1。其他颜色间的对比度都在这个范围之内。网上有很多可以帮助你计算对比度的工具。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --instructions--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								Camper Cat 为他的博客选择了白色背景和浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的 `color` 从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --hints--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								应该将 `body` 的 `color` 修改为深灰色。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('body').css('color') == 'rgb(99, 99, 99)');
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								不应修改 `body` 的 `background-color`。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('body').css('background-color') == 'rgb(255, 255, 255)');
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												fix(i18n): update Chinese translation of applied accessibility (#37920)



											
										
										
											2020-02-11 09:06:41 +00:00
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								# --seed--
 								## --seed-contents--
 								```html
 								<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>
 								```
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --solutions--
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								```html
 								<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>
 								```