Responsive Web Design: Improved translate Avoid Colorblindness Issues by Using Sufficient Contrast (#19641)

This commit is contained in:
Gregory Gubarev
2018-10-27 17:38:22 +04:00
committed by GitHub
parent d32fe7a920
commit 746e8f5682

View File

@ -7,7 +7,7 @@ localeTitle: 'Избегайте проблем со слепотой, испо
---
## Description
<section id="description"> Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи экранного чтения не видят этого. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи цветного следа могли различать их. Предыдущие проблемы охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи Colorblind не могут отличить некоторые цвета от других - обычно в оттенке, но иногда и в легкости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и облегчения более легкого с помощью анализатора цветного контраста. Более темные цвета на цветном колесе считаются блюзом, фиалки, пурпуры и красные, тогда как более светлые цвета - апельсины, желтые, зеленые и сине-зеленые. </section>
<section id="description"> Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи экранного чтения не видят этого. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различием цветов, могли различать их. Предыдущие проблемы охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно в оттенке, но иногда и в легкости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и облегчения более легкого с помощью анализатора цветного контраста. Более темными цветами на цветном колесе считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый. </section>
## Instructions
<section id="instructions"> Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, легкость), изменив третий аргумент. Увеличьте значение светочувствительности <code>background-color</code> с 35% до 55% и уменьшите значение <code>color</code> яркости от 20% до 15%. Это улучшает контрастность до 5.9: 1. </section>