Formulářový prvek v barvě, která neodpovídá pozadí

Kontrola se ptá na dvě věci naráz. Nejdřív: je stránka tmavá? (spočítá se jas pozadí <body>; pod prahem se považuje za tmavou). A pak: deklaruje dokument, že tmavý režim podporuje? (vlastnost color-scheme na kořenovém prvku).

Když je stránka tmavá, ale color-scheme o tmavém režimu nic neříká, vznikne nález u formulářových prvků, které si vzhled kreslí sám prohlížeč: výběrových polí, zaškrtávátek a přepínačů. Report jich uvede nejvýš pět.

Proč právě tyhle prvky: jejich vzhled si prohlížeč určuje sám a řídí se přitom deklarovaným barevným schématem. Na tmavé stránce bez deklarace je vykreslí ve světlé variantě: bílé zaškrtávátko na tmavém pozadí, světlý rozbalovací seznam v jinak tmavém formuláři.

Co kontrola nedělá: neměří skutečný kontrast těch prvků (to je COLOR-01), nepozná stránku, která tmavý režim řeší vlastními styly bez deklarace, a nevidí prvky s plně vlastním vzhledem. Nález je na úrovni stránky a je informativní.

Na viditelnost v odpovědích AI to vliv nemá žádný. Je to vizuální detail, ale detail, který je vidět na první pohled a působí jako nedodělek.

Co color-scheme doopravdy dělá, je dobře zdokumentované: říká prohlížeči, jaké barevné schéma stránka podporuje, a prohlížeč podle toho vykreslí prvky, které si kreslí sám: formulářová pole, posuvníky, výchozí barvu pozadí. Bez deklarace předpokládá světlé schéma.

Proč to označujeme jen jako informaci a ne jako vadu: protože se to netýká funkce ani čitelnosti obsahu, jen vzhledu ovládacích prvků. A protože stránka může tmavý režim řešit vlastními styly natolik důkladně, že naši heuristiku splní neprávem.

Kde to přesto stojí za opravu: je to jeden řádek CSS. Z celého modulu designu nejlevnější oprava vůbec, a projeví se okamžitě, včetně posuvníků a vestavěných prvků, na které se při ručním stylování zapomíná.

Na tmavé stránce stačí deklarovat schéma:

:root {
  color-scheme: dark;
}

A pokud web podporuje obě varianty a přepíná se podle nastavení systému:

:root {
  color-scheme: light dark;
}

• Pořadí hodnot u light dark určuje výchozí volbu pro prohlížeč, který nastavení systému nezná.
• Deklarace ovlivní i posuvníky a vestavěné ovládací prvky, ne jen formuláře; to je hlavní důvod, proč se vyplatí i na webu, který má formuláře nastylované vlastními barvami.
• Má-li web vlastní přepínač motivu, nastavte color-scheme podle zvoleného motivu, ne napevno. Jinak si uživatel přepne web do světlého a formulářové prvky zůstanou tmavé.
• Nepleťte si to s prefers-color-scheme. To je dotaz „co si přeje uživatel“; color-scheme je odpověď „co umí stránka“. Potřebujete obojí.

Ověření je vizuální a rychlé: otevřete formulář na tmavé stránce a podívejte se na zaškrtávátko a rozbalovací seznam. Když svítí bíle, deklarace chybí.