Użycie koloru

Co oznacza to kryterium

Kolor może pomagać rozpoznać stan, ale znaczenie musi pozostać widoczne bez rozróżnienia barw. Przy czerwonej ramce pokaż błąd tekstem, a przy wybranej dostawie dodaj znacznik lub napis. Sam opis dla czytnika nie wystarcza osobie widzącej, która nie odróżnia użytych kolorów.

Pomaga to osobom z ograniczonym rozróżnianiem barw i części osób słabowidzących, także przy ekranach o małej liczbie kolorów. Semantykę potrzebną do korzystania bez widzenia ocenia się osobno.

Przykłady błędów i poprawek

Status zamówienia

Własna Pracownia pokazuje trzy stany: „Dostarczono”, „W przygotowaniu” i „Anulowano”. Bad przekazuje je tylko zieloną, bursztynową i czerwoną kropką o tym samym kształcie. Różnice jasności użytych kolorów nie osiągają 3:1, a widoczny tekst nie wyjaśnia stanu. Legenda samych barw nadal wymagałaby ich rozpoznania.

Good dodaje widoczny tekst i różny symbol przy każdym statusie. Dane pozostają te same. Celowo pozostawiona semantyczna nazwa w bad pokazuje granicę: informacja tylko dla czytnika nie rozwiązuje widocznej bariery 1.4.1.

Błąd formularza

Po zapisaniu niepoprawnego „aleksandra” bad zmienia tylko kolor ramki pola. Good dodaje komunikat „Wpisz adres e-mail, np. ola@example.com.” Walidacja jest uproszczona i nie wysyła danych; identyfikację i sugestię błędu trzeba również rozpatrzyć w 3.3.1 i 3.3.3.

Wybór dostawy i zmiana stanu

W bad Punkt odbioru i Kurier mają takie samo tło i styl ramki; tylko barwa obrysu wskazuje wybór. Good dodaje znacznik i „Wybrano”. Semantyczne selected występuje w obu wariantach, oddzielając tę barierę od dostępnego stanu.

Po dotknięciu Kuriera znacznik i napis przenoszą się do niego. To trwały skutek rzeczywistej interakcji XCTest, bez nowego nagrania lub testu czytnika.

Te obrazy dokumentują odświeżenie Cupertino z 2026-10-02. Istniejące odpowiedniki Android Material i historyczne filmy pozostają w researchu; nie są nowym wykonaniem podczas konwersji ani dowodem obecnego iOS Material.

Kiedy obowiązuje i gdzie są wyjątki

• Dotyczy koloru przekazującego informację, wskazującego działanie, oczekiwaną reakcję lub różnicę między elementami. Dekoracyjna zmiana koloru bez takiego znaczenia nie jest automatycznie błędem.
• Wskazówka musi być widoczna. Samo accessibilityLabel, contentDescription lub Semantics nie wystarczy dla osoby widzącej, która nie rozróżnia barw.
• Różnica jasności przy kontraście co najmniej 3:1 może być dodatkową wskazówką przy rozróżnianiu elementów. Jeżeli trzeba wiedzieć, który konkretnie kolor oznacza dany stan, wciąż potrzebna jest inna informacja.

Nie przenosić progu 3:1 na wszystkie zastosowania koloru. Wymagania kontrastu tekstu (1.4.3) i elementów nietekstowych (1.4.11) bada się osobno. W przypadku linków w tekście różnica jasności może wymagać dodatkowej wskazówki przy fokusie lub najechaniu; nie należy streszczać tego do zasady „sam kolor zawsze wystarczy przy 3:1”.

Platformy

Sprawdź 1.4.1, jeżeli kolor przekazuje znaczenie, np. status, błąd lub wybór. Typ urządzenia nie usuwa tej bariery. Kolor użyty wyłącznie dekoracyjnie nie uruchamia tego warunku.

Weryfikacja merytoryczna zastosowania: AI, 2026-10-01; WCAG 2.2 i interpretacja WCAG2ICT dla 1.4.1. Przykłady uruchomiono tylko jako Flutter na Androidzie i iOS. Pozostałe wiersze opisują zastosowanie wymagania, nie potwierdzone testy tych środowisk. W urządzeniach innych niż komputer lub telefon tabela dotyczy treści i oprogramowania, nie całości wymagań sprzętowych. W aplikacji hybrydowej rozróżnić część webową i natywną. Zakres obowiązków prawnych ocenia się osobno; pozostaje wymagany przegląd interpretacji przez człowieka.

Źródło nie wskazuje daty wydania użytej WCAG2ICT. Zachowujemy jego datę i status odczytu; konwersja nie jest ponowną weryfikacją normy.

Rozwiązania w technologiach

Najprostsza poprawka statusu w każdej technologii to widoczny tekst opisujący stan. Kolor i symbol są dodatkiem. Poniżej krótkie fragmenty edukacyjne do osadzenia w interfejsie. Działająca demonstracja korzysta ze wspólnego Fluttera; nie wymaga powielenia testu w czterech frameworkach. Samo przepisanie fragmentu nie potwierdza zgodności pozostałych ekranów.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun OrderStatus(delivered: Boolean) {
    Text(
        text = if (delivered) "Dostarczono" else "W przygotowaniu",
        color = if (delivered) Color(0xFF286443) else Color(0xFF926100)
    )
}

