Sprawdzanie kontrastu palety kolorów (do 12 kolorów)

Zwykłe sprawdzanie kontrastu odpowiada na jedno pytanie o jedną parę. Marka ma kilkanaście kolorów i dziesiątki par. Wpisz paletę, do 12 kolorów, a tabela pokaże współczynnik kontrastu WCAG każdej pary: które pary są bezpieczne dla tekstu, a które nadają się tylko do dużego tekstu, ikon i ramek. Obliczenia odbywają się w Twojej przeglądarce; kolory nie są nigdzie wysyłane.

Jak wpisać kolory

Jeden kolor w wierszu albo oddzielone średnikami. Nazwa przed dwukropkiem jest opcjonalna: Primary: #2f47d9. Przyjmujemy hex (także z kanałem alfa), rgb(), rgba(), hsl(), hsla(), nazwy kolorów, na przykład navy, oraz zmienne CSS skopiowane z arkusza stylów, takie jak --brand-500: #2f47d9;. Wiersz, którego nie da się odczytać, pojawia się pod polem, więc literówka nie zgubi koloru po cichu. Półprzezroczyste kolory są najpierw mieszane z tłem.

Jak czytać macierz

Wiersze to kolory tekstu, kolumny to tła. Każda komórka pokazuje miniaturę pary, współczynnik i najwyższy osiągnięty poziom:

Współczynnik liczymy wzorem WCAG 2.x i obcinamy, a nie zaokrąglamy, do dwóch miejsc: 4,49 to nie 4,5. Każda komórka ma też tekst dla czytników ekranu („Ink na Paper: 16,1 : 1, AAA”), a tabela ma nagłówki wierszy i kolumn, więc można ją czytać komórka po komórce z klawiatury.

Filtr i eksport

Wybierz poziom, od którego para liczy się jako zaliczona, i zaznacz „Pokaż w macierzy tylko zaliczone pary”, by ukryć resztę. Lista pod macierzą zawiera zaliczone pary, najlepsze na początku. Kopiuj jako zmienne CSS daje paletę jako właściwości niestandardowe z zaliczonymi parami w komentarzu; Kopiuj jako tabelę Markdown daje zaliczone pary na stronę systemu projektowego lub do pull requesta.

Czego macierz nie powie

• Stanów elementów. Kolory po najechaniu, fokusie, kliknięciu, odwiedzonego linku i stanu wyłączonego to osobne pary; dopisz je w osobnych wierszach.
• Nierównego tła. Tekst na zdjęciu lub gradiencie sprawdź w najjaśniejszym i najciemniejszym miejscu w sprawdzaniu kontrastu, które potrafi też pobrać kolory z obrazu.
• Znaczenia przekazanego samym kolorem. Czerwony błąd i zielony sukces o tej samej jasności wyglądają podobnie dla wielu osób. WCAG wymaga jeszcze jednej wskazówki, na przykład ikony lub tekstu (1.4.1 Użycie koloru).
• Kontrastu na prawdziwych stronach. Paleta, która przechodzi, może być źle użyta. Przetestuj działającą stronę w sprawdzaniu WCAG.

To automatyczne obliczenie, a nie pełny audyt, i nie porada prawna.

Jak zbudować paletę, która przechodzi

Zacznij od dwóch punktów oparcia: ciemnego atramentu na tekst i jasnego papieru na tła. Sprawdź kolor marki względem obu, bo większość kolorów marki przechodzi tylko z jednej strony. Dla każdego koloru marki przygotuj ciemniejszy odcień na tekst na bieli i jaśniejszy na tekst na ciemnym tle. Zostaw odcień 3 : 1 na ramki i ikony, bo kontrast elementów nietekstowych dotyczy ramek pól i pierścieni fokusu. Liczy się nie to, jaka para jest dozwolona w teorii, lecz do jakich par motyw dochodzi w praktyce.

W EAA i niemieckiej ustawie BFSG norma EN 301 549 przejmuje kontrast WCAG poziomu AA, więc projektuj pod 4,5 : 1 i 3 : 1. AAA nie jest wymagane. Pandus sprawdza kolory, których Twoje strony naprawdę używają, na każdej stronie, co tydzień.

Najczęstsze pytania

Ile kolorów mogę wpisać?

Do 12. Przy 12 kolorach macierz ma 132 pary. Jeśli wpiszesz więcej, użyjemy pierwszych 12 i powiemy, ile pominięto.

Jakiego wzoru używa macierz?

Współczynnika kontrastu WCAG 2.x, (L1 + 0,05) / (L2 + 0,05), liczonego na luminancji względnej obu kolorów i obciętego do dwóch miejsc. Na ten wzór powołują się kryteria WCAG 1.4.3, 1.4.6 i 1.4.11.

Czy moje kolory trafiają na serwer?

Nie. Macierz jest liczona w Twojej przeglądarce, nic o palecie nie jest zapisywane ani wysyłane.

Dlaczego para różni się w obu kierunkach?

Dla kolorów pełnych się nie różni: A na B daje ten sam współczynnik co B na A. Macierz pokazuje jednak oba wiersze, byś szybko znalazł kolor tekstu. Przy kolorach półprzezroczystych kierunki się różnią, bo kolor tekstu jest mieszany z tłem.

Czy paleta, która przechodzi, czyni moją stronę dostępną?

Nie. Oznacza tylko, że te pary mają dość kontrastu. To, czy strony używają ich poprawnie, i całą resztę WCAG trzeba nadal sprawdzić.