diff --git a/collections/_perspective-videos/contrast.zh-hans.md b/collections/_perspective-videos/contrast.zh-hans.md new file mode 100644 index 00000000000..c86aa474363 --- /dev/null +++ b/collections/_perspective-videos/contrast.zh-hans.md @@ -0,0 +1,151 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: "良好的颜色对比度" +nav_title: "良好的颜色对比度" +lang: zh-hans # Change "en" to the translated-language shortcode +last_updated: 2024-07-15 # Keep the date of the English version +order: 2 + +translators: +- name: "金凯" + link: "https://github.com/JinMokai" +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + label: wai-perspective-videos + +permalink: /perspective-videos/contrast/zh-hans # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /perspective-videos/contrast/ # Do not change this + +resource: + ref: /perspective-videos/ # Do not change this + +changelog: /perspective-videos/changelog/ # Do not change this +acknowledgements: /perspective-videos/acknowledgements/ # Do not change this + +description: 关于具有良好对比度的无障碍网络色彩的视频短片--什么是无障碍网络色彩、谁依赖于无障碍网络色彩以及实现无障碍网络色彩需要做些什么。 +image: /content-images/perspective-videos/contrast.jpg + +# In the footer below: +# Do not change the dates +# Do not translate or change ACKNOWLEDGEMENTS +# Translate the other words below. +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +
编辑兼项目负责人: Shadi Abou-Zahra。 由欧盟委员会共同资助的 WAI-DEV 项目支持下,教育与外联工作组 (EOWG) 开发。在福特基金会的支持下更新。致谢。 +--- + +网络无障碍对残疾人至关重要,对所有人都有用。了解无障碍环境的影响以及在各种情况下为每个人带来的益处。 + +## 视频中的良好的颜色对比度 +{:#film.no-display} + +{% include video-player-data.html + video-id="contrast" + yt-id="Hui87z2Vx8o" + yt-id-ad="a9kNUv6N8Rk" +%} + +本视频信息以[附有视觉描述的文本记录](#transcript)的形式提供。 + +## 什么是“良好的颜色对比度”? +{:#what} + +颜色必须具有足够的对比度,例如,文本颜色和背景颜色之间(技术上叫 亮度对比度)。这包含文本在图像、图标、按钮上。此外,交互式元素、图表、地图和其他类型内容上用于传达信息的颜色也必须区分开来。 + +## 谁依赖这个功能? +{:#who} + +- 对比敏感度低的人,这在老年人中很常见。 +- 无法区分特定颜色的人(通常称为 “色盲”)。 + +## 有哪些其他的好处? +{:#others} + +- 内容可在不同的照明条件下工作,如阳光和眩光。 +- 内容更容易被所有人阅读,包括那些没有特定视觉障碍的人。 + +## 怎样才能做到这一点? +{:#action} + +选颜色时提供足够的对比度。有一些工具可以帮助检查和选择合适的颜色组合。这最好是在早期设计阶段和选择调色板时进行。有些人需要高对比度,有些则对亮度敏感,需要[调整颜色](/perspective-videos/customizable/). + +## 学习更多 +{:#resources} + +- **无障碍原则:** + - [内容更容易看到和听到](/fundamentals/accessibility-principles/#distinguishable) +- **开始:** + - [在前景色和背景色提供足够的对比度](/tips/designing/#provide-sufficient-contrast-between-foreground-and-background) +- **简单检查:** + - [对比度(“色彩对比度”)](/test-evaluate/preliminary/#contrast) +- **用户故事:** + - [Lee,无法区分某些颜色(色盲)的网购者](/people-use-web/user-stories/archived/#shopper) + - [Yun,患有低视力、手颤和轻度短期记忆丧失的退休人员](/people-use-web/user-stories/archived/#retiree) +- **用户需要:** + - [低视力者无障碍要求](https://www.w3.org/TR/low-vision-needs/) +- **网页内容无障碍导则([WCAG概述](/standards-guidelines/wcag/)):** + - [与 “对比”有关的成功标准](https://www.w3.org/WAI/WCAG21/quickref/?tags=contrast) +- **移动适用性:** + - [仅用颜色传递信息](/standards-guidelines/shared-experiences/#color) + +## 附有视觉描述的文本记录 {#transcript} + +
音频 | +视觉 | +
---|---|
网络无障碍视角: 具有良好对比度的颜色 | +网络无障碍视角: + 具有良好对比度的颜色 |
+
伟大的设计往往让人几乎感觉不到它的存在。 | +标有方向的指示牌。一位女士正在街上开心地散步。 | +
但要让事情变得混乱和令人沮丧,并不需要太多的东西。 | +标志的对比度变差。这位女士现在看起来很困惑。 | +
选择对比度差的颜色会使导航、阅读和交互变得非常苦恼。 | +她看着手机上的导航应用程序。 | +
良好的设计意味着前景背景和颜色之间要有足够的对比度。这不仅包括文字和图片,还包括链接、图标和按钮。 | +该程序有一个对比度较低的按钮,它可以变为清晰的按钮。 | +
如果它重要到足以被人看到,那么它就必须清晰明了。 + 这对于对比敏感度低的人来说至关重要。 + 随着年龄的增长,这种情况越来越常见。 |
+ 一位坐在沙发上的老人正在看平板电脑。他去读手机上的一条信息。 | +
良好的颜色使得网站,应用程序能够在更多情况下更容易使用。例如不同的光照条件下。 | +阳光照在手机上,但文字依然清晰可读。 | +
网络无障碍: 对某些人必不可少,对所有人都有用. | ++ |
请访问 w3.org/WAI/perspectives,了解有关具有良好对比度的颜色的更多信息 | +请访问 + w3.org/WAI/perspectives + 了解更多 + 具有良好颜色对比度的信息 + W3C 无障碍网页倡议徽标 |
+