Kontrast kolorów na stronach internetowych
Odpowiedni kontrast kolorów treści do tła sprawia, że postrzegają te treści także osoby słabowidzące.
Ogólnie omawiamy ten temat w artykule Kontrast kolorów (jako jeden z tematów o elementach, które tworzą dostępność cyfrową).
Poziom kontrastu
Minimalny kontrast treści do tła powinien wynosić:
- 4,5:1 — dla tekstu;
- 3:1 — dla dużego tekstu;
- 3:1 — dla istotnych treści graficznych (np. ramka pola formularza, wykres, ikona będąca przyciskiem).
Ocena poziomu kontrastu
Jest wiele narzędzi, którymi możesz sprawdzić kontrast w zestawieniu kolorów. Mogą być one funkcją w programie graficznym lub oddzielnym narzędziem. Na przykład:
- WebAIM Color Contrast Checker to internetowe narzędzie, którym sprawdzisz kontrast pomiędzy dwoma kolorami. Możesz wprowadzać wartości kolorów w różny sposób (np. wartość RGB, pobrać kolor za pomocą tzw. pipety) oraz płynne manipulować tymi kolorami. To rozwiązanie jest też elementem popularnego narzędzia do automatycznej analizy dostępności cyfrowej WAVE. Możesz nim szybko identyfikować miejsca na danej podstronie, w których kontrast kolorów jest poniżej wymaganego minimum.
- Color Contrast Analyzer od TPGI to oddzielna aplikacja do sprawdzania kontrastu dowolnych dwóch kolorów. Możesz z niej korzystać zarówno na komputerze z systemem Windows jak i macOS. Zbadasz nią kontrast nie tylko na stronach internetowych, ale także w dokumentach, prezentacjach, systemach czy programach. Jest szczególnie przydatna, aby sprawdzać kolory w różnych aplikacjach, w tym w dokumentach lub oprogramowaniu, a nie tylko na stronach internetowych. Podobnie jak w rozwiązaniu od Webaim, możesz wprowadzać wartości kolorów w różny sposób.