Skip to content

Instantly share code, notes, and snippets.

@obenjiro
Created April 16, 2019 09:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save obenjiro/3d303bf7096ea8d546221651469ff775 to your computer and use it in GitHub Desktop.
Save obenjiro/3d303bf7096ea8d546221651469ff775 to your computer and use it in GitHub Desktop.
Про проверку контраста и WCAG

[Про контраст]

Есть три уровня: A - все плохо AA - сойдет AAA - все супер

Плагины для браузера

https://chrome.google.com/webstore/detail/wcag-contrast-checker/plnahcmalebffmaghcpcmpaciebdhgdf/related (мой любимый) https://chrome.google.com/webstore/detail/wcag-accessibility-audit/kpfleokokmllclahndmochhenmhncoej https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

Сайты для проверки

http://accessible-colors.com https://webaim.org/resources/contrastchecker/ https://contrastchecker.com

Инструменты для дизайнеров

https://github.com/bryanberger/sketch-wcag https://twitter.com/szilvaizsolt/status/1117423057763799043 (в фигме - по умолчанию)

Есть специфийкация

https://www.w3.org/TR/WCAG20/

И есть подробное обьяснение части спеки про контраст

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

В кратце - для крупного текста соотношение контрастности 3:1 для более мелкого 4.5:1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment