#ffffff · Kortelė: rgba(255,255,255,0.08)Abi temos
Kas yra spalvų schema ar tema?
Tema yra įvardytas dizaino žetonų rinkinys — fonas, paviršius, tekstas, antrinis tekstas, rėmelis ir akcentas — kurį kiekvienas komponentas skaito vietoj fiksuotų spalvų. Perjungus iš tamsios į šviesią, žetonų reikšmės pakeičiamos vieną kartą ir visa sąsaja seka paskui, todėl vienas akcento pakeitimas perstilizuoja visą programą.
Pavyzdys: tamsi schema derina baltą tekstą (#ffffff) su fonu #0f2027, o šviesi — #1a1a2e su #f5f7fa. Apskaičiavus santykinį šviesumą gaunamas maždaug 16,7:1 kontrastas tamsioje ir 15,9:1 šviesioje schemoje — abu gerokai viršija WCAG AA minimumą 4,5:1 įprastam tekstui. Antrinis tekstas tyčia silpnesnis (apie 7,7:1 tamsioje ir 4,4:1 šviesioje).
Kaip naudotis temų peržiūra
- Perjunkite tamsią ir šiesią, kad palygintumėte abu žetonų rinkinius.
- Palyginkite fono, paviršiaus ir teksto pavyzdžius, iš kurių sudaryta kiekviena schema.
- Pažiūrėkite akcento spalvą, kuri valdo mygtukus, nuorodas ir paryškinimus.
- Naudokite tuos pačius žetonus savo CSS, kad peržiūra atitiktų jūsų kūrimą.
Temos ir kontrastas — dažni klausimai
Kas yra dizaino žetonas?
Dizaino žetonas yra įvardyta reikšmė, pvz., --text arba --surface, į kurią komponentai nurodo vietoj konkrečių spalvų. Pakeitus žetoną vieną kartą, atsinaujina visos naudojimo vietos, todėl temos perjungimas akimirksniu.
Kodėl temoje svarbus kontrastas?
Tekstas turi likti įskaitomas bet kuriame fone. WCAG AA reikalauja bent 4,5:1 įprastam tekstui ir 3:1 dideliam tekstui, tad kiekvieną žetonų rinkinį verta tikrinti, o ne laikyti savaime aišku.
Kodėl tamsusis režimas nėra visiškai juodas?
Labai tamsūs pilki, kaip #0f2027, mažina tepimą OLED ekranuose ir išlaiko šiek tiek gylio, todėl paviršiai lieka atskiriami be aštrių visiškai juodų kraštų.
