WCAG コントラスト比の計算式
前景色と背景色の相対的な輝度コントラストを計算します。
Formula
コントラスト = (L1 + 0.05) / (L2 + 0.05) ここで、L1 は明るい輝度です。
Variables
- R、G、B
- sRGB チャネル (0 ～ 255 または 0 ～ 1 の正規化)
- H、S、L
- HSL の色相 (度)、彩度、明度 (0 ～ 1)
- L
- HSL/OKLCH の相対輝度 (WCAG) または明度
FAQ
- WCAG のコントラスト比の式は印刷ワークフローにとって正確ですか?
- 画面の RGB と印刷の CMYK は異なる色域を使用します。変換を近似的な証明として扱います。商業印刷用の ICC プロファイルを使用して調整します。
- この式を CSS で使用できますか?
- 最新の CSS は、多くの操作で color-mix()、oklch()、および lab() をサポートしています。複雑なパイプラインの場合は、JavaScript で計算し、CSS 変数をエクスポートします。
- Color DevByte は私のカラーをアップロードしますか?
- いいえ。数式リファレンス ページは静的なドキュメントです。インタラクティブ ツールはブラウザ上で 100% クライアント側で実行されます。
概要
前景色と背景色の相対的な輝度コントラストを計算します。
Color DevByte は、サーバーにデータを送信せずに再現可能な色の計算を必要とする開発者、デザイナー、アクセシビリティのレビュー担当者向けに、この公式を文書化しています。
リンクされたカラー ツールを使用して、ライブ プレビューとマルチフォーマット エクスポートでこの数式をインタラクティブに適用します。
この式を使用する場合
デザイン トークンの構築、WCAG コントラストの検証、または CSS、Tailwind、またはデザイン システム JSON でのカラー パイプラインの自動化を行うときに、wcag コントラスト比の式を適用します。
実稼働 UI の場合は、常にコントラスト チェッカーまたはビジュアル プレビューを使用して結果を確認してください。ガンマ補正と色域マッピングのエッジ ケースにより、結果が変わる可能性があります。
実装メモ
ブラウザベースのツールは、輝度または ΔE の計算前に sRGB を線形化する必要があります。
RGB ブレンドで一般的な灰色がかった中間点を避けるために、グラデーションとテーマには OKLCH または LAB 補間を優先します。