CSSグラデーション背景ジェネレーター

CSS グラデーション背景とは何ですか?

CSSグラデーション背景は、CSSの標準関数を使ってプログラムで生成する画像です。外部の画像ファイルを用意する必要はありません。

グラデーションは、background-image ではなく、background-color プロパティに割り当てられます。ブラウザーは、定義された軸、形状、または角度にわたって色の値を補間することによってそれらをレンダリングし、コード全体で滑らかな色の遷移を生成します。

ブラウザはペイント時にグラデーションを生成するため、レンダリングを完了する前にブラウザが別のファイルを取得する必要があるラスター背景とは異なり、HTTP リクエストは行われません。

CSS グラデーションには固有の次元がありません。これらは、適用される要素を満たすように拡大縮小されるため、レスポンシブ デザイン (EN) レイアウト内で自然に流動的になります。

Stripe は、実稼働環境におけるこのアプローチのよく知られた例です。同社のヒーロー セクションは、大きなコンテナ上で階層化された linear-gradient() 呼び出しを使用し、外部の画像リクエストを完全に回避しながら、すべての画面密度にわたって鮮明なレンダリングを維持します。

---

CSS グラデーションの種類は何ですか?

CSS は 4 つのネイティブ グラデーション関数、linear-gradient()、radial-gradient()、conic-gradient()、およびそれぞれの反復バリアントを提供します。

各タイプは、色を分配するために異なる幾何学モデルを使用します。レイアウト コンテキストに間違ったタイプを選択すると、カラー ストップ調整だけでは修正できない視覚的なアーチファクトや意図しないブレンドが発生します。

CSS 円錐グラデーションは、LambdaTest データによるとブラウザ間互換性スコア 92/100 を記録しており、Chrome、Firefox、Safari 12.1 以降、Edge 79 以降で完全にサポートされています。 IE 11 では、conic-gradient() はサポートされていません。

線形勾配

軸ベースのカラー分布:

linear-gradient() は、定義された角度または方向で直線に沿って色を遷移させます。

• 方向引数が指定されていない場合、デフォルトの方向は to bottom (180 度) です。

• deg などのキーワードの方向に加えて、turn、rad、および to right の角度単位を受け入れます。

• 2 つのストップを同じ位置に配置することで作成されたハード ストップにより、ブレンドのないシャープなエッジが生成されます。

放射状グラデーション

radial-gradient() は、中心点から外側に向かって色を放射します。

形状とサイズは個別に構成可能です:

• circle は両方の軸で等しい半径を維持します。 ellipse は要素の寸法に合わせて拡大/縮小します (デフォルト)

• サイズキーワード: closest-side、farthest-side、closest-corner、farthest-corner

• 中心位置は、background-position と同じ構文を使用します。

円錐形のグラデーション

色は、軸を横切るのではなく、定義された角度で中心点の周りをスイープします。

conic-gradient() は 4 つのタイプのうち最後にブラウザの完全サポートを実現し、Chrome 69、Firefox 83、Safari 12.1 に導入されました。各カラーストップで deg、turn、および grad 単位の角度値を受け入れます。これは、線形および放射状バリアントで使用されるパーセンテージベースのストップとは異なります。

円グラフとカラー ホイールは 2 つの最も一般的な使用例であり、どちらも JavaScript や SVG を使用せずに実現できます。

グラデーションの繰り返し

標準の勾配関数との主な違いはタイリング動作です。

繰り返しバリアント (repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()) は、単一のグラデーション インスタンスを引き伸ばして要素を埋めるのではなく、要素全体に定義されたパターンを並べて表示します。

非常に短い繰り返し間隔 (たとえば、2 ピクセル間隔に設定された repeating-linear-gradient) では、高 DPI ディスプレイでエイリアシング アーティファクトが発生する可能性があります。物理デバイスでテストするか、Chrome DevTools デバイス エミュレーションを使用すると、運用前にこれらを検出できます。

---

CSS の線形グラデーション構文はどのように機能しますか?

linear-gradient() 構文は、一貫した 3 つの部分の構造に従います: オプションの方向、少なくとも 2 つのカラー ストップ、および各ストップのオプションの位置値。

完全な構文: linear-gradient([direction], color-stop-1, color-stop-2, ...)

方向と角度の値

方向は 2 つの形式を受け入れます:

