WCAG 1.4.3: Kontrast (minimalny)

Co Oznacza Ta Zasada

WCAG 1.4.3 — Kontrast (minimalny) to kryterium sukcesu na poziomie AA w ramach Wytycznej 1.4 (Rozróżnialne) Wytycznych dotyczących dostępności treści internetowych 2.2. Wymaga ono, aby wizualna prezentacja tekstu i obrazów tekstu utrzymywała wystarczający współczynnik kontrastu luminancji względem tła, tak aby osoby z umiarkowanie słabym wzrokiem mogły czytać treść bez polegania na technologiach wspomagających zwiększających kontrast.

Wymagane współczynniki kontrastu są następujące. Zwykły tekst — każdy tekst mniejszy niż 18 punktów (około 24 piksele CSS) lub 14 punktów pogrubiony (około 18,67 pikseli CSS) — musi osiągać współczynnik kontrastu co najmniej 4,5:1. Duży tekst, zdefiniowany jako tekst o wielkości co najmniej 18 punktów w zwykłej grubości lub 14 punktów w pogrubieniu, wymaga minimalnego współczynnika kontrastu 3:1. Te same progi dotyczą obrazów tekstu: rastrowe lub wektorowe obrazy, które renderują czytelne znaki, również muszą spełniać te współczynniki względem dowolnego sąsiadującego koloru tła.

Współczynnik kontrastu oblicza się przy użyciu wzoru luminancji względnej zdefiniowanego w specyfikacji WCAG. Luminancja względna (L) jest obliczana z wartości kolorów sRGB po korekcji gamma, a współczynnik wyraża się jako (L1 + 0,05) / (L2 + 0,05), gdzie L1 to jaśniejsza z dwóch wartości luminancji, a L2 to ciemniejsza. Współczynnik 1:1 oznacza brak kontrastu (identyczne kolory), natomiast 21:1 to maksimum, osiągane tylko przez czystą czerń na czystej bieli.

Kryterium obejmuje cały tekst pierwszoplanowy renderowany przez przeglądarkę, w tym tekst wewnątrz przycisków, linków, etykiet, pól formularzy, komórek tabel, podpowiedzi (tooltips), tekst zastępczy (placeholder) w polach wejściowych oraz tekst nałożony na obrazy lub gradienty. Obejmuje także elementy tekstowe SVG oraz tekst renderowany za pomocą treści generowanej przez CSS (pseudoelementy ::before i ::after).

WCAG 1.4.3 definiuje kilka oficjalnych wyjątków, które są wyraźnie wyłączone z wymogu:

• Tekst incydentalny: Tekst lub obrazy tekstu, które są czysto dekoracyjne, niewidoczne lub stanowią część nieaktywnego (wyłączonego) komponentu interfejsu użytkownika, są zwolnione. Na przykład przygaszona etykieta wyłączonego pola formularza nie musi spełniać wymaganego współczynnika.
• Logotypy: Tekst będący częścią logo lub nazwy marki nie ma minimalnego wymogu kontrastu, ponieważ tożsamość marki często zależy od konkretnych wyborów kolorystycznych, a od użytkowników oczekuje się rozpoznawania logo wizualnie.
• Duży tekst: Jak wspomniano powyżej, duży tekst ma złagodzony wymóg 3:1 zamiast 4,5:1, co uwzględnia fakt, że większe kształty liter są łatwiejsze do rozróżnienia przy niższym kontraście.

Zaliczenie ma miejsce, gdy obliczony współczynnik kontrastu jest równy lub wyższy od odpowiedniego progu dla każdego widocznego, nieobjętego wyjątkiem tekstu. Niezaliczenie występuje, gdy jakikolwiek widoczny, nieobjęty wyjątkiem tekst lub obraz tekstu spada poniżej progu, nawet o ułamek punktu współczynnika.

Dlaczego To Jest Ważne

