Käsitteet

forced-colors

Katso myös: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

CSS-mediakysely, joka tunnistaa käyttäjän asettamat korkean kontrastin tilat — ensisijaisesti Windowsin korkean kontrastin tilan sekä Chromen ja Edgen Forced Colors -tilan. Kehittäjät käyttävät sitä mukauttaakseen renderöintiä, kun järjestelmävärit ohittavat sivuston tyylit.

forced-colors on CSS-mediakysely, joka tunnistaa, onko käyttäjä ottanut käyttöön pakollisten värien tilan — tyypillisesti Windowsin korkean kontrastin tilan (HCM), joka korvaa verkkosivuston värivalinnat pienellä järjestelmäpaletilla, jonka käyttäjä on itse valinnut (valkoinen mustalla, musta valkoisella, keltainen mustalla tai mukautettu paletti).

Pakollisten värien tilaa käyttävät aktiivisesti heikkonäköiset käyttäjät, erityisesti ne, joilla on valonherkkyys tai äärimmäiset kontrastivaatimukset. Sitä käyttävät myös henkilökohtaisena mieltymyksenä käyttäjät, joilla ei ole dokumentoitua vammaa, mutta jotka yksinkertaisesti pitävät korkeasta kontrastista.

Mitä HCM tosiasiassa tekee

Kun Windowsin korkean kontrastin tila on päällä, käyttöjärjestelmä korvaa sivuston värit pienellä joukolla järjestelmävärejä:

  • Canvas — sivun tausta.
  • CanvasText — oletustekstin väri.
  • LinkText — linkin väri.
  • VisitedText — vierailtujen linkkien väri.
  • ButtonText — painikkeen teksti.
  • ButtonFace — painikkeen tausta.
  • HighlightText / Highlight — valitun tekstin värit.
  • GrayText — poistettu käytöstä -teksti.
  • Mark / MarkText — korostettu teksti.

Selaimet pakollisten värien tilassa korvaavat useimmat kehittäjän määrittelemät värit näillä järjestelmäväreillä. Ne myös poistavat taustatiedostot ja nollaavat useita visuaalisia ominaisuuksia järjestelmän oletusarvoihin.

Tämä on tarkoituksellista: käyttäjä on valinnut kontrastipaletin, joka toimii hänelle, eikä hän halua sivuston ohittavan tätä valintaa. Sivuston tehtävä on yhteistyö, ei vastarinta.

CSS-mediakysely

Kehittäjä tunnistaa pakollisten värien tilan näin:

@media (forced-colors: active) {
  /* käyttäjä on HCM:ssä tai vastaavassa; mukauta CSS tässä */
}

Liittyvä arvo prefers-color-scheme on riippumaton — käyttäjä voi olla tummassa pakollisten värien tilassa (valkoinen-mustalla-järjestelmäpaletti) ja prefers-color-scheme-kysely voi silti palauttaa light, koska käyttäjä ei ole nimenomaisesti valinnut “tumma tila” -asetusta.

Mitä tuotannossa menee pieleen

  • Taustatiedostot muuttuvat näkymättömiksi. Pakollisten värien tila poistaa taustatiedostot. Jos “napsauta laajentaaksesi” -nuolesi on background-image-SVG ilman varatekstiä, käyttäjä ei näe mitään. Korjaus: käytä <svg>:tä tai inline-kuvakkeita, joissa on currentColor, jotta ne saavat CanvasText-värin; tai tarjoa tekstivaihtoehto.
  • Reunukset katoavat. Jotkin reunukset poistetaan tai korvataan CanvasText-värisillä reunuksilla. Visuaalinen hierarkia, joka perustui hienovaraisiin reunusväreihin, on poissa. Auditoi komponenttien reunukset HCM:ssä.
  • Kohdistusindikaattorit lakkaavat toimimasta. Mukautetut kohdistusrenkaat, jotka on piirretty box-shadow-ominaisuudella, menettävät värinsä. Käytä outline-ominaisuutta (joka säilyy) tai tunnista pakollisten värien tila ja tarjoa järjestelmäväreistä tietoinen vaihtoehto.
  • Vain hover-tilassa näkyvät elementit katoavat pysyvästi. Tooltip-tyyppiset komponentit, jotka perustuvat background-image-hover-tiloihin, epäonnistuvat.
  • forced-color-adjust: none. Jotkut suunnittelijat käyttävät tätä CSS-ominaisuutta poistaakseen pakollisten värien käsittelyn tietystä elementistä. Tämä on lähes aina väärä valinta — se tarkoittaa, että käyttäjä menettää nimenomaisesti pyytämänsä värit. Käytä säästeliäästi, vain aidosti koristeellisilla elementeillä, joissa muotoilun identiteetti on välttämätön (logot, brändikohtaiset kuvakkeet), äläkä koskaan tekstissä tai interaktiivisissa ohjaimissa.

Testaaminen

Windows: Asetukset → Helppokäyttötoiminnot → Kontrastitemat → valitse yksi sisäänrakennetuista paleteista (Aquatic, Desert, Dusk, Night sky) ja lataa sivu uudelleen. Chrome ja Edge noutavat järjestelmäasetuksen; Firefox käyttää omaa pakollisten värien kytkintä selaimen asetuksissa.

Useimmat ongelmat huomataan ensimmäisellä tarkistuksella: puuttuvat kuvakkeet, näkymättömät reunukset, rikkoutuneet kohdistusrenkaat. Korjaa ne järjestelmäväreistä tietoisella CSS:llä forced-colors: active -mediakyselyssä.