Reactで、文字色と背景色のコントラスト比を表示する方法

export type RGB = { r: number; g: number; b: number };

// 「#rgb」「#rrggbb」（# は省略可、大文字も可）を読む。それ以外は null を返す
export function parseHex(input: string): RGB | null {
  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(input.trim());
  if (!m) return null;
  const h = m[1].length === 3 ? [...m[1]].map((c) => c + c).join('') : m[1];
  const n = parseInt(h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

// 色の input と同じ、小文字の「#rrggbb」にそろえる
export function toHex({ r, g, b }: RGB): string {
  return '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
}

// WCAG の相対輝度（sRGB の 0〜255 の値から）
function channel(v: number): number {
  const c = v / 255;
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

export function relativeLuminance({ r, g, b }: RGB): number {
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
}

// 明るいほうを L1、暗いほうを L2 として (L1 + 0.05) / (L2 + 0.05)
export function contrastRatio(a: RGB, b: RGB): number {
  const la = relativeLuminance(a);
  const lb = relativeLuminance(b);
  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
}

// 表示は小数第2位までにする。四捨五入だと 4.499 が「4.50」と出てしまうので、切り捨てる
export function formatRatio(ratio: number): string {
  return `${(Math.floor(ratio * 100) / 100).toFixed(2)}:1`;
}

export const CRITERIA = [
  { id: 'aa-normal', level: 'AA', text: '通常の文字', min: 4.5 },
  { id: 'aa-large', level: 'AA', text: '大きな文字', min: 3 },
  { id: 'aaa-normal', level: 'AAA', text: '通常の文字', min: 7 },
  { id: 'aaa-large', level: 'AAA', text: '大きな文字', min: 4.5 },
] as const;

"#1f2a30" → {"r":31,"g":42,"b":48}
"1F2A30" → {"r":31,"g":42,"b":48}
"#abc" → {"r":170,"g":187,"b":204}
" #fff " → {"r":255,"g":255,"b":255}
"#abcd" → null
"#12345g" → null
"" → null
"#1f2a3" → null

違う値: 0 / 256
10/255 = 0.0392156862745098  11/255 = 0.043137254901960784

import { useState } from 'react';
import { parseHex, toHex } from './contrast';

type Props = {
  id: string;
  label: string;
  value: string; // 小文字の「#rrggbb」
  onChange: (hex: string) => void;
};

export function ColorField({ id, label, value, onChange }: Props) {
  // 入力欄の文字は、途中の「#1f2」のような値も持てるように、別の state にする
  const [draft, setDraft] = useState(value);
  const [prevValue, setPrevValue] = useState(value);

  // 色の input や入れ替えボタンで色が変わったときは、入力欄の文字もその色にそろえる。
  // ただし、入力欄の文字がすでにその色を表しているとき（「#abc」と「#aabbcc」）は書き換えない
  if (value !== prevValue) {
    setPrevValue(value);
    const typed = parseHex(draft);
    if (!typed || toHex(typed) !== value) setDraft(value);
  }

  const valid = parseHex(draft) !== null;
  const errorId = `${id}-error`;

  return (
    <div className="color-field">
      <label htmlFor={id}>{label}</label>
      <div className="color-inputs">
        <input
          type="color"
          aria-label={`${label}をパレットから選ぶ`}
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
        <input
          id={id}
          type="text"
          value={draft}
          spellCheck={false}
          autoComplete="off"
          aria-invalid={!valid}
          aria-describedby={valid ? undefined : errorId}
          onChange={(e) => {
            setDraft(e.target.value);
            const rgb = parseHex(e.target.value);
            if (rgb) onChange(toHex(rgb));
          }}
        />
      </div>
      {!valid && (
        <p id={errorId} className="error">
          「#1f2a30」か「#fff」の形で入力してください
        </p>
      )}
    </div>
  );
}

import { useState } from 'react';
import { ColorField } from './ColorField';
import { contrastRatio, CRITERIA, formatRatio, parseHex } from './contrast';

export function ContrastChecker() {
  const [fg, setFg] = useState('#1f2a30');
  const [bg, setBg] = useState('#ffffff');

  // fg と bg には、ColorField が小文字の「#rrggbb」にそろえた色だけが入る
  const ratio = contrastRatio(parseHex(fg)!, parseHex(bg)!);

  return (
    <section className="checker">
      <div className="fields">
        <ColorField id="fg" label="文字色" value={fg} onChange={setFg} />
        <ColorField id="bg" label="背景色" value={bg} onChange={setBg} />
      </div>
      <button
        type="button"
        onClick={() => {
          setFg(bg);
          setBg(fg);
        }}
      >
        文字色と背景色を入れ替える
      </button>

      <div className="preview" style={{ color: fg, backgroundColor: bg }}>
        <p className="sample-normal">通常の文字のサンプル</p>
        <p className="sample-large">大きな文字のサンプル</p>
      </div>

      <p className="ratio">
        コントラスト比 <strong data-testid="ratio">{formatRatio(ratio)}</strong>
      </p>

      <table className="results">
        <thead>
          <tr>
            <th scope="col">基準</th>
            <th scope="col">必要な比</th>
            <th scope="col">結果</th>
          </tr>
        </thead>
        <tbody>
          {CRITERIA.map((c) => {
            // 基準と比べるときは、表示用に切り捨てる前の値を使う
            const ok = ratio >= c.min;
            return (
              <tr key={c.id}>
                <th scope="row">
                  {c.level} {c.text}
                </th>
                <td>{c.min}:1 以上</td>
                <td className={ok ? 'pass' : 'fail'}>{ok ? '○ 達成' : '× 未達成'}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}