Bootstrap5をカスタマイズしたい 2

Tweet

Category css 2024/12/20

問題

sassの変数を変更して、primaryの色など変えてみました。

するとボタンの文字の色などが白かったのが黒くなってしまいました。

白くしたいのですがどうするとよいですか。

答え

背景色に対する文字色は、sassのcolor-contrast関数で自動計算されている。

自動計算はWCAGのアルゴリズムでおこなわれる。

閾値があり、コントラストは 4.5:1 以上あること、といった指定があり、それに従っている。

その閾値は _variables.scss にあり、 $min-contrast-ratio: 4.5 !default; と指定されている。

これを上書きすると、多少薄い色の上でも白い文字を入れることができる。

デフォルト

背景色だけ変えた例

$blue: #3B9BC2;
$yellow: #FB8C24;
$red: #FF3419;

閾値も変えた例

$min-contrast-ratio: 3;

$blue: #3B9BC2;
$yellow: #FB8C24;
$red: #FF3419;

閾値をもっと変えた例

$min-contrast-ratio: 2;

$blue: #3B9BC2;
$yellow: #FB8C24;
$red: #FF3419;