diff --git a/src/pages/contrast.mdx b/src/pages/contrast.mdx index 337f29d..5b2f2d9 100644 --- a/src/pages/contrast.mdx +++ b/src/pages/contrast.mdx @@ -13,21 +13,21 @@ import { Title } from '/src/components/Title'; コントラスト比が低いと、文字が読みにくくなります。特にロービジョンや老眼によって見づらさを抱えている人にとっては、大きな障害となります。 -

+

明るい背景色の上では、 明るい色の文字 は見づらくなります。 -

+
-

+

暗い背景色の上では、 暗い色の文字 は見づらくなります。 -

+
freee のガイドラインでは、テキストについて 4.5:1 以上のコントラスト比を満たすことを求めています([コントラスト比の確保](https://a11y-guidelines.freee.co.jp/categories/text.html#gl-text-contrast))。 -サイズの大きいテキストについては 3:1 以上でも良いことになっていますが、できるだけ 4.5:1 以上を目指すようにしましょう。 +サイズの大きいテキストについては 3:1 以上でも良いことになっていますが、できるだけ 4.5:1 またはそれ以上を目指すようにしましょう。 コントラスト比は、[WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)で確認することができます。 Background Color(背景色)と Foreground Color(前景色)それぞれにカラーコードを入力するか、カラーピッカーを使って色を選択すると、Contrast Ratio の欄にコントラスト比が表示されます。