Kontrast elementów nietekstowych

Co oznacza to kryterium

Znacznik wyboru, potrzebna ikona i istotna część diagramu muszą odcinać się od kolorów, z którymi sąsiadują. Minimalny kontrast wynosi 3:1. Porównujemy element niosący informację z jego rzeczywistym otoczeniem: znak wyboru może leżeć wewnątrz kontrolki, a obrys fokusu na karcie wokół niej. Wyjątki obejmują nieaktywne kontrolki, określony niezmieniony wygląd platformy i niezbędną prezentację grafiki.

To pomaga osobom słabowidzącym. Czytelny podpis nie zawsze wystarcza, by zobaczyć zaznaczenie opcji, uchwyt suwaka lub kierunek strzałki. Samo rozróżnianie barw i nazwa dostępna dla czytnika to odrębne zagadnienia.

Przykłady błędów i poprawek

Znacznik wyboru i strzałka planu

Własna demonstracja „Pracownia” pokazuje odbiór P-104. W obu wersjach wybrano „Odbiór przy ogrodzie”, a strzałka prowadzi do wejścia B. Dane, kształty i obsługa pozostają takie same. Zmieniamy kolor znaku i strzałki, sąsiadujących z bielą.

Błąd · 2,3231230535045992:1

Poprawka · 16,729619093590486:1

Surowe zrzuty własnej demonstracji Flutter/Cupertino, iPhone 17 Simulator, iOS 26.5, z 2026-10-04. Wartości pochodzą z odczytów źródłowych. Para dokumentuje te trwałe stany; nie potwierdza dostępności całej aplikacji ani testu VoiceOver.

Problem

Jasny checkmark i strzałka znikają na białym tle. Ciemna ramka pola oraz poprawna rola i stan w drzewie dostępności nie zastępują tych wskazówek.

Skutek

Osoba może przeczytać opcję, ale nie zobaczyć, czy ją wybrała. Bez strzałki same etykiety A i B nie wskazują wejścia.

Poprawka

Zastosuj #15201C zamiast #AAAAAA, zachowując białe tło, znak wyboru, geometrię i obsługę. Zbadaj potrzebny fragment w każdym używanym stanie.

Kontrola: opcja rzeczywiście nieaktywna

W aktywnych wariantach zwykłe dotknięcie usuwało i przywracało checkmark wraz ze stanem selected. To odróżnia faktyczne działanie od samej nazwy wariantu. Nie nagrywano filmu ani audio; trwałe stany, wejścia i odczyty kolorów dokumentują tę parę.

WWW: autorski fokus

Błąd fokusu

Poprawka fokusu

Rzeczywiste JPEG z IAB na macOS, 2026-10-04. Fokus uzyskano Tab i Shift+Tab; obrysy mają 3 CSS px i odstęp 4 px. To pomiar względem sąsiedniej karty, bez porównywania focused z unfocused.

Normalne Space i kliknięcie zmieniały wybór. Nieaktywna opcja nie reagowała na kliknięcie i była pomijana przez Tab. Dekoracyjny jasny cień hover nie służył do wskazywania wyboru; białe tło pozostawało takie samo. Odczyty hover dotyczyły odznaczonej opcji, więc nie dowodzą kontrastu widocznego checkmarka podczas hover.

Kiedy obowiązuje i gdzie są wyjątki

Kontrolki, sąsiednie kolory i stany

Wymaganie obejmuje wizualną informację potrzebną do rozpoznania kontrolki lub jej stanu. Obrys całego obszaru dotyku nie jest obowiązkowy, jeżeli akcję wystarczająco identyfikuje podpis lub ikona. Czytelny podpis opcji nie oznacza jednak, że widać jej zaznaczenie. W przykładzie sąsiadem checkmarka jest białe wnętrze, a nie ciemna ramka. Przy kilku kolorach ustal, które części razem przekazują informację i które granice trzeba ocenić.

Nie wymagamy 3:1 między następującymi po sobie, nieprzylegającymi stanami, np. default i hover albo linkiem odwiedzonym i nieodwiedzonym. Dodatkowy efekt hover może być dekoracyjny. Po najechaniu nadal musi być rozpoznawalna potrzebna informacja kontrolki, wyboru i fokusu.

Autorski wskaźnik fokusu oceniamy w stanie focused względem sąsiadującego koloru. Zewnętrzny obrys może sąsiadować z kartą, a wewnętrzny z wypełnieniem. Kryterium AAA 2.4.13 osobno opisuje powierzchnię i zmianę focused/unfocused; 2.4.7 dotyczy widoczności fokusu. Ta demonstracja nie jest pełną oceną żadnego z nich.