Około 2,2 miliarda osób na świecie żyje z jakąś formą upośledzenia wzroku, według Światowej Organizacji Zdrowia. Znacząca część tych osób — w tym osoby z osłabionym wzrokiem spowodowanym takimi schorzeniami jak zaćma, jaskra, zwyrodnienie plamki żółtej czy retinopatia cukrzycowa — nadal może czytać tekst na ekranie, gdy kontrast jest wystarczający, ale ma trudności lub w ogóle nie jest w stanie tego zrobić, gdy kontrast jest słaby. Kontrast (minimalny) bezpośrednio odpowiada na potrzeby tej grupy, ustanawiając mierzalny, testowalny próg, poniżej którego tekst staje się niedostępny.

Poza zdiagnozowanym słabym wzrokiem, szacuje się, że 8% mężczyzn i 0,5% kobiet pochodzenia północnoeuropejskiego doświadcza jakiejś formy zaburzeń widzenia barw (ślepota barw). Chociaż ślepota barw różni się od niskiego kontrastu, wiele jej form zmniejsza postrzeganą różnicę luminancji między określonymi barwami, co sprawia, że niewystarczający kontrast jest jeszcze bardziej problematyczny. Czerwona etykieta na zielonym tle może wyglądać jak niemal jednolita szarość dla osoby z deuteranopią, czyniąc tekst niewidocznym, jeśli podstawowy kontrast luminancji jest niewystarczający.

Osoby starsze są nieproporcjonalnie dotknięte. Starzejące się oko traci wrażliwość na kontrast, a rozmiar źrenicy się zmniejsza, ograniczając ilość światła docierającego do siatkówki. Osoba w wieku siedemdziesięciu lat może potrzebować znacznie wyższego kontrastu luminancji, aby osiągnąć tę samą czytelność co osoba trzydziestoletnia, nawet bez klinicznej diagnozy słabego wzroku.

