Kontrast — minimum

Co oznacza to kryterium

Tekst powinien dać się odczytać na tle, na którym rzeczywiście występuje. Zwykły tekst i obrazy tekstu potrzebują kontrastu co najmniej 4,5:1; odpowiednio duży tekst co najmniej 3:1. Sprawdź także placeholder, wpisaną wartość i treść ujawnioną po działaniu.

Pomaga to przede wszystkim osobom słabowidzącym i osobom o obniżonej wrażliwości na kontrast. Nazwa w drzewie dostępności może wspierać czytnik, ale nie poprawia różnicy luminancji widocznych liter.

Przykłady błędów i poprawek

Godziny odbioru i pole notatki

Pracownia przedstawia ten sam odbiór P-104. Good i bad różnią się tylko kolorem godzin, placeholdera, notatki i wyniku: #4A5550 albo #AAAAAA na nieprzezroczystym #FFFFFF. Tekst, font, tło, etykiety i działania pozostają te same.

Historyczny pomiar źródłowych kolorów: bad 2,3231230535045992:1, good 7,759366710298236:1. Przyjęto 4,5:1 dla wszystkich badanych napisów, bez polegania na wyjątku dużego tekstu. Biała karta jest kontrolowanym tłem eksperymentu.

Treść po działaniu i kontrola nieaktywności

Po wpisaniu Ogrod i naciśnięciu „Pokaż adres” ujawniają się ten sam adres i notatka. Poprawka musi obejmować również te napisy. Ciemna etykieta przycisku nie naprawia jasnej treści karty.

Control zachowuje czytelną treść jak good, lecz jasny napis występuje w faktycznie wyłączonym „Pokaż adres”. Natywny odczyt isEnabled=false i dotknięcie bez skutku potwierdzają wyłączenie. Wyjątek dotyczy tego napisu, a nie całej karty.

Osobne wykonanie webowe miało również readonly P-104: DOM potwierdził disabled=false. Brak możliwości edycji nie zwalnia takiej informacji z kontrastu. Obrazy powyżej pochodzą z końcowej próby iOS, a nie z wcześniejszych nieudanych uruchomień.

Kiedy obowiązuje i gdzie są wyjątki

• Ocenia się tekst i obrazy zastępujące tekst. Przypadkowy napis na obrazie z istotną inną treścią wizualną może korzystać z wyjątku; banner zastępujący akapit nie otrzymuje go przez sam format pliku.
• Duży tekst to co najmniej 18 pt lub 14 pt pogrubione, albo równoważna wielkość dla CJK. W CSS daje to 24 px i 18⅔ px. Liczy się dostarczona prezentacja i font; późniejsze powiększenie nie naprawia jej kontrastu.
• Nie przeliczaj automatycznie Flutter logical px, UIKit points, Compose sp i jednostek React Native na CSS pt/px. Cienki krój może potrzebować większego marginesu czytelności.
• Wyjątki obejmują tekst w faktycznie nieaktywnej kontrolce, czystą dekorację, tekst niewidoczny dla kogokolwiek i opisany wyżej przypadkowy napis. Jasny kolor, drugorzędna rola lub readonly nie oznaczają nieaktywności. Placeholder i tekst przy fokusie/najechaniu pozostają w zakresie.
• Tekst będący częścią logo lub nazwy marki ma wyjątek normatywny. Rekomendacja czytelnego interaktywnego logo lub równoważnej kontrolki go nie usuwa. Pozostała treść marki nie otrzymuje ogólnego zwolnienia.
• Wynik porównuje się bez zaokrąglania: 4,499:1 nie spełnia 4,5:1, a 2,999:1 nie spełnia 3:1. Wartość skrócona do wyświetlenia nie powinna być wejściem decyzji.

Tła, przezroczystość i alternatywna prezentacja

Ustal obie ostateczne barwy, także przy dziedziczeniu. Nie muszą być zadeklarowane na tym samym elemencie; tło może pochodzić od przodka. Pozostawienie jednej barwy nieznanym ustawieniom odbiornika może tworzyć problem opisany w F24.

Na obrazie lub gradiencie sprawdź obszar pod literami i wszystkie osiągane stany, zamiast średniej barwy całej grafiki. Przezroczystość tekstu i opacity kontenera wymagają ustalenia wynikowego koloru z podłożem. Halo lub jednolita powierzchnia mogą pomóc, jeśli rzeczywiście zapewniają czytelność w miejscu liter. Demonstracja nie odtwarza złożonych teł.

G18/G145 pomagają zapewnić progi, G148 opisuje zachowanie obu domyślnych barw, a G174 dostępną zmianę na prezentację o wystarczającym kontraście. G174 wymaga tej samej informacji i funkcjonalności oraz zgodnej alternatywnej wersji na ocenianym poziomie; dowolny przełącznik motywu nie wystarcza. Techniki i F83 dotyczący tła obrazowego są materiałami pomocniczymi.

Platformy

Weryfikacja merytoryczna AI: 2026-10-04. WCAG2ICT jest interpretacją informacyjną. Nie ustalano EN 301 549 ani obowiązków prawnych. W hybrydzie oceń osobno część webową i natywną; brak testu nie wyłącza wymagania.