Nieaktywność i wygląd platformy

Wyjątek nieaktywnej kontrolki oznacza, że widoczny element jest rzeczywiście niedostępny do interakcji. Sam szary kolor, tekst „wyłączone”, aria-disabled lub stan w drzewie nie zatrzymują działania. W demonstracji użyto onPressed=null i HTML disabled oraz sprawdzono zwykłe wejście. Powód niedostępności jest czytelnym tekstem.

Drugi wyjątek dotyczy wyglądu nadanego przez odbiornik i niezmienionego przez autora. WCAG2ICT uwzględnia też oprogramowanie platformowe. Własny kolor, obrys lub painter jest zmianą autorską. Nazwa „Cupertino” i natywny build Fluttera same nie dowodzą zastosowania wyjątku.

Grafika, równoważny tekst i niezbędna prezentacja

Oceniamy części potrzebne do zrozumienia: grot strzałki, linię serii czy istotne granice segmentów. Dekoracja nie uruchamia wymagania. Równoważna widoczna informacja tekstowa może usunąć potrzebę polegania na grafice; ogólna nazwa obrazu i ukryty opis dostępności nie zastępują jej dla osoby słabowidzącej. W planie same A/B i zdanie „strzałka wskazuje wejście” nie podają celu. Nazwa dla technologii asystującej podaje B, ale jej użycia tutaj nie testowano.

Wyjątek niezbędnej prezentacji dotyczy sytuacji, gdy zmiana wyglądu zasadniczo zmieniłaby informację i nie da się przekazać jej inaczej w sposób zgodny, np. fotografii rzeczywistej sceny, flagi lub wymaganych barw logo. Przygaszenie logo dla stylistyki nie tworzy takiego wyjątku. Interaktywne logo trzeba też ocenić jako kontrolkę, uwzględniając równoważną widoczną akcję. Ciemniejsza strzałka „Pracowni” zachowuje znaczenie, więc wyjątek jej nie obejmuje.

Gradienty, warstwy i cienkie kreski

Nie oceniaj mechanicznie każdego antyaliasowanego piksela. Wyznacz istotne części i ich faktyczne sąsiedztwo; uwzględnij gradient, alpha, opacity i warstwy. Po pominięciu fragmentów o słabym kontraście obiekt musi nadal przekazywać potrzebną informację. Drobne przecięcie linii może zachować ciągłość, a znikający grot zniszczyć kierunek. Nominalny wynik koloru nie gwarantuje czytelności bardzo cienkiej kreski.

Ta demonstracja ma płaskie, nieprzezroczyste kolory. Jej wyniki nie potwierdzają gradientów, nakładania, rasterów, cieni jako koniecznej granicy ani innego profilu barw.

Platformy

Interpretację źródłową opracowano przez AI 2026-10-04. Dla WWW podstawą jest WCAG 2.2 / 1.4.11; dla oprogramowania i dokumentów poza WWW użyto WCAG2ICT 2.2, Group Note z 2025-12-11. Ta nota jest wskazówką interpretacyjną. Klasyfikacja poniżej nie rozstrzyga obowiązku prawnego ani nie oznacza wykonanego testu.

Nieaktywna kontrolka korzysta z wyjątku w swoim stanie; nie wyłącza platformy ani grafiki całego ekranu. W aplikacji hybrydowej rozdziel część webową i natywną. Źródło nie mapowało tutaj EN 301 549 ani wymagań prawnych.

Rozwiązania w technologiach

Fragmenty pokazują zmianę w istniejącym ekranie. Kolory, sąsiednie tło, motyw i stany sprawdź w docelowej aplikacji. Przegląd API w źródle pochodzi z 2026-10-04. Build Fluttera nie potwierdza pozostałych frameworków.

import 'package:flutter/cupertino.dart';

// W build() StatefulWidget; selected i setState są stanem ekranu.
Semantics(
  button: true, selected: selected, label: 'Odbiór przy ogrodzie',
  excludeSemantics: true,
  child: CupertinoButton(
    onPressed: () => setState(() => selected = !selected),
    child: Row(children: [
      Container(
        color: const Color(0xFFFFFFFF), width: 32, height: 32,
        child: selected
          ? const Icon(CupertinoIcons.check_mark, color: Color(0xFF15201C))
          : const SizedBox(),
      ),
      const Text('Odbiór przy ogrodzie',
        style: TextStyle(color: Color(0xFF15201C))),
    ]),
  ),
)

import SwiftUI