Rozważmy konkretny scenariusz z życia: turecka strona e-commerce używa jasnoszarego tekstu (#999999) na białym tle (#FFFFFF) dla opisów produktów i informacji o cenach — to częsty trend projektowy, preferowany ze względu na minimalistyczną estetykę. Współczynnik kontrastu tej kombinacji wynosi około 2,85:1, znacznie poniżej progu 4,5:1. Użytkownik z wczesnym stadium zwyrodnienia plamki żółtej może być całkowicie niezdolny do odczytania ceny produktu, co zmusza go do porzucenia zakupu. Nie tylko wyklucza to użytkownika z podstawowej transakcji handlowej, ale także oznacza bezpośrednią utratę przychodu dla sprzedawcy oraz ryzyko prawne w jurysdykcjach, które wymagają zgodności z przepisami dotyczącymi dostępności.

Z punktu widzenia użyteczności i SEO tekst o wysokim kontraście przynosi korzyści wszystkim użytkownikom w trudnych warunkach: jasne światło słoneczne na ekranie telefonu, niskiej jakości panele wyświetlaczy lub po prostu użytkownik, który nie skalibrował swojego monitora. Dostępne wybory kolorystyczne zmniejszają zmęczenie oczu u osób widzących podczas dłuższych sesji czytania, a poprawa czytelności koreluje z niższymi współczynnikami odrzuceń i dłuższym czasem spędzonym na stronie — sygnałami, które wyszukiwarki wykorzystują jako wskaźniki jakości.

Powiązane Reguły Axe-core

• color-contrast: Jest to podstawowa zautomatyzowana reguła egzekwująca WCAG 1.4.3 na poziomie AA. Silnik axe-core oblicza kolory pierwszego planu i tła każdego węzła tekstowego w DOM, uwzględniając kaskadę CSS, przezroczystość, stos z-index i przezroczystość alfa. Oznacza każdy element tekstowy, którego współczynnik kontrastu spada poniżej 4,5:1 dla zwykłego tekstu lub 3:1 dla dużego tekstu. Reguła raportuje rzeczywisty znaleziony współczynnik, wymagany współczynnik oraz konkretny element, który nie przeszedł testu, co ułatwia naprawę. Jednak axe-core może analizować tylko te kolory, które jest w stanie ustalić na podstawie stylów obliczonych; tekst renderowany wewnątrz <canvas>, na złożonych gradientach CSS lub na obrazach tła może nie być w pełni rozpoznawalny bez dodatkowego kontekstu i axe oznaczy takie przypadki jako „wymaga przeglądu”, a nie jednoznaczne zaliczenie lub niezaliczenie. Tekst zastępczy w polach formularzy również jest sprawdzany przez tę regułę.
• color-contrast-enhanced: Ta reguła egzekwuje bardziej rygorystyczne progi WCAG 1.4.6 — Kontrast (zwiększony): 7:1 dla zwykłego tekstu i 4,5:1 dla dużego tekstu (poziom AAA). Chociaż 1.4.6 nie jest wymagane dla zgodności na poziomie AA, uruchamianie tej reguły podczas rozwoju jest wartościowe dla zespołów dążących do zwiększonej dostępności lub przygotowujących się na środowiska regulacyjne, które mogą przyjąć wymagania AAA. Axe-core raportuje naruszenia tej reguły osobno, aby zespoły mogły rozróżniać między niepowodzeniami na poziomie AA (color-contrast) a aspiracyjnymi ulepszeniami AAA (color-contrast-enhanced).

Testy manualne są wymagane w kilku scenariuszach, których narzędzia automatyczne nie mogą w pełni rozstrzygnąć. Gdy tekst jest nałożony na obraz tła lub gradient CSS, efektywny kolor tła zmienia się w obrębie obszaru tekstu. Narzędzia automatyczne muszą albo pobrać próbkę dominującego koloru, założyć najgorszy możliwy obszar, albo przekazać sprawę do ręcznego przeglądu. Podobnie tekst wewnątrz elementów <canvas> jest renderowany jako piksele bez semantycznej informacji o kolorze dostępnej dla drzewa dostępności, więc ręczna inspekcja za pomocą narzędzia kroplomierza jest jedynym wiarygodnym podejściem. Tekst, który pojawia się tylko w stanach :hover lub :focus, może również wymagać ręcznej interakcji, aby go wywołać, zanim narzędzia automatyczne będą mogły go ocenić.

Jak Testować

1. Automatyczne skanowanie za pomocą axe DevTools: Zainstaluj rozszerzenie przeglądarki axe DevTools (dostępne dla Chrome, Firefox i Edge). Przejdź do testowanej strony, otwórz panel rozszerzenia i uruchom analizę całej strony. W panelu wyników przefiltruj według identyfikatorów reguł color-contrast i color-contrast-enhanced. Dla każdego naruszenia narzędzie podświetla element, który nie przeszedł testu, raportuje rzeczywisty współczynnik kontrastu (np. „2,85:1”), wymagany współczynnik (np. „4,5:1”) oraz obliczone kolory pierwszego planu i tła w zapisie szesnastkowym. Wyeksportuj wyniki jako CSV lub JSON do śledzenia. Powtórz na wszystkich breakpointach, ponieważ układy responsywne mogą zmieniać rozmiary czcionek (wpływając na próg dla dużego tekstu) lub podmieniać schematy kolorów.
2. Audyt Lighthouse: Otwórz Chrome DevTools, przejdź do zakładki Lighthouse, wybierz „Accessibility” i uruchom audyt. Lighthouse wyświetla naruszenia dotyczące kontrastu kolorów w sekcji Accessibility wraz z odwołaniami do elementów. Zauważ, że Lighthouse w niektórych środowiskach używa starszej wersji axe-core; bezpośrednie użycie axe DevTools może wykryć więcej problemów.
3. Ręczny pomiar kontrastu: Użyj wbudowanego w przeglądarkę selektora kolorów w DevTools lub dedykowanego narzędzia, takiego jak WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) lub aplikacja desktopowa TPGi Colour Contrast Analyser. Wybierz kolory pierwszego planu i tła za pomocą kroplomierza i sprawdź, czy raportowany współczynnik spełnia próg. Dla tekstu na gradientach lub obrazach pobierz próbki z wielu punktów w obszarze tekstu i użyj pomiaru o najniższym kontraście jako wartości rozstrzygającej.
4. Testowanie stanów interaktywnych: Ręcznie wywołaj stany :hover, :focus, :active i :visited dla linków i elementów interaktywnych, a następnie zmierz kontrast dla każdego stanu osobno. Niektóre projekty używają kolorów o niższym kontraście w stanie hover, które niezamierzenie nie spełniają wymogów. Użyj funkcji „Force element state” w DevTools przeglądarki, aby utrzymać stan podczas pomiaru.
5. Przegląd z czytnikiem ekranu i klawiaturą (kontekstowy): Chociaż kontrast jest kryterium wizualnym i nie jest bezpośrednio wykrywalny przez czytniki ekranu, testowanie z NVDA + Firefox, VoiceOver + Safari lub JAWS + Chrome potwierdza, że tekst jest obecny w drzewie dostępności i nie jest ukryty za pomocą technik CSS (takich jak color: transparent), które uczyniłyby go niewidocznym wizualnie. Jeśli czytnik ekranu odczytuje tekst, który wydaje się niewidoczny na ekranie, zbadaj, czy jego wizualne renderowanie spełnia wymagania dotyczące kontrastu dla użytkowników widzących.
6. Powiększenie i skalowanie czcionki: Zwiększ domyślny rozmiar czcionki przeglądarki (Ustawienia → Wygląd → Rozmiar czcionki) oraz powiększenie do 200%. Sprawdź, czy tekst, który przy tych rozmiarach przechodzi z „zwykłego” do „dużego”, nadal spełnia odpowiedni próg. Czcionka o rozmiarze 14px przy domyślnym powiększeniu może stać się 28px przy 200% powiększeniu, co zmienia, który próg ma zastosowanie.

