Wyszukiwarka kontrastów

Co to jest Wyszukiwarka kontrastów?

Wyszukiwarka kontrastów jest narzędziem, które oblicza kontrast pomiędzy dwoma kolorami (tłem i pierwszym planem) i sprawdza, czy kontrast jest prawidłowy. Gdy kontrast nie jest prawidłowy, Wyszukiwarka sugeruje zestaw poprawnych kontrastów kolorów.

Wyszukiwarka kontrastów jest przeznaczona do użytku przez projektantów stron internetowych, programistów oraz specjalistów ds. dostępności cyfrowej

Pomoc / Jak użyć tego narzędzia?

Interfejs Wyszukiwarki kontrastów to formularz z pięcioma polami obowiązkowymi.

• Kolor tekstu
• Kolor tła
• Minimalny współczynnik
• Kolor do edycji
• Daj mi

Kolor tekstu / Kolor pierwszoplanowy

To kolor tekstu.

Kolor tła

To jest kolor drugoplanowy, kolor tła.
To pole działa tak samo jak pole koloru tekstu.

Minimalny współczynnik

Trzy możliwe wartości to: 3, 4.5 lub 7.

Który współczynnik wybrać? Zależy to od następujących elementów:

• Wymagany poziom dostępności: AA lub AAA.
• Rozmiar tekstu.
• Czy tekst jest pogrubiony, czy nie

Poziom AA

Dwa elementy (rozmiar i pogrubienie) dają cztery kombinacje:

• Tekst niepogrubiony + rozmiar tekstu < 24px: współczynnik = 4.5
• Tekst niepogrubiony + rozmiar tekstu > 24px: współczynnik = 3
• Tekst pogrubiony + rozmiar tekstu< 19px: współczynnik = 4.5
• Tekst pogrubiony + rozmiar tekstu> 19px: współczynnik = 3

Poziom AAA

Dla poziomu AAA logika jest taka sama, tylko stosunek zwiększa się w następujący sposób :

• Współczynnik 4.5 zastępujemy współczynnikiem 7
• Współczynnik 3 zastępujemy współczynnikiem 4.5

Wyjaśnienie kwestii rozmiaru tekstu

• Kryterium 19px można rozumieć jako równoważne rozmiarom 14pt lub 120%, albo 1.2em.
• Kryterium 24px można rozumieć jako równoważne rozmiarom 18pt lub 150%, albo 1.5em.

Aby w pełni i wyczerpująco zrozumieć, jak interpretować rozmiar tekstu, należy przeczytać definicję dużego tekstu z WCAG.

Wszystkie szczegóły dotyczące współczynnika kontrastu

• WCAG 2.1 Glossary - Contrast Ratio
• WCAG 2.1 Glossary - Relative luminance
• WCAG 2.1 - Contrast (Minimum): success criteria 1.4.3 (AA)
• WCAG 2.1 - Understanding Success Criterion 1.4.3 Contrast (Minimum)
• WCAG 2.1 - Contrast (Enhanced): success criteria 1.4.6 (AAA)
• WCAG 2.1 - Understanding Success Criterion 1.4.6 Contrast (Enhanced)
• WCAG 2.1 - Non-text Contrast: success criteria 1.4.11 (AAA)
• WCAG 2.1 - Understanding Success Criterion 1.4.11 Non-text Contrast

Kolor do edycji

Może to być albo kolor tekstu, albo kolor tła. Domyślnie jest to kolor tekstu.

Kolor, który wybierzesz, będzie modyfikowany aż do momentu, gdy znajdziemy właściwy kolor. Drugi kolor nie zmieni się.

Daj mi / Algorytmy

Odpowiednie kolory i bardzo zbliżone do koloru początkowego

To jest domyślny algorytm. Oferuje opcje kolorystyczne najbardziej zbliżone do koloru początkowego. (Odległość koloru jest obliczana na podstawie matematycznej, która może się różnić od punktu widzenia projektanta.)

Dla niektórych kombinacji kolorystycznych, algorytm może nie dać żadnego rezultatu ; w takim przypadku, użyj drugiego algorytmu.

Szeroki zakres odpowiednich kolorów

Jest to algorytm zapasowy, do wykorzystania w przypadku, gdy pierwszy algorytm nie daje wyniku. Ale zaproponowane tu opcje kolorystyczne mogą różnić się (zdecydowanie) od koloru początkowego.

Pytania? Problemy?

Jeśli masz jakieeś problemy lub pytania dotyczące Wyszukiwarki kontrastów, skontaktuj się z nami:

• Formularz kontaktowy: LepszyWeb.pl
• E-mail: kontakt@lepszyweb.pl

Wnieś wkład do rozwoju Wyszukiwarki kontrastów

Każdy wkład jest mile widziany! Tłumaczenie, korekta, raport o błędach, nowa funkcja…
Zapraszamy do zabawy z kodem źródłowym, lub dyskusji na forum.