Zenn
🤖

Androidで 背景色に応じた見やすい文字色を求める

2022/08/08に公開
Android
tech

ユーザーがタグ色を選択できるプロダクトの場合、ユーザーが決めた色の上にテキストを配置しなければいけない。たとえば、下図の GitHub のタグのような場合である。

背景色に応じて、視認しやすいテキストカラーが利用されていることがわかる。

  • enhancement の背景色は #b5f0f2 で、テキスト色は黒色
  • task の背景色は #2b76db で、テキスト色は白色

当初は YCbCr や HSV の輝度を使って判断しようと考えていたが、調査を進めたところ、背景色に応じた見やすい文字色を求めるには WCAG 2.0 を利用するのが良いことがわかった。

背景色に応じて見やすい文字色を求める

元ネタの C# 版を Java に書き換えた。

import android.graphics.Color;

public class ColorUtil {

    private static double toSRgb(double c) {
        if (c <= 0.03928) {
            return c / 12.92;
        } else {
            return Math.pow((c + 0.055)/1.055, 2.4);
        }
    }

    private static double relativeLuminance(int color) {
        double red = (double) Color.red(color);
        double green = (double) Color.green(color);
        double blue = (double) Color.blue(color);

        double r = toSRgb(red / 255);
        double g = toSRgb(green / 255);
        double b = toSRgb(blue / 255);

        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }

    public static int foregroundTextColor(int color) {
        // 背景色の相対輝度
        final double background = relativeLuminance(color);

        // 黒文字と白文字の判定に使う相対輝度境界値
        final double border = 0.17912878474779;

        // 背景色の相対輝度が境界値以上なら黒文字、未満なら白文字
        return background >= border ? Color.BLACK : Color.WHITE;
    }
}

参考記事

Discussion