Top of this page.
Content starts here.

Анализатор на цветови контраст 1.0

Съдържание на страницата:

Що е анализатор на цветови контраст?

Анализаторът на цветови контраст е инструмент, чрез който може да се провери дали в комбинация основният и фоновият цвят имат достатъчно добър контраст. Начинът за определяне на цветовата видимост се базира на алгоритми, предложени от World Wide Web Consortium (W3C):

"Счита се, че два цвята имат добра видимост, ако разликите в яркостта и цвета са по–големи съответно от 125 и 500." Забележка: В своя онлайн инструмент за проверка на цветовия контраст, Hewlett Packard (HP) също използват алгоритмите на W3C, но предлагат стойността на цветовата разлика да е по–голяма от 400, което води до увеличаване броя на считаните за приемливи комбинации от основен и фонов цвят.

Формула за изчисление на цветова яркост

((стойност на Червено X 299) + (стойност на Зелено X 578) + (стойност на Синьо X 114)) / 1000 Яркостната разлика на основния цвят и фона трябва да е по–голяма от 125.
Забележка: Този алгоритъм е базиран на формулата за превръщане на стойности от RGB в YIQ. Стойността за яркост дава усещането за живост на даден цвят.

Формула за изчисление на цветова разлика

(maximum (стойност на Червено 1, стойност на Червено 2) – minimum (стойност на Червено 1, стойност на Червено 2)) + (maximum (стойност на Зелено 1, стойност на Зелено 2) – minimum (стойност на Зелено 1, стойност на Зелено 2)) + (maximum (стойност на Синьо 1, стойност на Синьо 2) – minimum (стойност на Синьо 1, стойност на Синьо 2)) Цветовата разлика на основния цвят и фона трябва да е по–голяма от 500.

нагоре

Приложение

Анализаторът на цветови контраст е особено полезен за определяне на четливостта на текста и на изображенията, представящи текст в уеб страница.

Съобразеност с точка 2.2 от Web Content Accessibility Guidelines 1.0

Точка 2.2 от WCAG 1.0 изисква:
комбинациите от основен и фонов цвят да имат достатъчно добър контраст, когато съдържанието се разглежда от хора със смущения в цветното виждане или се извежда на черно–бял екран.
Използвайте анализатора на цветови контраст, за да проверите видимостта на дадени цветови комбинации с алгоритъма, предложен от W3C.

нагоре

Начин на работа

Потребителският интерфейс е съставен от 4 менюта:
  1. Избор на цвят
  2. Резултати
  3. Резултати при смущения в цветното виждане
  4. Настройки и помощни менюта

1. Избор на цвят

Управленията за избор на цвят са разделени на 2 групи — група на основен и група на фонов цвят, като всяко управление разполага с 3 начина за избор на цвят.
потребителски интерфейс за избор на цвят

  1. Палитрата с цветове е достъпна чрез полето за избор. Използвайте я, за да изберете подходящи цветови комбинации.
    палитра с цветове
    Долната (малка) палитра с цветове съдържа 10 нюанса на избрания основен цвят (намира се горе вляво) при различни степени на прозрачност. Горният ред пресъздава прозрачност върху бял фон, а долният върху черен фон. В горния ред стойностите на прозрачност са съответно 100% непрозрачност, 75%, 50%, 25% и 10%. На долния ред стойностите започват от 85%, докато останалите са като горните. Тази палитра е подходяща за проверка на по–светлите или по–тъмните нюанси на основния цвят, което може да доведе до подобряване видимостта на избраната комбинация от цветове. Забележка: Тази възможност е вдъхновена от Color Palette Creator.
  2. Въвеждане на шестнадесетичната стойност на цвят в текстовото поле. Подходящо е, ако разполагате с шестнадесетичните стойности на цветовете, които искате да проверите.
    шестнадесетична стойност #000000
  3. Вземане на цвят директно от уеб страница (или където и да било от екрана) чрез цветовата сонда.
    бутон на цветова сонда
    Подходящо е за бързо вземане на проба, проверка и получаване на шестнадесетичната стойност на цвят. Когато бутонът на сондата за цвят е избран, около курсора се появява увеличена зона от екрана. Цветът на съдържанието, попадащо под върха на курсура, ще се появи в полето за избор на палитрата с цветове.
    Избирането на цвят с помощта на сондата става чрез ляв бутон на мишката или клавиша "enter". Шестнадесетичната стойност на избрания цвят се появява в текстовото поле и резултатите се обновяват, отразявайки яркостната и цветова разлика на избраната комбинация от цветове.
    Забележка: За прецизно позициониране на курсора използвайте стрелките на клавиатурата.