Jak Naprawić

Tekst główny z niewystarczającym kontrastem — Niepoprawne

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Tekst główny z niewystarczającym kontrastem — Poprawne

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Przycisk wezwania do działania z niskim kontrastem — Niepoprawne

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Przycisk wezwania do działania z niskim kontrastem — Poprawne

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Tekst zastępczy w polu formularza — Niepoprawne

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Tekst zastępczy w polu formularza — Poprawne

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Tekst na obrazie tła lub gradiencie — Niepoprawne

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Tekst na obrazie tła lub gradiencie — Poprawne

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Najczęstsze Błędy

• Zakładanie, że kolor wygląda dobrze na skalibrowanym monitorze: Monitory z wyższej półki, o szerokiej gamie kolorów i wysokiej jasności, mogą sprawiać, że kombinacje o niskim kontraście wydają się czytelne dla projektantów z prawidłowym wzrokiem w kontrolowanym środowisku, podczas gdy ten sam tekst jest nieczytelny na tanim laptopie lub w świetle jarzeniówek biurowych. Zawsze weryfikuj kontrast za pomocą narzędzia do obliczania współczynnika, a nie wyłącznie na podstawie oceny wizualnej.
• Zapominanie o osobnym testowaniu stanów interaktywnych: Link może spełniać wymóg 4,5:1 w stanie domyślnym, ale spaść do 2,8:1 w stanie :hover, gdy kolor się rozjaśnia. Każdy stan interaktywny musi niezależnie spełniać próg.
• Traktowanie wyłączonych pól formularzy jako uniwersalnie zwolnionych: Wyjątek dotyczy tylko nieaktywnych komponentów interfejsu użytkownika. Jeśli pole jest wizualnie wystylizowane jako wyłączone, ale nadal programowo aktywne (brakuje atrybutu disabled), nie jest zwolnione i musi spełniać wymagania dotyczące kontrastu.
• Używanie przezroczystości do przyciemniania tekstu bez uwzględnienia efektywnego koloru: Ustawienie opacity: 0.5 na ciemnym tekście w praktyce miesza go z tłem, tworząc jaśniejszy kolor wynikowy. Współczynnik kontrastu musi być obliczony względem powstałego koloru złożonego, a nie pierwotnej wartości CSS. Na przykład #000000 przy 50% przezroczystości na bieli renderuje się jako około #808080, co daje współczynnik kontrastu około 3,9:1 — poniżej progu 4,5:1 dla zwykłego tekstu.
• Pomijanie tekstu wewnątrz elementów SVG: Elementy SVG <text> stylowane za pomocą fill, a nie CSS-owego color, nadal podlegają 1.4.3. Narzędzia automatyczne mogą je pomijać w zależności od sposobu osadzenia SVG (inline vs. <img> vs. <object>). Najbardziej wiarygodne do testowania jest SVG osadzone inline.
• Błędne określanie rozmiaru tekstu dla zwolnienia dotyczącego dużego tekstu: Progi 18pt / 14pt pogrubiony odnoszą się do renderowanego rozmiaru w przeglądarce użytkownika, a nie wartości w pikselach CSS w kodzie źródłowym. CSS font-size: 24px odpowiada dokładnie 18pt (ponieważ 1pt = 1,333px), ale jeśli użytkownik ustawił większy domyślny rozmiar czcionki, element 16px może renderować się jako większy niż 18pt. Testuj przy domyślnych rozmiarach czcionek przeglądarki i dokładnie sprawdzaj swoje obliczenia rozmiarów.
• Poleganie wyłącznie na kolorze przy odróżnianiu linków od tekstu głównego: Jeśli link jest stylowany bez podkreślenia i używa tylko koloru, aby odróżnić go od otaczającego tekstu, kolor linku musi osiągać współczynnik 3:1 względem koloru tekstu głównego oprócz 4,5:1 względem tła strony. Wiele projektów nie spełnia jednego lub obu tych wymogów. Dodanie podkreślenia (lub innego wizualnego wskaźnika niezależnego od koloru) jest bezpieczniejszym podejściem.
• Ignorowanie tekstu wewnątrz widżetów zewnętrznych i wtyczek czatu: Osadzone widżety — okna czatu na żywo, banery zgody na pliki cookie, karuzele opinii, kanały mediów społecznościowych — są częścią strony i podlegają wymogom zgodności z WCAG 1.4.3. Tekst o niskim kontraście wewnątrz widżetu zewnętrznego jest niepowodzeniem, nawet jeśli własna baza kodu jest w pełni zgodna.
• Brak ponownego testowania po włączeniu trybu ciemnego lub trybu wysokiego kontrastu: Schemat kolorów, który spełnia wymogi w trybie jasnym, może nie spełniać ich w trybie ciemnym, jeśli zmienne niestandardowe CSS nie są starannie zarządzane. Podobnie tryb wysokiego kontrastu w systemie Windows nadpisuje wiele deklaracji kolorów CSS; sprawdź, czy tekst pozostaje czytelny i czy żaden niestandardowy CSS nie wprowadza ponownie par o niskim kontraście w środowiskach z wymuszonymi kolorami.
• Używanie CSS background-clip: text lub technik gradientowego tekstu bez rozwiązania alternatywnego: Tekst wypełniony gradientem, tworzony za pomocą -webkit-background-clip: text; color: transparent, stanowi złożone wyzwanie kontrastowe, ponieważ kolor tekstu zmienia się w obrębie glifu. Narzędzia automatyczne zazwyczaj nie są w stanie tego rozstrzygnąć, a rzeczywista luminancja każdej części kształtu litery musi być ręcznie zweryfikowana względem tła strony.

