Temeller
Renkler
Arayüzdeki her renk, rolünü anlatan anlamsal bir token'dan gelir. Marka ve mod değişince değerler değişir, roller aynı kalır.
Nasıl çalışır
Bölüm başlığı “Nasıl çalışır”Renkler üç katmanda tanımlanır:
- Ham renkler: Renksiz bir nötr skala (
neutral.0…neutral.1000, girdi kenarlığı içinneutral.450dahil), yedi pastel skala (kırmızı, turuncu, yeşil, mavi, mor, deniz mavisi, pembe) ve markaya özgü renk skalaları. Bileşenler ve ekranlar bunları hiçbir zaman doğrudan kullanmaz. - Anlamsal token’lar: Bir rengin ne işe yaradığını söyler:
color-surface-raisedyükseltilmiş yüzeydir,color-text-subtleikincil metindir. Bu sayfadaki token’lar bunlardır. - Bileşen token’ları: Yalnızca o bileşenin ölçüleri, ör.
button-height-md.
Her marka ve mod için ayrı bir CSS dosyası üretilir. Sayfanın kökündeki data-brand ve data-theme öznitelikleri hangisinin geçerli olacağını seçer. Varsayılan paket neutraldır: birincil eylem açık modda neredeyse siyah, koyu modda neredeyse beyazdır; marka rengi rozetlerde, vurgu alanlarında ve brand tonunda görünür. Marka dosyasında appearance.primary: brand birincil eylemleri marka rengine çevirir (isteğe bağlı bigbang paketi böyledir). Aşağıdaki tablolar seçili markanın değerlerini gösterir; örnek kutuları ise sayfanın o anki moduna göre çizilir.
Açık mod
surface-defaultsurface-raisedsurface-sunkentext-defaulttext-subtleborder-defaultaction-primary-defaultstatus-success-emphasisstatus-danger-emphasis
Koyu mod
surface-defaultsurface-raisedsurface-sunkentext-defaulttext-subtleborder-defaultaction-primary-defaultstatus-success-emphasisstatus-danger-emphasis
Yüzeyler
Bölüm başlığı “Yüzeyler”Sayfanın ve katmanların arka planı. surface-default sayfanın kendisidir; kartlar ve paneller surface-raised ile öne çıkar, layer-1…layer-3 iç içe bölgeleri ayırır. Açık modda sayfa açık gridir; kartlar, açılır katmanlar ve giriş alanları onun üstünde beyazdır. Koyu modda sayfa yumuşak bir koyu gridir, hiçbir zaman saf siyah değildir; kartlar bir basamak daha açıktır.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-surface-default | #f7f7f7#f7f7f7#f7f7f7 | #1e1e1e#1e1e1e#1e1e1e | |
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-surface-layer-2 | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-layer-3 | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-surface-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-surface-disabled | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-inverse | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-surface-brand | #146d83#171717#171717 | #46a0ba#e5e5e5#e5e5e5 | |
--bigbang-color-surface-translucent | rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627) | rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627) | |
--bigbang-color-surface-checker | #fafafa#fafafa#fafafa | #101010#101010#101010 | |
--bigbang-color-surface-scrim | rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549) | rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549) |
Cam materyalinin kendi tonları vardır: çerçeve için material-glass-regular, diyaloglar ve seçili parçalar için material-glass-regular-contrast, koyu medya üstündeki ikon butonlar için material-glass-dim ile birlikte material-glass-clear. material-glass-rim, material-glass-edge, material-glass-shade ve material-glass-specular açık kenarı, ince çizgiyi, iç gölgeyi ve parlamayı çizer. Bunları yalnızca material-glass yardımcılarıyla kullanın; bkz. Materyal.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-material-glass-regular | rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8) | rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098) | |
--bigbang-color-material-glass-regular-contrast | rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803) | rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196) | |
--bigbang-color-material-glass-clear | rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196) | rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547) | |
--bigbang-color-material-glass-dim | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | |
--bigbang-color-material-glass-rim | rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254) | rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451) | |
--bigbang-color-material-glass-edge | rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705) | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-color-material-glass-shade | rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098) | rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547) | |
--bigbang-color-material-glass-specular | rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373) | rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039) |
Okunan her şey. text-default gövde metni ve başlıklar, text-subtle yardımcı metin, text-subtlest zaman damgası gibi en düşük öncelikli bilgi içindir. Bağlantılar text-link kullanır; nötr görünümde bu renk metin rengine eşittir, bu yüzden bağlantılar her zaman alt çizgi taşır.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-subtlest | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-placeholder | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-text-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-text-on-brand | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-text-link | #125768#171717#171717 | #77bacf#fafafa#fafafa | |
--bigbang-color-text-link-hovered | #0e414f#404040#404040 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-text-info | #0068a5#0068a5#0068a5 | #a9d7ff#a9d7ff#a9d7ff |
İkonlar
Bölüm başlığı “İkonlar”İkon renkleri metinden ayrıdır, çünkü ikonun asgari kontrast şartı (3:1) metninkinden (4.5:1) düşüktür.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-icon-default | #262626#262626#262626 | #f5f5f5#f5f5f5#f5f5f5 | |
--bigbang-color-icon-subtle | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-icon-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-icon-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-icon-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-icon-success | #138a50#138a50#138a50 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-icon-warning | #a16600#a16600#a16600 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-icon-info | #007ac1#007ac1#007ac1 | #79c2ff#79c2ff#79c2ff |
Kenarlıklar
Bölüm başlığı “Kenarlıklar”border-input form alanlarının, onay kutularının ve radyo düğmelerinin sınırıdır ve 3:1 kontrast taşır; border-default ve border-subtle yalnızca bölgeleri ayıran süs çizgileridir. border-overlay açılır pencere, menü, diyalog ve bildirimlerin ince kenarıdır. Odaktaki öğe border-focus ile gösterilir.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-border-strong | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-selected | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-border-disabled | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) |
İşlemler
Bölüm başlığı “İşlemler”Button ve benzeri etkileşimli öğelerin arka planları ve üzerlerindeki metin. Her görünüm için varsayılan, üzerine gelme ve basılı durum ayrı token’dır; “on” ile başlayanlar o arka planın üstündeki metin rengidir.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-primary-hovered | #125768#262626#262626 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-action-primary-pressed | #0e414f#404040#404040 | #cfe6ee#a1a1a1#a1a1a1 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-action-secondary-default | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-secondary-hovered | #fafafa#fafafa#fafafa | #303030#303030#303030 | |
--bigbang-color-action-secondary-pressed | #f5f5f5#f5f5f5#f5f5f5 | #404040#404040#404040 | |
--bigbang-color-action-on-secondary-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-action-danger-default | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-action-danger-hovered | #822b2e#822b2e#822b2e | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-danger-pressed | #4c1d1d#4c1d1d#4c1d1d | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-action-danger-subtle-pressed | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-action-on-danger-subtle-default | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-on-danger-default | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-action-disabled-default | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-on-disabled-default | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 |
Durumlar
Bölüm başlığı “Durumlar”Bir şeyin durumunu bildiren renkler: işlem durumları, uyarılar, bildirimler. Her ton için beş rol vardır: background ve foreground sade gösterim, emphasis ve on-emphasis vurgulu gösterim, border sade gösterimin kenarı. Sade gösterim pasteldir: açık zemin, koyu metin. Pastel border süs amaçlıdır ve 3:1’in altında kalabilir; bu yalnızca Badge ve InlineAlert için kabul edilir, çünkü orada durumu metin taşır. Form alanı ve durum kenarları 3:1 kuralına uyar.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-status-neutral-background | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-status-neutral-foreground | #404040#404040#404040 | #e5e5e5#e5e5e5#e5e5e5 | |
--bigbang-color-status-neutral-emphasis | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-status-neutral-border | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-status-neutral-on-emphasis | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-status-brand-background | #edf5f8#fcf1ec#f0f3ff | #092932#3c190a#1d2046 | |
--bigbang-color-status-brand-foreground | #125768#7b3717#3e4490 | #a4d0df#f3b9a1#b9c4ff | |
--bigbang-color-status-brand-emphasis | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-status-brand-border | #cfe6ee#fad9cc#d9dfff | #0e414f#5e2911#2f336e | |
--bigbang-color-status-brand-on-emphasis | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-status-info-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-color-status-info-foreground | #015182#015182#015182 | #c8e5ff#c8e5ff#c8e5ff | |
--bigbang-color-status-info-emphasis | #2193e0#2193e0#2193e0 | #79c2ff#79c2ff#79c2ff | |
--bigbang-color-status-info-border | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-status-info-on-emphasis | #072033#072033#072033 | #072033#072033#072033 | |
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-success-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-status-success-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-status-success-on-emphasis | #092414#092414#092414 | #092414#092414#092414 | |
--bigbang-color-status-warning-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-status-warning-foreground | #6c4300#6c4300#6c4300 | #fddbb4#fddbb4#fddbb4 | |
--bigbang-color-status-warning-emphasis | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-status-warning-border | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-status-warning-on-emphasis | #2c1902#2c1902#2c1902 | #2c1902#2c1902#2c1902 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-status-danger-foreground | #822b2e#822b2e#822b2e | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-status-danger-emphasis | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-border | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-status-danger-on-emphasis | #331212#331212#331212 | #331212#331212#331212 |
Tutar artışı ve düşüşü gibi finansal veriler için. Yalnızca sayının yönünü gösterir, durum bildirmez.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-data-positive | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-data-negative | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
Grafik serilerinin renkleri ve ölçekler Veri görselleştirme sayfasındadır.
Etiket renkleri
Bölüm başlığı “Etiket renkleri”Durum anlamı taşımayan kategori renkleri: Tag, Badge ve Avatar baş harfleri kullanır. Her renk için zemin, metin ve kenar vardır; metin zeminine karşı en az 4.5:1 kontrast taşır.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-tag-red-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-tag-red-foreground | #822b2e#822b2e#822b2e | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-tag-red-border | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-tag-orange-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-tag-orange-foreground | #6c4300#6c4300#6c4300 | #fddbb4#fddbb4#fddbb4 | |
--bigbang-color-tag-orange-border | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-tag-green-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-tag-green-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-tag-green-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-tag-blue-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-color-tag-blue-foreground | #015182#015182#015182 | #c8e5ff#c8e5ff#c8e5ff | |
--bigbang-color-tag-blue-border | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-tag-violet-background | #efebff#efebff#efebff | #31264c#31264c#31264c | |
--bigbang-color-tag-violet-foreground | #523e83#523e83#523e83 | #e3dcff#e3dcff#e3dcff | |
--bigbang-color-tag-violet-border | #e3dcff#e3dcff#e3dcff | #523e83#523e83#523e83 | |
--bigbang-color-tag-teal-background | #dcf5f2#dcf5f2#dcf5f2 | #093533#093533#093533 | |
--bigbang-color-tag-teal-foreground | #005956#005956#005956 | #bfece8#bfece8#bfece8 | |
--bigbang-color-tag-teal-border | #bfece8#bfece8#bfece8 | #005956#005956#005956 | |
--bigbang-color-tag-pink-background | #ffe7f1#ffe7f1#ffe7f1 | #461e32#461e32#461e32 | |
--bigbang-color-tag-pink-foreground | #782f56#782f56#782f56 | #ffd3e6#ffd3e6#ffd3e6 | |
--bigbang-color-tag-pink-border | #ffd3e6#ffd3e6#ffd3e6 | #782f56#782f56#782f56 |
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Kontrast
Bölüm başlığı “Kontrast”Her marka ve mod derlendiğinde bir test çalışır ve şu çiftleri denetler; biri tutmazsa derleme durur:
- Metin ile arka planı: en az 4.5:1. Durum renklerinde hem sade hem vurgulu gösterim, yükseltilmiş yüzeydeki durum metni, etiket renk çiftleri, çerçeveli rozetlerde sayfa yüzeyindeki
violet,tealvepinketiket metni vesurface-layer-1üzerindeki metin (CodeBlock) dahil. - Form alanı kenarlığı, odak çizgisi, ikonlar, durum vurgu dolguları ve grafik serileri: en az 3:1.
Yeni bir marka eklerken renk skalası bu testten geçmeden kullanıma girmez.
Yönergeler
Bölüm başlığı “Yönergeler”Rengi role göre seçin, görüntüye göre değil
Bölüm başlığı “Rengi role göre seçin, görüntüye göre değil”bg-surface-raised text-fg-defaultbg-[#FFFFFF] text-[#1B1E23]Durumu yalnızca renkle anlatmayın
Bölüm başlığı “Durumu yalnızca renkle anlatmayın”Renk görmeyen ya da ayırt edemeyen kullanıcılar için durum her zaman metinle de söylenir.