-
Notifications
You must be signed in to change notification settings - Fork 70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clarified and included CJK requirements in large text definition and updated rules affected by this change #2121
Changes from 13 commits
a316f03
fcc0409
4f781a0
4456dec
a60cf76
54ffbd6
39a211d
5cac272
546a5a3
3107c19
c9889a7
4aaa207
ab17360
00b0cca
1834876
6aaa18d
a8d6293
61d9e74
2724569
7fcae63
41aba7f
66e806c
9934e03
4ded309
44b691b
caaa73a
2f0e977
70bb0cc
b9cda2d
8b1c88a
03cf3d3
9063dba
b412651
33b28d6
3f89a93
221799d
d08ce97
3bacb00
520f01c
7d4f76d
eace061
496f0bf
2196334
0b622d5
e7e290f
bbf55cb
eaa3902
cf72047
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -189,6 +189,36 @@ This text is using the default user agent text color and background color. By de | |
<div role="button">My button!</div> | ||
``` | ||
|
||
#### Passed Example 12 | ||
|
||
This 18pt bold black Japanese text has a contrast ratio of 3.6:1 on the gray background. | ||
|
||
```html | ||
<p style="color: #000; font-size:18pt; font-weight:700; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Passed Example 13 | ||
|
||
This 22pt black Japanese text has a contrast ratio of 3.6:1 on the gray background. | ||
|
||
```html | ||
<p style="color: #000; font-size:22pt; font-weight:700; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Passed Example 14 | ||
|
||
This 18pt black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since the characters composing the sentence are not included within the Unicode standard range of 4E00–9FFF, it's passing the rule. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```html | ||
<p style="color: #000; font-size:18pt; background: #666;"> | ||
「ロック・アンド・ロール」 | ||
</p> | ||
``` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Passed Example 15This 16pt bold black Traditional Chinese text has a contrast ratio of 3.6:1 on the gray background. <p style="color: #000; font-size:16pt; font-weight:700; background: #666;" lang="zh-TW">
內容可及性規範
</p> |
||
### Failed | ||
|
||
#### Failed Example 1 | ||
|
@@ -304,6 +334,26 @@ This text in a [semantic button][semantic role] has a contrast ratio of 3.85:1. | |
<div role="button" style="color: #777; background: #EEE;">My button!</div> | ||
``` | ||
|
||
#### Failed Example 11 | ||
|
||
This 14pt bold black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since 14pt bold is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 4.5:1. | ||
|
||
```html | ||
<p style="color: #000; font-size:16pt; font-weight:700; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Failed Example 12 | ||
|
||
This 18pt black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since 18pt is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 4.5:1. | ||
|
||
```html | ||
<p style="color: #000; font-size:18pt; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
### Inapplicable | ||
|
||
#### Inapplicable Example 1 | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -183,6 +183,36 @@ This text is using the default user agent text color and background color. By de | |
<div role="button">My button!</div> | ||
``` | ||
|
||
#### Passed Example 11 | ||
|
||
This 18pt bold black Japanese text has a contrast ratio of 4.6:1 on the gray background. | ||
|
||
```html | ||
<p style="color: #000; font-size:18pt; font-weight:700; background: #777;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Passed Example 12 | ||
|
||
This 22pt black Japanese text has a contrast ratio of 4.6:1 on the gray background. | ||
|
||
```html | ||
<p style="color: #000; font-size:22pt; background: #777;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Passed Example 13 | ||
|
||
This 18pt black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since the characters composing the sentence are not included within the Unicode standard range of 4E00–9FFF, it's passing the rule. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```html | ||
<p style="color: #000; font-size:18pt; background: #777;"> | ||
「ロック・アンド・ロール」 | ||
</p> | ||
``` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Passed Example 14This 20pt black Traditional Chinese text has a contrast ratio of 4.6:1 on the gray background. <p style="color: #000; font-size:20pt; background: #777;" lang="zh-TW">
內容可及性規範
</p> |
||
### Failed | ||
|
||
#### Failed Example 1 | ||
|
@@ -328,6 +358,26 @@ This text in a [semantic button][semantic role] has a contrast ratio of 6.4:1. | |
<div role="button" style="color: #555; background: #EEE;">My button!</div> | ||
``` | ||
|
||
#### Failed Example 14 | ||
|
||
This 16pt bold black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since 14pt bold is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 7:1. | ||
|
||
```html | ||
<p style="color: #000; font-size:14pt; font-weight:700; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
#### Failed Example 15 | ||
|
||
This 20pt black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since 18pt is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 7:1. | ||
|
||
```html | ||
<p style="color: #000; font-size:18pt; background: #666;"> | ||
中国語、日本語、及び韓国語 | ||
</p> | ||
``` | ||
|
||
### Inapplicable | ||
|
||
#### Inapplicable Example 1 | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I rewrote a few things, including updating the links as I found this a little difficult to read with all the URLs in them: **Exception**: If the text nodes contain Unicode characters in the 4E00–9FFF range:
- at least 22 [points][], or
- at least 18 [points][] and a [computed][] [font weight][] CSS property of 700 or higher.
**Notes:**
The WCAG definition of [large scale text](https://www.w3.org/TR/WCAG21/#dfn-large-scale) includes an exception for CJK (Chinese, Japanese, and Korean) text. The Unicode range 4E00–9FFF includes these characters. The "equivalent size" numbers are not included in WCAG, and come from the [Official Japanese Translation of WCAG 2.1](https://waic.jp/translations/WCAG21/#dfn-large-scale). This translation offers the following insight (translated from Japanese to English to allow everyone understanding the specs):
> TRANSLATION NOTE
> In the case of Japanese full-width characters, 22 point or 18 point bold type is considered to be the "equivalent" size, based on the First Report of the Enlarged Textbook Promotion Council, "Chapter 2 Standards for Enlarged Textbooks." is reasonable."
Assuming all CJK characters pose similar contrast challanges, this definition extends the Japanese requirement to the whole CJK characters set included in the [Unicode standard](https://unicode.org/charts/PDF/U4E00.pdf) within the range of 4E00–9FFF.
[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value
[font-size]: https://www.w3.org/TR/css-fonts-3/#propdef-font-size
[points]: https://www.w3.org/TR/css-values/#pt
[font weight]: https://www.w3.org/TR/css-fonts-3/#font-weight-prop There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Taiwan has different requirements than Japan, I propose the following:
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -12,3 +12,18 @@ Text nodes with a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value | |||||
|
||||||
- at least 18 [points](https://www.w3.org/TR/css-values/#pt), or | ||||||
- at least 14 [points](https://www.w3.org/TR/css-values/#pt) and a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font weight](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) CSS property of 700 or higher. | ||||||
|
||||||
For CJK (Chinese, Japanese and Korean) characters with a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) of: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
- at least 22 [points](https://www.w3.org/TR/css-values/#pt), or | ||||||
- at least 18 [points](https://www.w3.org/TR/css-values/#pt) and a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font weight](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) CSS property of 700 or higher. | ||||||
|
||||||
**Notes:** | ||||||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
The WCAG definition of [large scale text](https://www.w3.org/TR/WCAG21/#dfn-large-scale) lacks clarity regarding the equivalent [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) for CJK characters. According to WCAG: | ||||||
>[large scale (text)](https://www.w3.org/TR/WCAG21/#dfn-large-scale): with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts | ||||||
|
||||||
Since there is no official WCAG definition of **equivalent size** for CJK characters, we rely on the guidelines provided in the [Japanese translation of the WCAG 2.1](https://waic.jp/translations/WCAG21/#dfn-large-scale). This document offers the following insight (translated from Japanese to English to allow everyone understanding the specs): | ||||||
|
||||||
>TRANSLATION NOTE | ||||||
>In the case of Japanese full-width characters, 22 point or 18 point bold type is considered to be the "equivalent" size, based on the First Report of the Enlarged Textbook Promotion Council, "Chapter 2 Standards for Enlarged Textbooks." is reasonable." | ||||||
|
||||||
Assuming all CJK characters pose similar contrast challanges, this definition extends the Japanese requirement to the whole CJK characters set included in the [Unicode standard](https://unicode.org/charts/PDF/U4E00.pdf) within the range of 4E00–9FFF. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We might want to indicate that that Unicode range describes the CJK Unified Ideographs There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added at the beginning of the Exception for a better understanding |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think some of the new examples should be in Korean or Chinese instead of Japanese. Not blocking, though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Jym77,
I've made some revisions to the examples by substituting Japanese with Chinese, utilizing the Chinese rendition of the WCAG 2.1 title.
Regarding Korean, it appears that only "Hanja" (Chinese characters) are affected by this rule. However, given my unqualified Korean language knowledge, I'm unable to craft a meaningful sentence using these Hanja characters. Any assistance from the community in providing a valid Korean sentence would be greatly appreciated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Korean Hangul might be another special case - lines are laid out in 2 dimensions unlike Chinese and Japanese (or European languages). It's unclear what point size and line height mean for Hangul layout.
The 꿀벌 above are are actually 2 groups of 3 characters stacked vertically (one group for each syllable).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like Korean Hanja is very rare - its use and teaching was banned in 1968 - so we can probably ignore it. The ban has been repealed recently, but as a result most Korean people don't know Hanja:
https://en.wikipedia.org/wiki/Hanja#Decline_of_Hanja
The Hangul syllable blocks mentioned in the comment above are precomposed into 11,000+ Unicode code points so point size is the size of the precomposed glyph.
https://www.w3.org/TR/klreq/#hangulcodes
This is similar to the way accents like circumflex and vowels are precomposed Unicode code points in French, as in the letter ô in hôpital
The Hangul Jamo code points can be combined into single glyphs representing a syllable. This is similar to how the letter 'o' U+006F and combining circumflex '◌̂' U+0302 can be composed into the glyph ô