このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
contrast()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
contrast() はCSS の関数で、入力画像のコントラストを調整します。結果は<filter-function> です。
試してみましょう
filter: contrast(1);filter: contrast(1.75);filter: contrast(50%);filter: contrast(0);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>構文
contrast(amount)引数
amount省略可結果のコントラストで、
<number>または<percentage>で指定します。100%未満の値ではコントラストが下がり、100%を超える値ではコントラストが上がります。0または0%の値では画像が完全に灰色になり、1または100%の値では入力が変更されないままになります。補間の初期値は1です。デフォルト値は1です。
以下は、等価な値のペアです。
contrast(0) /* 完全な灰色 */contrast(0%)contrast(0.65) /* 65% のコントラスト */contrast(65%)contrast() /* 効果なし */contrast(1)contrast(100%)contrast(2) /* 2 倍のコントラスト */contrast(200%)形式文法
<contrast()> =
contrast([<number>|<percentage>]?)
例
backdrop-filter プロパティで
この例では、contrast() フィルターをbackdrop-filter プロパティで段落と東福テキストに適用しており、<p> と<code> の背後の領域で色が変化しています。
.container { background: url("unity_for_the_people.jpg") no-repeat center / contain #333399;}p { backdrop-filter: contrast(0.5);}code { backdrop-filter: contrast(0.15);}.container { padding: 3rem; width: 30rem;}p { padding: 0.5rem; color: white; font-family: sans-serif;}<div> <p> テキストと背景色のコントラストが十分にあることを常に確認してください。テキストが背景画像の上に表示される可能性がある場合は、 <code>backdrop-filter</code> を指定してください。 <code>contrast()</code> フィルターで背景色のコントラストを低減すると、可読性は向上しますが、アクセシビリティを保証するものではありません。 </p></div>filter プロパティで
この例では、contrast() フィルターを CSS のfilter プロパティを使用して適用し、コンテンツ、境界線、背景、影を含む要素全体の色をシフトさせることでコントラストを変更しています。
p:first-of-type { filter: contrast(30%);}p:last-of-type { filter: contrast(300%);}p { text-shadow: 2px 2px blue; background-color: magenta; color: palegoldenrod; border: 1em solid rebeccapurple; box-shadow: inset -5px -5px red, 5px 5px yellow; padding: 0.25rem; font-size: 1.25rem; font-family: sans-serif; width: 85vw;}<p>この段落はコントラストが低下しています。</p><p>この段落は通常のコントラストです。</p><p>この段落はコントラストが向上しています。</p>url() と SVG の contrast フィルター
SVG の<filter> 要素を使用して、カスタムフィルター効果を定義し、それをid で参照することができます。<filter> の<feComponentTransfer> プリミティブは、ピクセルレベルでの色変換を可能にします。 次のものが指定されたとします。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 151" height="0" width="0" overflow="visible" color-interpolation-filters="sRGB"> <filter> <feComponentTransfer> <feFuncR type="linear" slope="2" intercept="-0.5" /> <feFuncG type="linear" slope="2" intercept="-0.5" /> <feFuncB type="linear" slope="2" intercept="-0.5" /> </feComponentTransfer> </filter></svg>これらの値は同じ結果を生み出します。
filter: contrast(200%);filter: url("#contrast"); /* 埋め込み SVG による */filter: url("folder/fileName.svg#contrast"); /* 外部 SVG フィルター定義 */この例では、 3 つの画像を表示させています。 1 つ目は、contrast() フィルター関数を適用した画像、 2 つ目は、等価なurl() フィルターを適用した画像、そして比較用に元の画像です。
<table> <thead> <tr> <th><code>contrast()</code></th> <th><code>url()</code></th> <th>Original image</th> </tr> </thead> <tbody> <tr> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="Pride flag" /> </td> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="Pride flag" /> </td> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="Pride flag" /> </td> </tr> </tbody></table>.css-filter { filter: contrast(200%);}.svg-filter { filter: url("#contrast");}th,td { padding: 5px;}svg:not(:root) { display: none;}仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-contrast |
ブラウザーの互換性
関連情報
- CSS フィルター効果モジュール
- その他の
filterおよびbackdrop-filterプロパティの値で使用できる<filter-function>関数には、次のものがあります。