color-contrast() в CSS — вибір контрастного кольору тексту
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Переконайтеся, що ви використовуєте функцію
автор: Bondcolor-contrast()з валідними значеннями кольорів для отримання коректних результатів контрастності.
Синтаксис
color-contrast(<color> vs <color-list>);Функція color-contrast може отримувати 2 значень:
-
<color> -
Будь-яке валідне значення кольору.
автор: Bond -
<color-list> -
Розділені комами значення кольорів, що містять принаймні два кольори для порівняння з першим значенням.
автор: Bond
Переглядачі
Переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Перший ряд — color: color-contrast(…): оголошення відкинуто, і текст на темних плитках лишився чорним, тобто нечитабельним. Другий ряд — та сама розмітка з contrast-color(): браузер сам ставить чорний або білий. Третій — ручний спосіб, який працює всюди: пара «тло + текст» у власних властивостях. ⚠️ У браузерах без підтримки contrast-color() середній ряд виглядатиме так само зламано, як перший.
HTML
<p class="head">color: color-contrast(…) — оголошення відкинуто, текст лишився чорним:</p>
<div class="row">
<span class="sw cc t1">navy</span>
<span class="sw cc t2">wheat</span>
<span class="sw cc t3">#2f6fd0</span>
<span class="sw cc t4">#f2b134</span>
</div>
<p class="head">color: contrast-color(…) — браузер сам обирає чорний або білий:</p>
<div class="row">
<span class="sw ok t1">navy</span>
<span class="sw ok t2">wheat</span>
<span class="sw ok t3">#2f6fd0</span>
<span class="sw ok t4">#f2b134</span>
</div>
<p class="head">Ручна пара «тло + текст» — працює скрізь і без сюрпризів:</p>
<div class="row">
<span class="sw manual m1">navy</span>
<span class="sw manual m2">wheat</span>
<span class="sw manual m3">#2f6fd0</span>
<span class="sw manual m4">#f2b134</span>
</div>
<p class="note">Фільтр contrast() — зовсім інша функція: він не обирає колір,
а розтягує різницю в уже намальованому. Ось та сама плитка без нього і з ним:</p>
<div class="row">
<span class="sw shot">filter немає</span>
<span class="sw shot fc">filter: contrast(2.5)</span>
</div>CSS
.head {
margin: 18px 0 6px;
color: #5a6472;
font-size: .9em;
}
.note {
margin: 22px 0 6px;
max-width: 560px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sw {
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 60px;
font: 600 13px/1 ui-monospace, monospace;
}
.t1 { background: navy; }
.t2 { background: wheat; }
.t3 { background: #2f6fd0; }
.t4 { background: #f2b134; }
.cc.t1 { color: color-contrast(navy vs black, white); }
.cc.t2 { color: color-contrast(wheat vs black, white); }
.cc.t3 { color: color-contrast(#2f6fd0 vs black, white); }
.cc.t4 { color: color-contrast(#f2b134 vs black, white); }
.ok.t1 { color: contrast-color(navy); }
.ok.t2 { color: contrast-color(wheat); }
.ok.t3 { color: contrast-color(#2f6fd0); }
.ok.t4 { color: contrast-color(#f2b134); }
.manual {
background: var(--bg);
color: var(--fg);
}
.m1 { --bg: navy; --fg: #fff; }
.m2 { --bg: wheat; --fg: #1c1c1c; }
.m3 { --bg: #2f6fd0; --fg: #fff; }
.m4 { --bg: #f2b134; --fg: #1c1c1c; }
.shot {
width: 170px;
background: linear-gradient(90deg, #6c7a8a, #9aa6b2);
color: #e8edf3;
}
.fc {
filter: contrast(2.5);
}Коментарі
Коментарів ще немає — будьте першим!