Skip to content

Commit 24ba393

Browse files
authored
Merge pull request #407 from ymrl/contrast_font_size
コントラストの日本語独自の基準を削除
2 parents 1e675f8 + 1c5fb2e commit 24ba393

File tree

8 files changed

+44
-70
lines changed

8 files changed

+44
-70
lines changed

data/yaml/checks/design/0002.yaml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ check:
88
ja: |-
99
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。
1010
11-
* 文字サイズが29px(22pt)以上の場合:3:1以上
12-
* 文字サイズが24px(18pt)以上で太字の場合:3:1以上
11+
* 文字サイズが24px(18pt)以上の場合:3:1以上
12+
* 文字サイズが19px(14pt)以上で太字の場合:3:1以上
1313
* その他の場合:4.5:1以上
1414
en: |-
1515
Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.
1616
17-
* For text size 29px (22pt) or larger: at least 3:1
18-
* For bold text size 24px (18pt) or larger: at least 3:1
17+
* For text size 24px (18pt) or larger: at least 3:1
18+
* For bold text size 19px (14pt) or larger: at least 3:1
1919
* In other cases: at least 4.5:1

data/yaml/checks/product/0021.yaml

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ conditions:
2727
ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
2828
2929
* マウスオーバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
30-
* 大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
31-
32-
- freeeの場合日本語テキストを想定しているため、「大きいテキスト」を29px(22pt)以上または24px(18pt)以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、18pt以上22pt未満(太字の場合は14pt以上18pt未満)の日本語のテキストについて、Axe DevToolsはコントラスト不足を検知できない
33-
3430
* テキスト以外のコントラスト比が不足している場合
3531
3632
- アイコン、画像、画像化されたテキスト、ボタンや入力フィールドの枠線など
@@ -41,10 +37,6 @@ conditions:
4137
Note that no issue is reported in the following cases, even when the guidelines are not met.
4238
4339
* When the contrast ratio is insufficient after the text and/or background color change, e.g. after mouse hover
44-
* When the contrast ratio of large-scale text is 3:1 or more and less than 4.5:1
45-
46-
- While large-scale text is defined as 29px(22pt) or larger font, or 24px(18pt) or larger bold font within freee's product as the primary text is assumed to be in Japanese, WCAG defines it as 18pt or larger font, or 14pt or larger bold font assuming euro-languages. As Axe DevTools is based on the requirements set by the WCAG, it cannot detect insufficient color contrast of Japanese text whose font size is between 18pt and 22pt (14pt and 18pt if bold).
47-
4840
* When the contrast ratio of non-text content is insufficient.
4941
5042
- icons, images, images of text, outlines of buttons and input fields, etc.
@@ -58,12 +50,12 @@ conditions:
5850
ja: |-
5951
WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した:
6052
61-
* 文字サイズが29px(22pt)以上の場合:3:1以上
62-
* 文字サイズが24px(18pt)以上で太字の場合:3:1以上
53+
* 文字サイズが24px(18pt)以上の場合:3:1以上
54+
* 文字サイズが19px(14pt)以上で太字の場合:3:1以上
6355
* その他の場合:4.5:1以上
6456
en: |-
6557
Verified that the content meets the following color contrast requirement using the WebAIM Color Contrast Checker:
6658
67-
* Font Size: 29px(22pt)or larger; 3:1 or higher
68-
* Font Size: 24px(18pt)or larger and bold; 3:1 or higher
59+
* Font Size: 24px (18pt) or larger; 3:1 or higher
60+
* Font Size: 19px (14pt) or larger and bold; 3:1 or higher
6961
* In other cases:4.5:1 or higher

