色の変換とコントラスト比の計算

HEXとRGBの相互変換、相対輝度とコントラスト比の計算方法、WCAGで求められる読みやすさの基準を、計算例つきで解説します。

HEXとRGB

16進数の2桁は0〜255を表すので、#ffc72cはRGBで(255,199,44)です。HSLは、色相を角度、彩度と明度を割合で表す別の表し方です。

相対輝度を求める

WCAG 2.xでは、各色を255で割り、ガンマ補正を戻してから、0.2126×R+0.7152×G+0.0722×Bで相対輝度を求めます。コントラスト比は、明るい方の輝度に0.05を足した値を、暗い方に0.05を足した値で割って求めます。

基準値

AAの基準は、本文が4.5:1以上、大きな文字が3:1以上です。さらに厳しいAAAでは、本文に7:1が求められます。

この技術を使っているツール

ほか5本のツールでも使っています。