Związek z Przepisami Dotyczącymi Dostępności w Turcji

Turecka Okrężnica Prezydencka nr 2025/10, opublikowana w Dzienniku Urzędowym (Resmî Gazete) nr 32933 w dniu 21 czerwca 2025 r., ustanawia wiążące krajowe ramy dla dostępności cyfrowej. Okrężnica nakazuje zgodność z międzynarodowo uznanymi standardami dostępności stron internetowych — w praktyce dostosowując tureckie wymogi regulacyjne do WCAG 2.2 — oraz wprowadza Erişilebilirlik Logosu (Logo Dostępności), wydawane przez Ministerstwo Rodziny i Usług Społecznych (Aile ve Sosyal Hizmetler Bakanlığı), jako oficjalny znak certyfikacji dla zgodnych produktów i usług cyfrowych.

WCAG 1.4.3 — Kontrast (minimalny) jest kryterium sukcesu na poziomie AA, a zgodność na poziomie AA jest podstawowym wymogiem, aby kwalifikować się do Logo Dostępności. Oznacza to, że każda jednostka ubiegająca się o logo musi zapewnić, że cały widoczny, nieobjęty wyjątkiem tekst i obrazy tekstu na jej stronach internetowych i w aplikacjach spełniają progi kontrastu 4,5:1 (tekst zwykły) i 3:1 (tekst duży) zdefiniowane przez to kryterium. Niespełnienie 1.4.3 jest jednym z najczęściej wykrywanych automatycznych naruszeń i stanowi bezpośrednią przeszkodę w uzyskaniu certyfikacji.