data/yaml/gl/image/mobile-text-contrast.yaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ guideline:
1414
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
17+
参考:
1818
19-
.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
19+
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
2121
en: |-
2222
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.
2323
2424
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
2525
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2626
- In other cases: a contrast ratio of at least 4.5:1.
2727
28-
Note: In mobile applications, it is assumed that methods for changing text size are more widely known compared to desktop web, and the guidelines of each platform [#]_ [#]_ also use standards in line with WCAG 2.1, hence the above criteria are set.
28+
References:
2929
30-
.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
30+
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
3232
sc:
3333
- 1.4.3
3434
- 1.4.6

data/yaml/gl/image/text-contrast.yaml

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,19 @@ guideline:
1010
ja: |-
1111
画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。
1212
13-
- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
14-
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
13+
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
14+
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。
18-
19-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
20-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
17+
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
2118
en: |-
2219
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.
2320
24-
- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
25-
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
21+
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
22+
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2623
- In other cases: a contrast ratio of at least 4.5:1.
2724
28-
Note: In freee products and websites, Japanese is mainly used, so the criteria indicated in the translation notes in Understanding WCAG 2.1 [#]_ [#]_ are used.
29-
30-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
31-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
25+
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
3226
sc:
3327
- 1.4.3
3428
- 1.4.6

data/yaml/gl/images_of_text/mobile-text-contrast.yaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ guideline:
1414
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
17+
参考:
1818
19-
.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
19+
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
2121
en: |-
2222
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.
2323
2424
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
2525
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2626
- In other cases: a contrast ratio of at least 4.5:1.
2727
28-
Note: In mobile applications, it is assumed that methods for changing text size are more widely known compared to desktop web, and the guidelines of each platform [#]_ [#]_ also use standards in line with WCAG 2.1, hence the above criteria are set.
28+
References:
2929
30-
.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
30+
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
3232
sc:
3333
- 1.4.3
3434
- 1.4.6

data/yaml/gl/images_of_text/text-contrast.yaml

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,19 @@ guideline:
1010
ja: |-
1111
画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。
1212
13-
- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
14-
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
13+
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
14+
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。
18-
19-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
20-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
17+
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
2118
en: |-
2219
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.
2320
24-
- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
25-
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
21+
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
22+
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2623
- In other cases: a contrast ratio of at least 4.5:1.
2724
28-
Note: In freee products and websites, Japanese is mainly used, so the criteria indicated in the translation notes in Understanding WCAG 2.1 [#]_ [#]_ are used.
29-
30-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
31-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
25+
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
3226
sc:
3327
- 1.4.3
3428
- 1.4.6

data/yaml/gl/text/contrast.yaml

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,19 @@ guideline:
1010
ja: |-
1111
文字色と背景色に十分なコントラストを確保する。
1212
13-
- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
14-
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
13+
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
14+
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。
18-
19-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
20-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
17+
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
2118
en: |-
2219
Ensure sufficient contrast between the colors of text and their background colors.
2320
24-
- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
25-
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
21+
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
22+
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2623
- In other cases: a contrast ratio of at least 4.5:1.
2724
28-
Note: In freee products and websites, Japanese is mainly used, so the criteria indicated in the translation notes in Understanding WCAG 2.1 [#]_ [#]_ are used.
29-
30-
.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
31-
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
25+
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
3226
sc:
3327
- 1.4.3
3428
- 1.4.6

data/yaml/gl/text/mobile-contrast.yaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ guideline:
1414
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
1515
- その他の場合: 4.5:1以上
1616
17-
注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
17+
参考:
1818
19-
.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
19+
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
20+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
2121
en: |-
2222
Ensure sufficient contrast between the colors of text and their background colors.
2323
2424
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
2525
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
2626
- In other cases: a contrast ratio of at least 4.5:1.
2727
28-
Note: In mobile applications, it is assumed that methods for changing text size are more widely known compared to desktop web, and the guidelines of each platform [#]_ [#]_ also use standards in line with WCAG 2.1, hence the above criteria are set.
28+
References:
2929
30-
.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31-
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
30+
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
31+
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
3232
sc:
3333
- 1.4.3
3434
- 1.4.6

0 commit comments

Comments
 (0)