MoaKit
すべてのツール

色コントラストチェッカー

文字色と背景色のコントラストをWCAG(AA・AAA)とAPCAで検査し、基準を満たす最も近い色を提案します。

미리보기

큰 제목 글자

본문 글자는 이 정도 크기예요. 오래 읽어도 눈이 편한지 확인해 보세요.

작은 안내 글자 12px

버튼

7.57:1

아주 좋아요

APCA Lc 86.3 · 본문에 충분

  • AA 본문 글자일반 글자(약 18px 미만) · 4.5:1기준 통과
  • AA 큰 글자24px 이상, 또는 굵은 19px 이상 · 3:1기준 통과
  • AAA 본문 글자더 엄격한 기준 · 7:1기준 통과
  • AAA 큰 글자큰 글자의 엄격한 기준 · 4.5:1기준 통과
  • 아이콘·입력칸 테두리버튼 모양, 아이콘, 포커스 표시 (WCAG 1.4.11) · 3:1기준 통과

色コントラストチェッカーとは?

文字色と背景色のコントラスト比を計算し、ウェブアクセシビリティ基準(WCAG)を満たすかどうかを教えます。

使い方

  1. 文字色と背景色を入力します。
  2. コントラスト比を確認します。
  3. 基準に届かなければ、色を調整します。

使い方のコツ

  • 本文の文字は4.5:1以上、大きな文字は3:1以上が推奨されています。