2. Резултати

Менюто с резултати е разделено на 2 групи — кратки и пълни. Кратките резултати посочват стойностите на яркостна и цветова разлика. В случай, че и двете стойности издържат проверката, ще се появи отметка. Ако някоя от двете стойности не издържи, ще се появи кръстче. Пълните резултати показват получените стойности при проверката, критерия и дали контрастът е достатъчен/недостатъчен.
Забележка: Текстът на кратките и пълни резултати може да бъде избран и копиран.

Меню с резултати

3. Резултати при смущения в цветното виждане

Ако отметнете полето "Покажи резултати при смущения в цветното виждане", ще разполагате с резултати при нормално зрение и 3 типа цветова недостатъчност — Протанопия, Деутеранопия и Тританопия.Резултати при смущения в цветното виждане
Забележка: Методът за определяне на цветовите трансформации за трите типа цветова недостатъчност е базиран на алгоритъм, описан от Hans Brettel, Francoise Vienot и John Mollon в статия от Journal of the Optical Society of America V14, #10 pp2647. Благодарности на любезните хора от Vischeck, които ни разрешиха да надникнем в кода на тяхната реализация на алгоритъма на Brettel.

4. Настройки и помощни менюта

Когато менюто "Винаги отгоре" е избрано, анализаторът на цветови контраст ще "седи" винаги над останалите прозорци. От менюто "Шрифт" може да промените използвания шрифт за текстовите етикети и съдържанието.
Забележка: Използването на някои шрифтове и големини може да доведе до орязване на част от съдържанието.

Изберете менюто "Помощ" , за да отворите документацията на анализатора на цветови контраст във вашия браузър. Забележка: Трябва да сте свързани с интернет, за да имате достъп до документацията.

нагоре

Клавиши за достъп


Клавиши за достъп на анализатора на цветови контраст
Действие Клавиш(и)
Отваряне на палитрата за основен цвят F9
Отваряне на палитрата за фонов цвят F10
Придвижване в палитрата стрелките или Tab
Активиране на сондата за основен цвят F11
Активиране на сондата за фонов цвят F12
Придвижване на сондата стрелките
Избиране на цвят чрез сондата или палитрата Enter

Условия за ползване:

Анализаторът на цветови контраст е свободно разпространяван софтуер под Creative Commons лиценз.

нагоре

Изтегляне

Забележка:
Анализаторът на цветови контраст не съдържа какъвто и да било adware или spyware.

Системни изисквания

  • Microsoft Windows
    • Тестван под Windows 2000 & XP
Изтеглете и разархивирайте анализатора на цветови контраст. Стартирайте анализатора на цветови контраст от файла Colour_Contrast_Analyser.exe.

нагоре

За програмата

Анализаторът на цветови контраст е разработен от JUn от wrong HTML.
в сътрудничество със Steve Faulkner. Разработката е вдъхновена от Анализатора на цветови контраст на Juicy Studio, инструмента за проверка на цветови контраст на HP и програмата за проверка на цветова видимост на Chris Ridpath от Университета в Торонто.

Благодарности към Gez Lemon от Juicy Studio за разрешението за ползване на информацията от неговия Анализатор на цветови контраст и препоръките/коментарите на Andrew Arch и Sofia Celic.

Преводи

За контакти пишете на:

нагоре

Articles:

Trenton Moss from Webcredible: Using the Web Accessibility Toolbar

Steven Faulkner from AIS: Using the AIS Web Accessibility Toolbar

Just Released:

Juicy Studio - Luminosity Contrast Ratio Analyser online service.

Tool Internationalisation

If you're interested in contributing to the translation and localisation of our tools, please contact: Steve Faulkner [AIS]
faulkner.steve@gmail.com

Tool Customisation

We develop customised versions of our tools to suit the web accessibility testing requirements of Government, Educational, Corporate and Not for Profit organisations.
Contact: Steve Faulkner [AIS] faulkner.steve@gmail.com

Content of this page ends here. back to top.