Add widgets to color contrast rules (#1961)

* Make contrast applicable to non-disabled widgets * Be more explicit with higher possible contrast * Update _rules/text-contrast-enhanced-09o5cg.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Add disabled widget examples * Typo * Apply suggestions from code review Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Mark symbols * Add luminance to spelling ignore * Ignore variable names Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
act-rules · Nov 23, 2022 · 4739a28 · 4739a28
1 parent 3b27c7f
commit 4739a28
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 47 deletions.
diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml
@@ -230,6 +230,7 @@
 - testability
 - focusability
 - unitless
+- luminance
 
 # Parts of Unicode
 - 000A
@@ -272,3 +273,9 @@
 # Color values
 - HSL
 - hsl
+
+# Variables used in definitions / descriptions
+- A-lum-max
+- A-lum-min
+- B-lum-max
+- B-lum-min
diff --git a/_rules/text-contrast-afw4f7.md b/_rules/text-contrast-afw4f7.md
@@ -33,7 +33,7 @@ acknowledgments:
 
 This rule applies to any [visible][] character in a [text node][] that is a [child][] in the [flat tree][] of an [HTML element][], except if the [text node][] has an [ancestor][] in the [flat tree][] for which at least one of the following is true:
 
-- **widget**: the ancestor is a [inheriting semantic][] `widget`; or
+- **disabled widget**: the ancestor is a [inheriting semantic][] `widget` that is [disabled][]; or
 - **disabled label**: the ancestor is used in the [accessible name][] of a [inheriting semantic][] `widget` that is [disabled][]; or
 - **disabled group**: the ancestor has a [semantic role][] of `group` and is [disabled][].
 
@@ -102,11 +102,16 @@ This dark gray text has a contrast ratio between 12.6:1 and 5:1 on the white to
 This light gray text has a contrast ratio between 13:1 and 5:1 on the background image.
 
 ```html
-<p
-	style="color: #CCC; height:50px; padding-top:15px; background: #000 no-repeat -20px -20px url('/test-assets/contrast/black-hole.jpeg');"
->
-	Black hole sun
-</p>
+<style>
+p {
+	color: #CCC;
+	height: 50px;
+	padding-top: 15px;
+	background: #000 no-repeat -20px -20px url('/test-assets/contrast/black-hole.jpeg');
+	text-shadow: 0px 0px 2px black;
+}
+</style>
+<p>Black hole sun</p>
 ```
 
 #### Passed Example 4
@@ -169,6 +174,26 @@ This dark gray text has a contrast ratio of 12.6:1 on the white background in a
 </script>
 ```
 
+#### Passed Example 10
+
+This text is part of a widget because it is a child of a `button` element. The text has the default
+browser button text color on the default browser button background color. By default, this is black text on a
+light gray background with a contrast ratio of 18.26:1
+
+```html
+<button>My button!</button>
+```
+
+#### Passed Example 11
+
+This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
+The text has the default browser text color on the default browser background color. By default, this is 
+black text on a white background with a contrast ratio of 21:1
+
+```html
+<div role="button">My button!</div>
+```
+
 ### Failed
 
 #### Failed Example 1
@@ -257,7 +282,7 @@ This semi-transparent gray text has a contrast ratio between 2.3:1 and 4.2:1 on
 
 #### Failed Example 8
 
-The first `p` element has a contrast ratio of 12.6:1. The second `p` element, which contains an example of the Helvetica font, has a contrast ratio of 3.5:1. Because this provides information, and not only for aesthetic purposes, this is not considered [purely decorative][].
+The first `p` element has a contrast ratio of 12.6:1. The second `p` element, which contains an example of the Helvetica font, has a contrast ratio of 3.85:1. Because this provides information, and not only for aesthetic purposes, this is not considered [purely decorative][].
 
 ```html
 <p style="color: #333; background: #FFF;">
@@ -268,6 +293,23 @@ The first `p` element has a contrast ratio of 12.6:1. The second `p` element, wh
 </p>
 ```
 
+#### Failed Example 9
+
+This text is part of a widget because it is a child of a `button` element. The button text has a contrast
+ratio of 3.85:1.
+```html
+<button style="color: #777; background: #EEE;">My button!</button>
+```
+
+#### Failed Example 10
+
+This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
+The button text has a contrast ratio of 3.85:1.
+
+```html
+<div role="button" style="color: #777; background: #EEE;">My button!</div>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1
@@ -316,22 +358,6 @@ This text not part of a [text node][].
 
 #### Inapplicable Example 6
 
-This text is part of a widget because it is a child of a `button` element.
-
-```html
-<button>My button!</button>
-```
-
-#### Inapplicable Example 7
-
-This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
-
-```html
-<div role="button">My button!</div>
-```
-
-#### Inapplicable Example 8
-
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element with `type="text"`.
 
 ```html
@@ -341,7 +367,7 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </label>
 ```
 
-#### Inapplicable Example 9
+#### Inapplicable Example 7
 
 This text is part of a label of a [disabled][] widget, because it is in an element that is referenced by `aria-labelledby` from an element with `role="textbox"`.
 
@@ -359,7 +385,7 @@ This text is part of a label of a [disabled][] widget, because it is in an eleme
 </div>
 ```
 
-#### Inapplicable Example 10
+#### Inapplicable Example 8
 
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element in a `fieldset` element with the `disabled` attribute.
 
@@ -372,7 +398,7 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </fieldset>
 ```
 
-#### Inapplicable Example 11
+#### Inapplicable Example 9
 
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element in an element with `role="group"` with the `aria-disabled="true"` attribute.
 
@@ -385,6 +411,22 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </div>
 ```
 
+#### Inapplicable Example 10
+
+This text is part of a [disabled][] widget because it is a child of a `button` element with the `disabled` attribute.
+
+```html
+<button style="color: #777; background: #EEE;" disabled>My button!</button>
+```
+
+#### Inapplicable Example 11
+
+This text is part of a [disabled][] widget because it is a child of an element with the `role` attribute set to `button` and with an `aria-disabled` attribute set to `true`.
+
+```html
+<div role="button" style="color: #777; background: #EEE;" aria-disabled="true">My button!</div>
+```
+
 [accessible name]: #accessible-name 'Definition of Accessible Name'
 [ancestor]: https://dom.spec.whatwg.org/#concept-shadow-including-ancestor 'DOM, ancestor, 2020/07/23'
 [assistive technology]: https://www.w3.org/TR/WCAG21/#dfn-assistive-technologies 'WCAG definition of Assistive Technologies'

diff --git a/_rules/text-contrast-enhanced-09o5cg.md b/_rules/text-contrast-enhanced-09o5cg.md
@@ -36,7 +36,7 @@ acknowledgments:
 
 This rule applies to any [visible][] character in a [text node][] that is a [child][] in the [flat tree][] of an [HTML element][], except if the [text node][] has an [ancestor][] in the [flat tree][] for which at least one of the following is true:
 
-- **widget**: the ancestor is a [inheriting semantic][] `widget`; or
+- **disabled widget**: the ancestor is a [inheriting semantic][] `widget` that is [disabled][]; or
 - **disabled label**: the ancestor is used in the [accessible name][] of a [inheriting semantic][] `widget` that is [disabled][]; or
 - **disabled group**: the ancestor has a [semantic role][] of `group` and is [disabled][].
 
@@ -164,6 +164,26 @@ This dark gray text has a contrast ratio of 12.6:1 on the white background in a
 </script>
 ```
 
+#### Passed Example 9
+
+This text is part of a widget because it is a child of a `button` element. The text has the default
+browser button text color on the default browser button background color. By default, this is black text on a
+light gray background with a contrast ratio of 18.26:1
+
+```html
+<button>My button!</button>
+```
+
+#### Passed Example 10
+
+This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
+The text has the default browser text color on the default browser background color. By default, this is 
+black text on a white background with a contrast ratio of 21:1
+
+```html
+<div role="button">My button!</div>
+```
+
 ### Failed
 
 #### Failed Example 1
@@ -283,6 +303,24 @@ The first `p` element has a contrast ratio of 12.6:1. The second `p` element, wh
 </p>
 ```
 
+#### Failed Example 11
+
+This text is part of a widget because it is a child of a `button` element. The button text has a contrast ratio of 6.4:1.
+
+```html
+<button style="color: #555; background: #EEE;">My button!</button>
+```
+
+#### Failed Example 12
+
+This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
+The button text has a contrast
+ratio of 6.4:1.
+
+```html
+<div role="button" style="color: #555; background: #EEE;">My button!</div>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1
@@ -331,22 +369,6 @@ This text not part of a [text node][].
 
 #### Inapplicable Example 6
 
-This text is part of a widget because it is a child of a `button` element.
-
-```html
-<button>My button!</button>
-```
-
-#### Inapplicable Example 7
-
-This text is part of a widget because it is a child of an element with the `role` attribute set to `button`.
-
-```html
-<div role="button">My button!</div>
-```
-
-#### Inapplicable Example 8
-
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element with `type="text"`.
 
 ```html
@@ -356,7 +378,7 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </label>
 ```
 
-#### Inapplicable Example 9
+#### Inapplicable Example 7
 
 This text is part of a label of a [disabled][] widget, because it is in an element that is referenced by `aria-labelledby` from an element with `role="textbox"`.
 
@@ -374,7 +396,7 @@ This text is part of a label of a [disabled][] widget, because it is in an eleme
 </div>
 ```
 
-#### Inapplicable Example 10
+#### Inapplicable Example 8
 
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element in a `fieldset` element with the `disabled` attribute.
 
@@ -387,7 +409,7 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </fieldset>
 ```
 
-#### Inapplicable Example 11
+#### Inapplicable Example 9
 
 This text is part of a label of a [disabled][] widget, because it is in a `label` element that is the label for an `input` element in an element with `role="group"` with the `aria-disabled="true"` attribute.
 
@@ -400,6 +422,22 @@ This text is part of a label of a [disabled][] widget, because it is in a `label
 </div>
 ```
 
+#### Inapplicable Example 10
+
+This text is part of a [disabled][] widget because it is a child of a `button` element with the `disabled` attribute.
+
+```html
+<button style="color: #777; background: #EEE;" disabled>My button!</button>
+```
+
+#### Inapplicable Example 11
+
+This text is part of a [disabled][] widget because it is a child of an element with the `role` attribute set to `button` and with an `aria-disabled` attribute set to `true`.
+
+```html
+<div role="button" style="color: #777; background: #EEE;" aria-disabled="true">My button!</div>
+```
+
 [accessible name]: #accessible-name 'Definition of Accessible Name'
 [ancestor]: https://dom.spec.whatwg.org/#concept-shadow-including-ancestor 'DOM, ancestor, 2020/07/23'
 [assistive technology]: https://www.w3.org/TR/WCAG21/#dfn-assistive-technologies 'WCAG definition of Assistive Technologies'

diff --git a/pages/glossary/highest-possible-contrast.md b/pages/glossary/highest-possible-contrast.md
@@ -5,4 +5,8 @@ unambiguous: true
 objective: true
 ---
 
-The highest value of the [contrast ratios](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) between two sets of colors.
+The highest value of the [contrast ratios](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) between two sets of colors (A and B).
+To calculate the highest value, find the colors in each set with the largest and smallest 
+[relative luminance](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance) (`A-lum-max`, `A-lum-min`, `B-lum-max`, `B-lum-min`). The
+highest possible contrast is then the larger of the [contrast ratios](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio)
+of `A-lum-max` with `B-lum-min` versus `A-lum-min` with `B-lum-max`.