struct PickupOption: View {
    @State private var selected = true
    private let ink = Color(red: 21.0/255, green: 32.0/255, blue: 28.0/255)
    var body: some View {
        Button { selected.toggle() } label: {
            HStack {
                Image(systemName: selected ? "checkmark.square" : "square")
                    .foregroundStyle(ink)
                Text("Odbiór przy ogrodzie").foregroundStyle(ink)
            }
            .padding().background(Color.white)
        }
        .buttonStyle(.plain)
        .accessibilityLabel("Odbiór przy ogrodzie")
        .accessibilityAddTraits(selected ? .isSelected : [])
    }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun PickupOption(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
    Row(Modifier.background(Color.White)) {
        Checkbox(
            checked = checked, onCheckedChange = onCheckedChange,
            colors = CheckboxDefaults.colors(
                checkedColor = Color(0xFF15201C),
                uncheckedColor = Color(0xFF4A5550),
                checkmarkColor = Color.White
            )
        )
        Text("Odbiór przy ogrodzie", color = Color(0xFF15201C))
    }
}

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

export function PickupOption() {
  const [selected, setSelected] = useState(true);
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel="Odbiór przy ogrodzie"
      accessibilityState={{ selected }}
      onPress={() => setSelected((v) => !v)}
      style={{ backgroundColor: '#FFFFFF', padding: 12, flexDirection: 'row' }}
    >
      <View
        accessible={false}
        style={{ width: 28, height: 28, marginRight: 12 }}
      >
        {selected && (
          <View
            style={{
              width: 12,
              height: 20,
              borderRightWidth: 4,
              borderBottomWidth: 4,
              borderColor: '#15201C',
              transform: [{ rotate: '45deg' }],
            }}
          />
        )}
      </View>
      <Text style={{ color: '#15201C' }}>Odbiór przy ogrodzie</Text>
    </Pressable>
  );
}

<button id="pickup" aria-pressed="true">
  <svg aria-hidden="true" width="28" height="28" viewBox="0 0 28 28">
    <path d="M6 14 L12 20 L23 7" />
  </svg>
  Odbiór przy ogrodzie
</button>
<style>
  #pickup {
    color: #15201c;
    background: #fff;
  }
  #pickup path {
    stroke: #15201c;
    fill: none;
    stroke-width: 4;
  }
  #pickup[aria-pressed='false'] path {
    visibility: hidden;
  }
  #pickup:focus-visible {
    outline: 3px solid #15201c;
    outline-offset: 4px;
  }
</style>
<script>
  const pickup = document.querySelector('#pickup');
  pickup.addEventListener('click', () =>
    pickup.setAttribute(
      'aria-pressed',
      pickup.getAttribute('aria-pressed') === 'true' ? 'false' : 'true',
    ),
  );
</script>

Jak sprawdzić

1. Ustal, co element przekazuje, kto musi to zobaczyć i czy ta wskazówka jest potrzebna. Rozdziel kontrolkę, znacznik stanu i części grafiki. Sprawdź wyjątki oraz równoważną widoczną informację.
2. Odtwórz zwykłe stany wyboru, fokusu, rozwinięcia i hover, jeśli występują. Potwierdź niedostępność nieaktywnego elementu normalnym wejściem.
3. Odczytaj rozwiązany kolor z renderera lub API i faktyczne sąsiednie tła. Uwzględnij obrys, warstwy, alpha i opacity. Nie zakładaj bieli ani koloru ramki jako właściwego tła.
4. Oblicz luminancję sRGB ze współczynnikami 0,2126 / 0,7152 / 0,0722 i punktem linearyzacji 0,04045. Stosunek wynosi (Ljaśniejsze + 0,05) / (Lciemniejsze + 0,05). Porównaj pełny wynik z 3: 2,99:1 nie spełnia progu. Obejrzyj rozpoznawalność potrzebnych fragmentów.
5. Zapisz stan, kolory, geometrię, środowisko i zakres. Brak danych nie oznacza wyniku pozytywnego. Screenshot nie potwierdza czytnika, a drzewo dostępności nie zastępuje wskazówki wizualnej.

Oczekiwany wynik dotyczy każdej wymaganej wskazówki w ocenianym stanie. Nie zgłaszaj automatycznie błędu dla dekoracji ani rzeczywiście nieaktywnej kontrolki.

Obserwacje źródłowe z 2026-10-04

Wykonano natywny XCTest: 1 test, 0 błędów, 43,963 s. Zachowano 14 stanów i 21 wejść; dla WWW 16 odczytów i 15 wejść. Rdzenie kreski w surowych PNG potwierdziły odczytane kolory i biel; nie retuszowano zrzutów. Renderer i screenshot były kolejnymi odczytami trwałego stanu, a nie atomowym pomiarem. Nie badano profilu fizycznego ekranu.

Weryfikacja i ograniczenia