import SwiftUI

struct OrderStatus: View {
    let delivered: Bool
    var body: some View {
        Label(
            delivered ? "Dostarczono" : "W przygotowaniu",
            systemImage: delivered ? "checkmark.circle" : "clock"
        )
        .labelStyle(.titleAndIcon)
        .foregroundStyle(delivered ? Color.green : Color.brown)
    }
}

Row(children: [
  const ExcludeSemantics(
    child: Icon(Icons.check_circle_outline, color: Color(0xFF286443)),
  ),
  const SizedBox(width: 8),
  const Flexible(child: Text('Dostarczono')),
])

import { Text, View } from 'react-native';

export function OrderStatus({ delivered }: { delivered: boolean }) {
  return (
    <View>
      <Text style={{ color: delivered ? '#286443' : '#926100' }}>
        {delivered ? 'Dostarczono' : 'W przygotowaniu'}
      </Text>
    </View>
  );
}

Jak sprawdzić

1. Znajdź informację kodowaną kolorem: status, błąd, wybór, legendę wykresu lub akcję.
2. Ustal, co użytkownik ma z niej zrozumieć. Sprawdź widoczną wskazówkę niezależną od barwy i dostępny kontekst.
3. Dla stanu interaktywnego wykonaj akcję, np. wybierz Kuriera lub zapisz niepoprawny adres. Sprawdź, czy wskazówka aktualizuje się razem ze stanem.
4. Rozważ różnicę jasności i warunki z sekcji „Kiedy obowiązuje i gdzie są granice”. Widok w szarości może pomóc w oględzinach, ale nie zastępuje tej oceny i nie symuluje wszystkich zaburzeń widzenia.
5. Zapisz obserwację i zakres, np. „w tym stanie błąd wskazano wyłącznie kolorem ramki”. Nie wnioskuj o całej aplikacji z jednej pary ekranów.

Weryfikacja i ograniczenia

Weryfikacja merytoryczna AI pochodzi z 2026-10-01; odświeżenie iOS do Cupertino wykonano 2026-10-02. Wszystkie dane Pracowni są syntetyczne.

Widgety i XCTest potwierdzają wybór, walidację i warianty w zadanym scenariuszu. Screenshoty Cupertino są rzeczywistym XCUIScreen. Historyczne filmy Androida i Material iOS pokazują interakcję bez audio; nie są dowodem obecnego Cupertino, VoiceOver lub jakości doświadczenia człowieka. Główne medium tego wymagania stanowią obrazy; nie osadzono starych nagrań.

Reguła może mierzyć kolory przy znanym tle, ale potrzebuje kontekstu znaczenia. Sama kropka może być dekoracją; czerwona ramka może mieć równoważny tekst. Ocena AI jest wskazówką wymagającą odpowiednich dowodów. Semantyczny status w drzewie nie zastępuje widocznej informacji. Niepełny kontekst i brak wykrycia błędu nie oznaczają spełnienia; oczekiwania demonstracji nie są wejściem niezależnego benchmarku.

Jak sprawdza Clearship

Clearship mierzy kolory na obrazach i szuka widocznych wskazówek dla odnośników, wybranych opcji oraz pól z obrysem. Dla nierozstrzygniętego znaczenia grafiki lub tekstu korzysta z oceny AI albo człowieka. Metoda use-of-color-2 dotyczy zebranych stanów natywnych w jasnym i ciemnym wyglądzie.

Android z oceną AI jest poniżej progu pomiaru kontrolnego; iOS ma częściowy pomiar rozwojowy, bez kontrolnego i bez wykonanej oceny AI. Katalog zachowuje ocenę człowieka. Małe kropki i wskaźniki bez węzła, część grafiki, treść WebView oraz stan po akcji niezapisany na trasie pozostają poza zakresem. W szczególności metoda nie wykrywa automatycznie samych małych kropek z przykładu statusu. Semantyczna nazwa i widok w szarości nie potwierdzają widocznej alternatywy; brak znaleziska nie oznacza spełnienia całego kryterium.

Powiązane kryteria

• 1.3.3
  Właściwości zmysłowe

  Instrukcja musi identyfikować cel również bez jego wyglądu lub położenia.

• 1.4.3
  Kontrast (minimalny)

  Kontrast tekstu sprawdza się niezależnie od informacji przekazanej kolorem.

• 1.4.11
  Kontrast elementów nietekstowych

  Kontrast grafiki i kontrolek nie zastępuje widocznej alternatywy dla barwy.

• 3.3.1
  Identyfikacja błędu

  Identyfikacja błędu formularza wymaga osobnej oceny.

• 3.3.3
  Sugestie korekty błędów

  Sugestia poprawy błędu nie wynika z samej alternatywy dla koloru.