Ile razy odwiedziliśmy stronę internetową, na której nie możemy nic przeczytać, albo korzystaliśmy z aplikacji z okropną kombinacją kolorów? Z punktu widzenia dostępności wybór złej palety lub proporcji kontrastu może zrujnować każdą ideę czytelności, ale portal OddContrast pomaga nam znaleźć właściwe wartości, oparte na wersji 2 standardu WCAG.

OddContrast: jak zoptymalizować kontrast w projektach webowych
Jak zoptymalizować kontrast

Jeśli kierujemy się definicją standardu WCAG w wersji 2 (znanego również jako Wytyczne dotyczące dostępności treści internetowych), „kontrast” jest miarą różnicy „postrzeganej jasności” między dwoma kolorami, wyrażoną jako proporcja lub ratio. Na przykład czerwony tekst (#ff0000) na białym tle (#ffffff) ma proporcję 4:1. Jeśli zmienimy tekst na niebieski (#0000ff), proporcja wzrośnie do 8,59:1 i będzie można go lepiej przeczytać. Wreszcie standard czarnego tekstu na białym tle ma proporcję 21:1. Co najciekawsze? Proporcja pozostaje nienaruszona, jeśli odwrócimy kolory.

Dlaczego to ważne? Ponieważ w wielu przypadkach stosuje się kombinacje kolorów o bardzo złej proporcji, a tekst staje się nieczytelny. Jako ktoś, kto już był zmuszony powiększyć rozmiar czcionek na swoim komputerze, rozumiem bardziej niż kiedykolwiek, jak ważny jest dobry kontrast. I ten pomysł prowadzi nas do OddContrast, portalu specjalnie zaprojektowanego do obliczania proporcji kontrastu w witrynach, usługach i/lub aplikacjach dostępności.

Optymalizuj kontrast swoich projektów za pomocą OddContrast

OddContrast: jak zoptymalizować kontrast w projektach webowych
Pamiętaj, aby zmienić format na wygodniejszy dla siebie

Na stronie nie trzeba robić zbyt wiele, aby w pełni ją wykorzystać: Wybieramy format reprezentujący kolory (dostępnych jest osiem, w tym HEX i sRGB), a następnie regulujemy suwaki dla koloru głównego i koloru tła, aż uzyskamy „zaliczenie” w interesujących nas przypadkach. OddContrast definiuje jako normalne proporcje 4,5:1 dla standardowego tekstu i 3:1 dla dużego tekstu, natomiast zoptymalizowany kontrast mówi nam odpowiednio o 7:1 i 4,5:1. Z drugiej strony, duży tekst ma co najmniej 24px przy normalnej wadze i co najmniej 19px w przypadku pogrubienia.

OddContrast: jak zoptymalizować kontrast w projektach webowych
„Czerń i biel” sprawdza się we wszystkich przypadkach, ale proporcja nie zmieni się, jeśli je odwrócimy

Na koniec, OddContrast nie pretenduje do bycia absolutnym właścicielem prawdy. W rzeczywistości nie potrzebujemy dobrej proporcji we wszystkich przypadkach, ale różnica między złą a dobrą kombinacją kolorów jest zauważalna. Spróbuj!

Oficjalna strona: Kliknij tutaj