Analiza, 63 testy hostowe, build i działanie źródłowej aplikacji Flutter 3.44.9 / Dart 3.12.2 na iOS Simulator zakończyły się pozytywnie. Dla WWW potwierdzono DOM/CSS/AX, wejścia i obrazy w opisanym zakresie. Pierwsza próba wrappera Dart nie miała dostępu do cache SDK, a pierwsza próba serwera WWW nie mogła otworzyć portu w sandboxie. Późniejsze uprawnione wykonania dały powyższe dowody; problemy środowiska nie były awarią produktu.

Nie sprawdzono VoiceOver ani innych technologii asystujących, fizycznego iPhone’a, ustawień kontrastu, wyglądu i Dynamic Type, natywnego fokusu klawiaturą/FKA, native hover, forced colors, innych motywów, gradientów, dokumentów i pozostałych natywnych frameworków. Brak wykonania nie jest wynikiem negatywnym ani zwolnieniem z wymagania. Redakcja tego artykułu nie uruchamiała ponownie demonstracji.

Reguła może policzyć znaną parę nieprzezroczystych kolorów sRGB. Sama nie rozstrzyga, czy fragment jest potrzebny, jakie sąsiedztwo niesie informację i czy zachodzi wyjątek. Może pomylić dekoracyjny cień z granicą, pominąć jasny checkmark przy poprawnym selected lub zmierzyć go względem ramki. Przy brakujących warstwach i stylach wynik pozostaje nieustalony.

W źródle sprawdzono techniki G207 i G209 dla ikon oraz granic grafiki, G195 i C40 dla fokusu, G174 dla pełnej wersji alternatywnej oraz błąd F78. Nie są dodatkowymi zwolnieniami z normatywnego progu. Cykl wariantów demonstracji nie jest zgodną wersją alternatywną produktu. Jasny rysowany obrys nie dowodzi wszystkich warunków F78. Nie wykonano pełnego testu C40 ani wykresu segmentowego. W sprawdzonym katalogu ACT brakowało dedykowanej reguły 1.4.11; reguła kontrastu tekstu afw4f7 nie obejmuje checkmarka, SVG ani natywnego Fluttera i nie była uruchamiana.

Jak sprawdza Clearship

• Pomiar na Androidzie: detektor grafiki mierzy PNG opisanych aktywnych ImageButton/ImageView bez dzieci i porównuje wynik z 3:1. ImageContrastCheck z ATF także dostarcza kandydatów. Konieczność grafiki, właściwe sąsiedztwo i wyjątek nadal wymagają oceny; uruchomienie silnika nie dowodzi sprawdzenia wszystkich stanów.
• Wskazówka AI na Androidzie i iOS: ocena obrazu może wskazać podejrzane ikony i tekst. Nie podaje wiarygodnego stosunku 3:1 ani samodzielnego rozstrzygnięcia tego kryterium. Dostępny audyt kontrastu iOS w opisanym scenariuszu dotyczy tekstu.
• Braki pokrycia: własny detektor nie obejmuje grafiki iOS, kontrolek z tekstem, wszystkich obrysów, checkmarków, custom paint i grafiki bez węzła. Pełna kwalifikacja części, stanów i rzeczywistych sąsiednich kolorów pozostaje niepełna.

Wyniki badań „Pracowni” nie potwierdzają ogólnego wykonawcy Clearship. Dla nieosiągniętych stanów, brakujących danych i awarii zachowujemy odrębny status. Pusta lista lub brak kandydata nie uzasadniają komunikatu, że nie znaleziono problemów. Katalog wymaga zachowania surowego stosunku, konfliktów i tolerancji prototypu 0,01; nie daje to prawa do zaokrąglenia 2,99 do 3.

Powiązane kryteria

• 1.4.3
  Kontrast (minimalny)

  Kontrast podpisów i innych tekstów oceniamy według wymagań tekstowych.

• 1.4.1
  Użycie koloru

  Znaczenie kodowane samą barwą jest innym problemem niż zbyt mały kontrast.

• 1.1.1
  Treści nietekstowe

  Grafika potrzebuje odpowiedniej alternatywy; sam kontrast jej nie zastępuje.

• 4.1.2
  Nazwa, rola, wartość

  Nazwa, rola i stan selected muszą być poprawne niezależnie od wizualnego znaku.

• 2.4.7
  Widoczny fokus

  Widoczność fokusu wymaga osobnej oceny.

• 2.4.13
  Wygląd fokusu

  Kryterium AAA opisuje powierzchnię i zmianę wyglądu fokusu; nie było oceniane w tej demonstracji.

  Artykuł nie jest jeszcze dostępny.

Wróć do bazy wiedzy.