LoginSignup
1
0

More than 1 year has passed since last update.

コントラスト比を求める

Posted at

ウェブコンテンツアクセシビリティガイドライン(WCAG) によれば、文字と背景の間に一定以上のコントラスト比が必要らしい。

このコントラスト比を計算するための方法をC# で書く

相対輝度を求める

private double Luminance(Color color){
    Func<double, double> linear = v => (v / 255) < 0.003928  ? (v / 255) / 12.92 : Math.Pow((((v / 255) + 0.055) / 1.055), 2.4F);

    var luminanceR = linear((double)color.R);
    var luminanceG = linear((double)color.G);
    var luminanceB = linear((double)color.B);

    var l = 0.2126 * luminanceR + 0.7152 * luminanceG + 0.0722 * luminanceB;
return l;
}

コントラスト比を求める

private double Contrast(Color color1, Color color2)
{
    var l1 = Luminance(color1);
    var l2 = Luminance(color2);
    return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
}

参考

ウェブコンテンツアクセシビリティガイドライン(WCAG)
https://waic.jp/docs/WCAG20/Overview.html

G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0