Okrężnica ma zastosowanie do szerokiego zakresu podmiotów publicznych i prywatnych. Podmioty objęte przepisami obejmują instytucje i agencje publiczne na szczeblu centralnym i lokalnym; banki i instytucje finansowe regulowane przez Urząd Regulacji i Nadzoru Bankowego (BDDK); szpitale i świadczeniodawców opieki zdrowotnej, zarówno publicznych, jak i prywatnych; operatorów telekomunikacyjnych z 200 000 lub większą liczbą abonentów; platformy e-commerce, które spełniają odpowiednie progi przychodów lub wolumenu transakcji; biura podróży; prywatne firmy transportowe; oraz prywatne szkoły i instytucje edukacyjne upoważnione przez Ministerstwo Edukacji Narodowej (MEB).

Dla tych podmiotów zapewnienie zgodności w zakresie kontrastu nie jest jedynie zaleceniem dobrych praktyk — ma ono znaczenie regulacyjne. Organizacje niezgodne z wymogami ryzykują kontrolę administracyjną i konsekwencje wizerunkowe, podczas gdy organizacje zgodne mogą wyświetlać Erişilebilirlik Logosu jako sygnał zaufania dla około 8,5 miliona osób z niepełnosprawnościami w Turcji, a także dla starszych użytkowników, użytkowników mobilnych i ogółu społeczeństwa, którzy korzystają z czytelnego, wysokokontrastowego projektu.

Organizacje działające w Turcji, które nie przeprowadziły jeszcze audytu zgodności z WCAG 1.4.3, powinny nadać priorytet zautomatyzowanemu skanowaniu wszystkich publicznie dostępnych punktów kontaktu cyfrowego — stron internetowych, mobilnych wersji stron i, tam gdzie ma to zastosowanie, aplikacji natywnych — a następnie ręcznemu przeglądowi gradientowych teł, nakładek na obrazy i osadzonych komponentów zewnętrznych. Ustanowienie systemu tokenów projektowych z wcześniej zatwierdzonymi, zweryfikowanymi pod kątem kontrastu parami kolorów jest najbardziej skalowalnym rozwiązaniem długoterminowym, zapewniającym, że nowe komponenty interfejsu użytkownika dziedziczą domyślnie dostępne kombinacje kolorów i że przyszłe przeprojektowania nie wprowadzą niezamierzenie naruszeń dotyczących kontrastu.