You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Note that no issue is reported in the following cases, even when the guidelines are not met.
42
38
43
39
* 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
-
48
40
* When the contrast ratio of non-text content is insufficient.
49
41
50
42
- icons, images, images of text, outlines of buttons and input fields, etc.
@@ -58,12 +50,12 @@ conditions:
58
50
ja: |-
59
51
WebAIM Contrast Checkerで、以下の基準を満たしていることを確認した:
60
52
61
-
* 文字サイズが29px(22pt)以上の場合:3:1以上
62
-
* 文字サイズが24px(18pt)以上で太字の場合:3:1以上
53
+
* 文字サイズが24px(18pt)以上の場合:3:1以上
54
+
* 文字サイズが19px(14pt)以上で太字の場合:3:1以上
63
55
* その他の場合:4.5:1以上
64
56
en: |-
65
57
Verified that the content meets the following color contrast requirement using the WebAIM Color Contrast Checker:
66
58
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
.. [#] `アクセシビリティ | 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>`__
21
21
en: |-
22
22
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.
23
23
24
24
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
25
25
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
26
26
- In other cases: a contrast ratio of at least 4.5:1.
27
27
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:
29
29
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>`__
Ensure sufficient contrast between the colors of text within images and key visual elements conveying important information, and their background colors.
23
20
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.
26
23
- In other cases: a contrast ratio of at least 4.5:1.
27
24
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.
.. [#] `アクセシビリティ | 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>`__
21
21
en: |-
22
22
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.
23
23
24
24
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
25
25
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
26
26
- In other cases: a contrast ratio of at least 4.5:1.
27
27
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:
29
29
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>`__
Ensure a sufficient contrast ratio between the colors of images of text and their background colors.
23
20
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.
26
23
- In other cases: a contrast ratio of at least 4.5:1.
27
24
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.
Ensure sufficient contrast between the colors of text and their background colors.
23
20
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.
26
23
- In other cases: a contrast ratio of at least 4.5:1.
27
24
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.
.. [#] `アクセシビリティ | 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>`__
21
21
en: |-
22
22
Ensure sufficient contrast between the colors of text and their background colors.
23
23
24
24
- For text size 24px (18pt) or larger: a contrast ratio of at least 3:1.
25
25
- For bold text 19px (14pt) or larger: a contrast ratio of at least 3:1.
26
26
- In other cases: a contrast ratio of at least 4.5:1.
27
27
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:
29
29
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>`__
0 commit comments