#ffffff · Kaart: rgba(255,255,255,0.08)Mõlemad teemad
Mis on värviskeem ehk teema?
Teema on nimetatud disainimärgendite kogum — taust, pind, tekst, teisene tekst, ääris ja aktsent —, mida iga komponent loeb kõvakodeeritud värvide asemel. Tumedalt heledale lülitumine vahetab märgendite väärtused ühe korra ja kogu liides järgib neid, seepärast muudab üks aktsendivahetus kogu rakenduse välimust.
Näide: tume skeem paarib valge teksti (#ffffff) taustaga #0f2027, hele skeem aga #1a1a2e taustaga #f5f7fa. Suhtelise heleduse arvutus annab kontrastiks umbes 16,7:1 tumedas ja 15,9:1 heledas skeemis — mõlemad kaugele üle WCAG AA miinimumi 4,5:1 tavatekstile. Teisene tekst on meelega nõrgem (umbes 7,7:1 tumedas ja 4,4:1 heledas).
Kuidas teemaeelvaadet kasutada
- Lülitu tumeda ja heleda vahel, et mõlemat märgendikogumit kõrvuti võrrelda.
- Võrdle tausta-, pinna- ja tekstinäidiseid, millest kumbki skeem koosneb.
- Vaata aktsentvärvi, mis juhib nuppe, linke ja esiletõste.
- Kasuta samu märgendeid oma CSS-is, et eelvaade oma ehitusega kokku läheks.
Teemad ja kontrast — korduma kippuvad küsimused
Mis on disainimärgend?
Disainimärgend on nimetatud väärtus, näiteks --text või --surface, millele komponendid viitavad literaalsete värvide asemel. Märgendi üks kord muutmine uuendab kõik kasutuskohad — seetõttu on teemavahetus hetkeline.
Miks on kontrast teema puhul oluline?
Tekst peab jääma loetavaks igal taustal. WCAG AA nõuab vähemalt 4,5:1 tavatekstile ja 3:1 suurele tekstile, seega tuleks iga märgendikogumit kontrollida, mitte eeldada.
Miks ei ole tume režiim puhtalt must?
Väga tumedad hallid, nagu #0f2027, vähendavad OLED-paneelidel määrdumist ja säilitavad veidi sügavust, nii et pinnad jäävad eristatavaks ka ilma karmide puhtmustade servadeta.