Rozwiązania w technologiach

Wspólna zasada: zdefiniować parę tekst–tło i sprawdzić jej ostateczne kolory. Kod poniżej jest edukacyjny; nie deklaruje oceny wszystkich stanów tych frameworków. API sprawdzono w oficjalnej dokumentacji 2026-10-04. Osobne aplikacje innych technologii nie zostały zbudowane.

const DecoratedBox(
  decoration: BoxDecoration(color: Color(0xFFFFFFFF)),
  child: Text('Punkt otwarty do 18:00.',
    style: TextStyle(color: Color(0xFF4A5550), fontSize: 17)),
);

import SwiftUI
struct PickupText: View {
  var body: some View {
    Text("Punkt otwarty do 18:00.")
      .font(.body)
      .foregroundStyle(Color(red: 74/255, green: 85/255, blue: 80/255))
      .padding().background(Color.white)
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
// W funkcji @Composable:
Text("Punkt otwarty do 18:00.", color = Color(0xFF4A5550), fontSize = 16.sp,
    modifier = Modifier.background(Color.White).padding(16.dp))

import { Text, View } from 'react-native';
export function PickupText() {
  return (
    <View style={{ backgroundColor: '#FFFFFF', padding: 16 }}>
      <Text style={{ color: '#4A5550', fontSize: 16 }}>
        Punkt otwarty do 18:00.
      </Text>
    </View>
  );
}

Jak sprawdzić

1. Zapisz widoczny tekst, rozmiar, krój/wagę, RGBA i rzeczywiste podłoże. Porównaj ten sam stan przed i po poprawce.
2. Wykonaj normalne wejście do pola, wpisanie notatki, ujawnienie wyniku oraz dostępne hover/fokus. Sprawdź również readonly i placeholder.
3. Przy powołaniu się na nieaktywność potwierdź rzeczywisty stan i brak działania. Nie wnioskuj z samego przygaszenia.
4. Dla sRGB znormalizuj kanały do 0–1. Przy kanale ≤0,04045 podziel przez 12,92, powyżej użyj ((c+0,055)/1,055)^2,4. Luminancja to 0,2126R + 0,7152G + 0,0722B; stosunek (Ljaśniejsze+0,05)/(Lciemniejsze+0,05). Porównaj pełną wartość z progiem.
5. Przy alpha najpierw ustal compositing i pełne podłoże we właściwej przestrzeni. Uwzględnij grupy, obraz, gradient, blend, filtry i halo. Brak informacji o warstwie oznacza nierozstrzygnięty wynik.

Historyczne wyniki i ograniczenia

W odczycie Fluttera wykorzystano zbudowane RenderParagraph/RenderEditable i RenderDecoratedBox. Root span.style wystarczał dla płaskiego przykładu; nie zapewnia obsługi zagnieżdżonych spanów, dziedziczonych kolorów, foreground Paint i dowolnych warstw. Obecny, ale niemalowany placeholder Offstage wymaga osobnej oceny widoczności. Screenshot nie mierzy koloru źródłowego na antyaliasowanej krawędzi litery.

ACT afw4f7 bada określony zakres widocznego tekstu DOM i najwyższy możliwy kontrast znaków. Nie obejmuje wszystkich pól i obrazów tekstu; aria-disabled bez rzeczywistego wyłączenia może prowadzić do błędnego wyłączenia. Dobry piksel na wzorzystym tle nie dowodzi czytelności wszystkich liter. PASS lub brak zastosowania reguły wymagają dalszej oceny.

Jak sprawdza Clearship

Clearship mierzy kontrast tekstu widocznych węzłów, etykiet kontrolek i tekstu pól na zrzutach jasnego oraz ciemnego wyglądu. Korzysta z lokalnego tła glifów, metadanych natywnego Androida lub szacunku rozmiaru i wagi z obrazu. Audyt iOS jest wskazówką bez liczbowego stosunku; ocena AI kontrastu nie jest obecnie wykonywaną metodą tego kryterium.

Metoda text-contrast-1 spełniła próg pomiaru kontrolnego Androida 2026-10-07. iOS ma wynik rozwojowy, bez pomiaru kontrolnego. Przypadki blisko progu pozostają nierozstrzygnięte, bez zaokrąglania normatywnej wartości. Rozmiar szacowany dla krojów systemowych nie potwierdza każdego własnego fontu ani CJK. Nieaktywność, logotyp, obraz tekstu, złożone tło i brak pomiaru wymagają człowieka. Tekst bez węzła, część etykiet na obrysie pola i nieosiągnięte stany pozostają poza zakresem; brak znaleziska nie potwierdza całej aplikacji.

Powiązane kryteria

• 1.4.1
  Użycie koloru

  Dodatkowa wskazówka dla barwy i kontrast tekstu to odrębne warunki.

• 1.4.5
  Obrazy tekstu

  Obraz tekstu może potrzebować zastąpienia tekstem niezależnie od kontrastu.

• 1.4.11
  Kontrast elementów nietekstowych

  Kontrolki i istotna grafika mają osobny zakres kontrastu.

• 1.4.6
  criteriaNames.1.4.6

  Poziom AAA podnosi progi kontrastu tekstu.

  Artykuł nie jest jeszcze dostępny.