• キーワードの方向: to right、to bottom、to top left、および同様のコンパスの組み合わせ

• 明示的な角度: 45deg、0.5turn、1.57rad

方向が指定されていない場合、ブラウザはデフォルトで to bottom (180deg に相当) に設定します。 0deg の値は上を指し、度の値は時計回りに増加します。これは、標準の三角関数の規則とは逆です。 90deg が上を向かない理由を 10 分も考える前に、知っておく価値があります。

カラーストップの構文

カラーストップはパターン color position に従います (例: red 25% または #3a86ff 100px)。

• 位置単位: パーセント、ピクセル、em または rem

• 位置のないストップは、前に定義されたストップと次に定義されたストップの間に均等に分散されます。

• 同じ位置にある 2 つのストップ (例: red 50%, blue 50%) は、緩やかなブレンドのないハード エッジを生成します。

色のヒント

カラーヒントは、2 つのカラーストップ間の遷移の中点をシフトします。

構文は、2 つのストップの間にスタンドアロンの位置値を配置します: red, 20%, blue。これにより、デフォルトの 50% マークではなく、20% マークで赤と青のブレンドの中間点に到達するようにブラウザに指示されます。停止位置を調整せずに、グラデーションを一方の側に「引っ張る」ように見せる場合に便利です。

---

CSS 放射状グラデーション構文はどのように機能しますか?

radial-gradient() は、中心点から外側に広がる色を生成し、形状とサイズを個別に構成できます。

完全な構文: radial-gradient([shape] [size] at [position], color-stop-1, color-stop-2, ...)

形状とサイズのパラメータ

非正方形要素では、楕円と円の動作が異なります。

ellipse グラデーションは、要素の幅と高さの比率に合わせて伸縮します。 circle グラデーションは、要素の寸法に関係なく、両方の軸で等しい半径を維持します。つまり、要素が正方形でない場合、円形は中心からずれて表示されます。

実際のキーワードのサイズ設定

farthest-corner がデフォルトで、要素の最も遠い隅に到達するまで広がるグラデーションを生成し、背景を完全に塗りつぶします。

closest-side は、最も近いエッジでグラデーションを停止します。これにより、要素の反対側に目に見えるハード エッジが作成されますが、これはレンダリング エラーではなく、意図的な設計上の選択です。各サイズ キーワードは、同じ要素に対して視覚的に異なる結果を生成します。これらは同じ出力のスタイルのバリエーションではありません。

---

CSS 円錐グラデーション構文はどのように機能しますか?

conic-gradient() は、時計の文字盤上で針が動く様子に合わせて、中心点を中心に角度的に色を分布させます。

完全な構文: conic-gradient([from angle] [at position], color-stop-1, color-stop-2, ...)

デフォルトの開始角度は 0deg (要素の上部) です。デフォルトの中心は 50% 50% です。どちらも独立して変更できます。

角度ベースのカラーストップ

conic-gradient() のカラー ストップは、パーセンテージに加えて角度値も受け入れます。

• conic-gradient(red 0deg, blue 180deg, red 360deg) は、半分が赤、半分が青のスイープを生成します

• conic-gradient(red 0%, blue 50%, red 100%) はパーセンテージを使用して同じ結果を生成します

• 同じ宣言内で角度単位とパーセンテージを混在させることは有効です

円グラフの作成:

3 セグメントの円グラフには JavaScript は必要ありません。構文 conic-gradient(red 120deg, blue 240deg, green 360deg) は、円を 3 つの等しいセクターに分割します。 border-radius: 50% を要素に追加すると、要素が円形に丸められます。

位置制御

at キーワードは、radial-gradient() および background-position と同じ位置構文を使用して、スイープの中心点を設定します。

中心を 50% 50% から移動すると、非対称の角度分布が作成されます。 at 0 0 の円錐グラデーションは要素の左上隅に中心を配置し、要素表面全体に 4 分の 1 円のスイープを生成します。カード デザインのコーナー グロー エフェクトに役立ちます。

---

CSS グラデーション カラー ストップとは何ですか?またその仕組みは何ですか?

カラー ストップは、特定の色がグラデーション内のどこに表示されるか、およびブラウザが隣接するストップにどのように補間するかを定義します。

カラーストップの構文: color position — たとえば、#3a86ff 25% または rgba(0,0,0,0.5) 100px です。

ポジショニングと配信を停止する

ストップの配置を制御する 3 つの動作:

• 明示的な位置で停止すると、グラデーション内の正確な位置でレンダリングされます。

• ポジションのないストップは、前に定義されたストップと次に定義されたストップの間で均等に自動的に配分されます。

• 同一位置に配置された 2 つのストップにより、その間に緩やかな移行がないハードエッジが作成されます。

3 つ以上のストップを順番に積み重ねると、マルチバンド グラデーションが生成されます。背景パターン repeating-linear-gradient(45deg, #eee 0px, #eee 10px, white 10px, white 20px) は、CSS を追加せずに 4 ストップを使用して縞模様の効果を作成します。この方法で構築された CSS 背景パターン (EN)は、画像アセットを必要とせず、すべての解像度で鮮明にレンダリングされます。

色補間

デフォルトでは、ブラウザは sRGB 色空間のストップ間を補間するため、反対の色相間の遷移で濁った中間色が生成される可能性があります。たとえば、彩度の低い灰紫色のゾーンを通過する赤から青などです。

新しい color-mix() 構文と color() 関数は、oklch カラー スペース を含む補間オプションを拡張し、彩度低下アーチファクトを発生させずに知覚的に均一なグラデーションを生成します。 State of CSS 2024 データによると、グラデーションでの oklch 補間に対するブラウザのサポートは約 88% にとどまっています。

カラーヒント (中間点コントロール)

カラーヒントは、ブレンドの中点をシフトする 2 つのカラーストップの間に配置される位置のみの値です。

構文: red, 30%, blue — 30% の値はヒントであり、カラーストップではありません。ブラウザは、デフォルトの 50% ではなく、30% マークで赤から青への移行の中間点に到達します。この片側への非対称な加速は微妙なツールです。ほとんどの開発者は、それが何をするのかを理解するまでは位置の値と同じに見えるため、完全に見逃してしまいます。

---

複数の CSS グラデーションは 1 つの要素にどのように重ねられますか?

複数の CSS グラデーションは、単一の background-image 宣言にカンマ区切りの値としてスタックされます。

background-image: linear-gradient(...), radial-gradient(...), url('image.jpg');

最初に宣言された値は上に表示され、最後の値は下に表示されます。この積み重ね順序は、初めての人をつまずかせる z-index の動作とは逆です。

透明性の要件

上のレイヤーに透明度が含まれている場合、下のレイヤーのみが上のレイヤーを通して表示されます。

• transparent キーワードは rgba(0,0,0,0) に解決されます — 完全に透明な黒

• アルファが 1 未満の rgba() および hsla() 値は、部分的な透明度を生成します。

• 上部の linear-gradient(black, black) は、その下で宣言されているレイヤーの数に関係なく、その下にあるすべてのものをブロックします。

一般的な制作パターン: background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') は、写真の上に半透明の暗いスクリムをオーバーレイし、画像ファイルを変更せずに信頼性の高いテキスト コントラストを作成します。 WebAIM の 2024 Million 分析によると、色のコントラストの悪さは Web サイトの 83.6% に影響を与えています。この階層化されたグラデーション オーバーレイ技術は、画像の多いセクションでの失敗の最も一般的な原因に直接対処します。

レイヤーごとのプロパティ制御

background-size、background-position、および background-repeat は、各レイヤーに順番にマッピングされるカンマ区切りの値を受け入れます。

background-image: linear-gradient(...), url('texture.png');
background-size: cover, 200px 200px;
background-position: center, top left;

cover はグラデーション レイヤーに適用されます。 200px 200px がテクスチャに適用されます。このレイヤーごとのコントロールにより、複雑なCSS アニメーション背景 (EN)やレイヤード オーバーレイ システムを、セレクターを複製したりラッパー要素を追加したりすることなく管理できるようになります。

グラデーションと画像の組み合わせ

グラデーションと url() 画像参照は、同じ background-image 宣言内に共存できます。

グラデーション レイヤーはペイント時にブラウザーで生成されるため、グラデーション レイヤーを画像参照と組み合わせても、HTTP リクエスト数が 1 つの画像フェッチを超えて増加することはありません。グラデーション レイヤー自体はゼロリクエストのままです。

CSS グラデーションはパフォーマンスにどのような影響を与えますか?

CSS グラデーションはペイント時にブラウザによって生成されます。ブラウザがレンダリングする前にネットワーク全体の往復が必要なラスター背景画像とは異なり、 生成される HTTP リクエストはゼロです。

とはいえ、グラデーションにはコストがかからないわけではありません。コストはネットワーク段階ではなく、レンダリング段階で発生します。

アニメーション中の再描画コスト

グラデーション プロパティ (カラー値、角度、停止位置) を直接アニメーション化すると、フレームごとに完全な再描画がトリガーされます。

1 秒あたり 60 フレームで、その再描画は継続的に実行されます。多くのカラーストップや大きな要素寸法を含む複雑なグラデーションでは、再描画のたびにかなりの CPU 時間が消費されます。

アニメーション化されたグラデーション背景の正しいアプローチ:

• 色を直接アニメーション化する代わりに、background-position を使用してグラデーション上の background-size: 400% 400% をアニメーション化します。

• 静的グラデーションの上に重ねられた擬似要素で opacity または transform を使用します。

• will-change: background-image は避けてください。合成レイヤーは作成されず、パフォーマンス上の利点もありません。

複雑なグラデーションとレンダリングコスト

カラーストップが追加されるたびに、ペイント中のピクセル計算の負荷が増加します。

3 ストップのグラデーションは、同じ大きな要素上で 10 ストップのグラデーションよりも著しく高速にレンダリングされます。 GPU メモリが限られているモバイル デバイスでは、非常に狭い間隔 (2 ～ 4 ピクセル) でグラデーションを繰り返すと、エイリアシング アーティファクトとペイント時間の増加の両方が発生する可能性があります。物理的なローエンド Android デバイスでのテストでは、運用前にこれらの問題を検出します。

グラデーション自体ではなく、擬似要素に対する will-change: transform は、フレームごとにグラデーションの再計算を強制することなく、そのレイヤーをコンポジットにプロモートします。

---

CSS グラデーションはレスポンシブ デザインでどのように使用されますか?

CSS グラデーションは、デフォルトではコンテナに合わせてスケールされます。ブラウザが有限ピクセル グリッドを拡大またはトリミングする必要があるラスター画像とは異なり、background-size: cover による回避策は必要ありません。

VWO のデータによると、レスポンシブな Web サイトは、レスポンシブでない同等の Web サイトよりもコンバージョン率が 11% 高いことがわかります。レイアウトの変更に柔軟に適応するグラデーションの背景は、静的な画像の代替に比べてモバイル ファースト デザイン (EN)の利点の一部です。

パーセンテージとピクセル停止位置の関係

さまざまな画面サイズでのストップの動作:

• すべてのブレークポイントで要素のレンダリングされた寸法に応じて停止率がスケールされます。

• コンテナが大きくても小さくても、ピクセル ストップは固定されます。

• 1つのグラデーション内で両方の単位を混在させることは有効で、役立つ場合もあります。ピクセル単位のハードストップで帯の位置を固定し、パーセント指定のストップで周囲の色の混ざり方を調整できます。

50px および calc(100% - 50px) でハードストップを持つグラデーションは、要素の合計幅に関係なく、要素の中央に固定幅のバンドを維持します。このような動作は、パーセントのみの停止では不可能です。

メディアクエリとグラデーションの方向

メディア クエリ (EN)は、画像アセットを追加しなくても、特定のブレークポイントでグラデーションの方向、カラー パレット、または角度を変更できます。

.hero {
  background-image: linear-gradient(to right, #3a86ff, #8338ec);
}

@media (max-width: 768px) {
  .hero {
    background-image: linear-gradient(to bottom, #3a86ff, #8338ec);
  }
}

デスクトップでは水平方向のグラデーションがモバイルでは垂直方向になります。画像の交換や追加の HTTP リクエストはありません。

レスポンシブ画像のグラデーションオーバーレイ

写真の上に半透明のグラデーションを重ねるには、グラデーション レイヤーと画像レイヤーの両方に background-size: cover が必要です。

レイヤーごとの background-size 値が一致しないと、画像はコンテナーを満たすように拡大縮小されますが、グラデーション レイヤーは拡大縮小されず、オーバーレイと写真の間の視覚的な位置合わせが崩れます。 background-size、background-position、および background-repeat の各値は、background-image 宣言の順序で対応するレイヤーにマップされます。

---

CSS グラデーションのアクセシビリティに関する考慮事項とは何ですか?

WebAIM の 2,024 Million 分析によると、色のコントラストの悪さはウェブ上のアクセシビリティの最大の障害であり、全ウェブサイトの 83.6% に影響を及ぼしています。コントラスト比はグラデーション サーフェス全体で継続的に変化するため、グラデーションは繰り返し発生する原因となります。

WCAG 2.1 SC 1.4.3 では、通常のテキストの場合は最低 4.5:1 のコントラスト比が必要で、大きなテキストの場合は 3:1 (18 ピクセル以上の標準または 14 ピクセル以上の太字) が必要です。単色の背景では、1 つのコントラスト チェックで要素全体が合格します。グラデーションの背景では、グラデーションに沿ったすべての点が潜在的な障害となります。

グラデーション背景のコントラストのテスト

自動ツールは約 95% のコントラストの問題を検出しますが、グラデーションや画像の背景に関係する残りの 5% については手動による検証が必要です (web-accessibility-checker.com (EN)、2024)。

グラデーション背景のテスト方法:

• グラデーション範囲内で最も明るい背景色を特定します

• その色と文字の色とのコントラストチェックを実行します。

• テキストが最も明るい点を通過する場合、テキストはすべての点を通過します。

これをサポートするツール: TPGi カラー コントラスト アナライザー (CCA) は、グラデーション サーフェスを含む画面上のピクセルを直接サンプリングします。 Figma の Stark は、CSS が書き込まれる前のモックアップ (EN) フェーズでコントラストをチェックします。

アニメーション化されたグラデーションとモーションの感度

前庭障害は世界中で7,000 万人以上に影響を与えており、アニメーション背景は小さな不便ではなく、実際の障壁となっています (CSS-Tricks)。

アニメーション化されたグラデーション背景は、prefers-reduced-motion メディア クエリを尊重する必要があります。すべての主要なブラウザ (Chrome、Edge、Firefox、Safari、Opera) がこの機能をサポートしています。

@media (prefers-reduced-motion: no-preference) {
  .animated-bg {
    animation: gradientShift 6s ease infinite;
  }
}

アニメーションは、ユーザーがモーションの縮小を要求していない場合にのみ実行されます。情報価値のない装飾的なグラデーション アニメーションは、速度を低下させるのではなく、このクエリの下で完全に削除する必要があります。

色のみの意味

ステータス (低から高、不良から良好) を示すために赤から緑に変化するグラデーションは、色覚異常を持つユーザーを失望させます。

意味を伝えるためにグラデーションカラーだけに依存しないでください。グラデーションをテキスト ラベル、アイコン、または数値と組み合わせます。これは、CSS プログレス バー (EN) コンポーネント、ヒート マップ、および色の遷移を通じてデータをエンコードする背景に適用されます。

---

CSS グラデーションはクロスブラウザ環境でどのように機能しますか?

4 つの CSS グラデーション タイプはすべてChrome 69 以降、Firefox 83 以降、Edge 79 以降、Safari 12.1 以降で完全にサポートされています。 -webkit- プレフィックスは、現在維持されているブラウザの linear-gradient() または radial-gradient() に必要なくなりました。

グラデーション レンダリングの問題の 30% 以上が Safari と Internet Explorer で発生しており、円錐グラデーションでは線形タイプや放射状タイプ (Bomberbot) と比較して失敗率が 2 倍になります。

現在のブラウザのサポート マトリックス

IE 11 は conic-gradient() をサポートしていません。まだ IE 11 を使用している約 0.3 ～ 0.5% のユーザー (StatCounter 2024) については、@supports フォールバックによりレイアウトの破損が防止されます。

@supports を使用したフォールバック戦略

@supports は、conic-gradient() サポートをテストし、円錐レンダリングが失敗する環境に対して linear-gradient() フォールバックを提供します。

.element {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
}

@supports (background: conic-gradient(red, blue)) {
  .element {
    background-image: conic-gradient(from 45deg, #3a86ff, #8338ec);
  }
}

線形グラデーションがあらゆる場所にレンダリングされます。円錐グラデーションは、円錐グラデーションをサポートするブラウザでのみ置き換えられます。 JavaScript もユーザー エージェントのスニッフィングもありません。

Safari 固有のレンダリングに関する注意事項

Safari には、バージョン 14.1 より前の radial-gradient() 楕円レンダリングに関するバグが文書化されていました。

このバグはフレックス コンテナ内の楕円のスケーリングに影響し、楕円が指定された要素に円形のグラデーションが生成されました。 display: flex または display: grid 親内の放射状グラデーションを使用して Safari 14.0 以下でテストすると、出荷前にこれが検出されます。 iOS 上の Safari はデスクトップ Safari と同じレンダリング エンジンに従い、同じバージョン固有のバグを継承するため、ブラウザ間互換性 (EN) テスト ワークフローには物理 iOS デバイスを含める必要があります。

よくある質問：CSSグラデーション背景ジェネレーター

CSS の線形グラデーションと放射状グラデーションの違いは何ですか?

linear-gradient() は、定義された角度で直線軸に沿って色を分配します。

radial-gradient() は、円形または楕円形の中心点から外側に色を広げます。

主な違いはジオメトリです。方向性のある背景には線形を使用し、スポットライトまたはグロー効果には放射状を使用します。

CSS グラデーションを背景色として使用できますか?

いいえ。CSS グラデーションは画像値であり、background-image ではなく、background-color でのみ機能します。

background-color をグラデーション関数に設定すると、出力は生成されません。このプロパティは、<image> データ型を受け入れません。

CSS グラデーションに透明度を追加するにはどうすればよいですか?

1 未満のアルファを持つ rgba() または hsla() カラー値、または transparent キーワードを使用します。

たとえば、linear-gradient(rgba(0,0,0,0.5), transparent) は、 フェードアウトする半透明のオーバーレイを作成します。これは、ヒーロー画像に対するテキストのコントラストの標準的なアプローチです。

CSS グラデーション背景をアニメーション化するにはどうすればよいですか?

グラデーション カラー値を直接アニメーション化すると、フレームごとに完全な再描画がトリガーされ、コストがかかります。

より良いアプローチ: background-position のグラデーションで background-size: 400% 400% をアニメーション化します。これにより、勾配が再計算されずに移動され、GPU の負荷が低く抑えられます。

グラデーションの中央が濁ったり灰色になったりするのはなぜですか?

これは、デフォルトの sRGB 色空間における色補間の問題です。

反対の色相間の移行 (たとえば、赤から青) は、彩度の低い中間ゾーンを通過します。 color() 関数を使用して oklch 補間に切り替えると、知覚的によりきれいなブレンドが生成されます。

1 つの要素に複数のグラデーションを重ねるにはどうすればよいですか?

これらを background-image にカンマ区切りの値としてリストします。

最初の値が一番上に表示されます。下のレイヤーを表示し続けるには透明または半透明のストップが必要です。配置の一貫性を保つために、レイヤーごとに background-size と background-position の値を一致させます。

CSS グラデーション テキスト効果を作成するにはどうすればよいですか?

グラデーションを background-image に適用し、同じ要素に background-clip: text と color: transparent を設定します。

テキストの形状はグラデーションをクリップし、文字の形を通してのみ色が見えるようにします。ブラウザーは、プレフィックスなしですべての最新のブラウザーで完全にサポートされています。

CSS グラデーションはすべてのブラウザで機能しますか?

線形グラデーションと放射状グラデーションは、維持されているすべてのブラウザで完全にサポートされています。 -webkit- プレフィックスは必要なくなりました。

conic-gradient() は IE 11 ではサポートされていません。@supports を使用して、円錐レンダリングが失敗する環境に線形グラデーション フォールバックを提供します。

全ページ CSS グラデーション背景を作成するにはどうすればよいですか?

body を使用して、min-height: 100vh 要素にグラデーションを適用します。

body {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
  min-height: 100vh;
}

これにより、コンテンツの高さに関係なく、ビューポート全体がカバーされます。

グラデーションの背景がアクセシビリティのコントラスト要件を満たしていることを確認するにはどうすればよいですか?

WCAG 2.1 では、通常のテキストに対して4.5:1 のコントラスト比が必要です。グラデーションの場合は、平均ではなく、範囲内の最も明るい背景色に対してテストします。

テキストが最も明るい点で失敗する場合は、半不透明のオーバーレイを追加するか、テキストを単色のコンテナに移動します。