カラーコントラストチェッカー
テキストと背景色のコントラスト比を計算し、WCAG 2.x AA・AAAアクセシビリティ基準の合否を判定します。すべてブラウザ内で処理されます。
2つの色をhex形式で入力してください (例: #333333)
よくある質問
대비율은 어떻게 계산되나요?
WCAG 정의에 따라 두 색의 상대 휘도(relative luminance)를 구해 (밝은 값 + 0.05) ÷ (어두운 값 + 0.05)로 계산합니다. 결과는 1:1(동일)부터 21:1(흑백)까지입니다.
큰 텍스트의 기준은 무엇인가요?
18pt(약 24px) 이상, 또는 굵은 글씨 14pt(약 18.7px) 이상이 큰 텍스트입니다. 큰 텍스트는 AA 3:1, AAA 4.5:1로 기준이 완화됩니다.
어떤 색상 형식을 지원하나요?
#rgb, #rrggbb hex 형식을 지원합니다(# 생략 가능). rgb()나 hsl() 값은 색상 변환기로 hex로 바꾼 뒤 사용하세요.
関連ツール
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
基準色から明るいトーンと暗いトーンのHEXパレットを生成します。デザインシステムの色階調づくりに便利で、処理はすべてブラウザ内で行われます。
px・rem・em・pt・% を基準フォントサイズに合わせて相互変換します。レスポンシブタイポグラフィに便利で、すべてブラウザ内で処理されます。
オフセット・ぼかし・広がり・色・不透明度を調整してCSS box-shadowコードを作り、リアルタイムプレビューで確認できます。insetにも対応し、すべてブラウザ内で処理されます。
最小・最大サイズとビューポート範囲からレスポンシブなclamp()コードを生成します。メディアクエリなしでフォントサイズが画面幅に応じて滑らかに変わるfluid typographyに使えます。すべてブラウザ内で処理されます。
CSSからコメントと不要な空白を除去してサイズを削減します。文字列値は保持され、処理はすべてブラウザ内で行われます。