Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions data/yaml/checks/design/0002.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ check:
ja: |-
テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

* 文字サイズが29px(22pt)以上の場合:3:1以上
* 文字サイズが24px(18pt)以上で太字の場合:3:1以上
* 文字サイズが24px(18pt)以上の場合:3:1以上
* 文字サイズが19px(14pt)以上で太字の場合:3:1以上
* その他の場合:4.5:1以上
en: |-
Sufficient contrast ratios are ensured for the display colors and background colors of text and images of text.

* For text size 29px (22pt) or larger: at least 3:1
* For bold text size 24px (18pt) or larger: at least 3:1
* For text size 24px (18pt) or larger: at least 3:1
* For bold text size 19px (14pt) or larger: at least 3:1
* In other cases: at least 4.5:1
16 changes: 4 additions & 12 deletions data/yaml/checks/product/0021.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,6 @@ conditions:
ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。

* マウスオーバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
* 大きいテキストのコントラスト比が3:1以上4.5:1未満の場合

- freeeの場合日本語テキストを想定しているため、「大きいテキスト」を29px(22pt)以上または24px(18pt)以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、18pt以上22pt未満(太字の場合は14pt以上18pt未満)の日本語のテキストについて、Axe DevToolsはコントラスト不足を検知できない

* テキスト以外のコントラスト比が不足している場合

- アイコン、画像、画像化されたテキスト、ボタンや入力フィールドの枠線など
Expand All @@ -41,10 +37,6 @@ conditions:
Note that no issue is reported in the following cases, even when the guidelines are not met.

* When the contrast ratio is insufficient after the text and/or background color change, e.g. after mouse hover
* When the contrast ratio of large-scale text is 3:1 or more and less than 4.5:1

- 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).

* When the contrast ratio of non-text content is insufficient.

- icons, images, images of text, outlines of buttons and input fields, etc.
Expand All @@ -58,12 +50,12 @@ conditions:
ja: |-
WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した:

* 文字サイズが29px(22pt)以上の場合:3:1以上
* 文字サイズが24px(18pt)以上で太字の場合:3:1以上
* 文字サイズが24px(18pt)以上の場合:3:1以上
* 文字サイズが19px(14pt)以上で太字の場合:3:1以上
* その他の場合:4.5:1以上
en: |-
Verified that the content meets the following color contrast requirement using the WebAIM Color Contrast Checker:

* Font Size: 29px(22pt)or larger; 3:1 or higher
* Font Size: 24px(18pt)or larger and bold; 3:1 or higher
* Font Size: 24px (18pt) or larger; 3:1 or higher
* Font Size: 19px (14pt) or larger and bold; 3:1 or higher
* In other cases:4.5:1 or higher
12 changes: 6 additions & 6 deletions data/yaml/gl/image/mobile-text-contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ guideline:
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
- その他の場合: 4.5:1以上

注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
参考:

.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
en: |-
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.

- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.
References:

.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
sc:
- 1.4.3
- 1.4.6
Expand Down
18 changes: 6 additions & 12 deletions data/yaml/gl/image/text-contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,19 @@ guideline:
ja: |-
画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストを確保する。

- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
- その他の場合: 4.5:1以上

注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
en: |-
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.

- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
sc:
- 1.4.3
- 1.4.6
Expand Down
12 changes: 6 additions & 6 deletions data/yaml/gl/images_of_text/mobile-text-contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ guideline:
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
- その他の場合: 4.5:1以上

注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
参考:

.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
en: |-
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.

- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.
References:

.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
sc:
- 1.4.3
- 1.4.6
Expand Down
18 changes: 6 additions & 12 deletions data/yaml/gl/images_of_text/text-contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,19 @@ guideline:
ja: |-
画像化されたテキストの色と背景の色に十分なコントラスト比を確保する。

- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
- その他の場合: 4.5:1以上

注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
en: |-
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.

- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
sc:
- 1.4.3
- 1.4.6
Expand Down
18 changes: 6 additions & 12 deletions data/yaml/gl/text/contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,19 @@ guideline:
ja: |-
文字色と背景色に十分なコントラストを確保する。

- テキストの文字サイズが29px(22pt)以上の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上で太字の場合: 3:1以上
- テキストの文字サイズが24px(18pt)以上の場合: 3:1以上
- テキストの文字サイズが19px(14pt)以上で太字の場合: 3:1以上
- その他の場合: 4.5:1以上

注:freeeのプロダクトやWebサイトにおいては、主に日本語が用いられているため、Understanding WCAG 2.1 [#]_ の日本語訳 [#]_ 中の訳注で示されている基準を用いています。

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
参考: `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
en: |-
Ensure sufficient contrast between the colors of text and their background colors.

- For text size 29px (22pt) or larger: a contrast ratio of at least 3:1.
- For bold text 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.

.. [#] `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
.. [#] `達成基準 1.4.3: コントラスト (最低限)を理解する <https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html>`__
Reference: `Understanding Success Criterion 1.4.3: Contrast (Minimum) <https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>`__
sc:
- 1.4.3
- 1.4.6
Expand Down
12 changes: 6 additions & 6 deletions data/yaml/gl/text/mobile-contrast.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ guideline:
- テキストの文字サイズが19px(14pt)以上で太字の場合:3:1以上
- その他の場合: 4.5:1以上

注:モバイル・アプリケーションにおいては、デスクトップのWebと比較して文字サイズの変更方法が広く知られていると推測されること、各プラットフォームのガイドライン [#]_ [#]_ においてもWCAG 2.1に準じた基準を用いていることから、上記の基準としています。
参考:

.. [#] `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `アクセシビリティ | Apple Developer Documentation <https://developer.apple.com/jp/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
en: |-
Ensure sufficient contrast between the colors of text and their background colors.

- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
- In other cases: a contrast ratio of at least 4.5:1.

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.
References:

.. [#] `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
.. [#] `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
- `Accessibility | Apple Developer Documentation <https://developer.apple.com/design/human-interface-guidelines/accessibility>`__
- `Accessibility – Material Design 3 <https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2>`__
sc:
- 1.4.3
- 1.4.6
Expand Down