Using color | U.S. Web Design System (USWDS)
https://gyazo.com/216c4004079c53ac0094378847582a49 https://designsystem.digital.gov/design-tokens/color/overview/#magic-number-2
マジックナンバーという概念でコントラスト比を保てる仕組みを作っている。
40以上差があれば WCAG AA の Large Text をパス
50以上差があれば AA
70以上差があれば AAA
仕組み的には相対輝度の話で、各色番号ごとに最低輝度と最大輝度の範囲を持ち、その範囲で色を作っているので機能する、と。
table: 色グレードごとの輝度範囲
グレード 最低輝度 最大輝度
0 1.000 1.000
5 0.850 0.930
10 0.750 0.820
20 0.500 0.650
30 0.350 0.450
40 0.225 0.300
50 0.175 0.183
60 0.100 0.125
70 0.050 0.070
80 0.020 0.040
90 0.005 0.015
100 0.000 0.000
関連: