New rule: Text nodes have minimal contrast #833

WilcoFiers · 2019-08-23T11:04:13Z

Pull Request Etiquette

When creating PR:

Make sure you requesting to pull a branch (right side) to the develop branch (left side).

After creating PR:

Add yourself (and co-authors) as "Assignees" for PR.
Add label to indicate if it's a Rule, Definition or Chore.
Close the issue that the PR resolves (and make sure the issue is referenced in the top of this comment)
Optionally request feedback from anyone in particular by assigning them as "Reviewers".

How to Review And Approve

Go to the “Files changed” tab
Here you will have the option to leave comments on different lines.
Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.

kasperisager · 2019-08-26T11:03:33Z

@kasperisager Write definition of "disabled".

kasperisager · 2019-08-27T10:42:35Z

@WilcoFiers Let me know what you think: 83161d2

WilcoFiers · 2019-09-05T09:57:34Z

pages/glossary/disabled.md

+key: disabled
+---
+
+An element that is normally [perceivable][] and [operable][], but has been rendered [inoperable][operable] either temporarily or permanently, is considered disabled. While there exists several techniques through which elements can be disabled, the most typical are:


@kasperisager This definition is ambiguous, as it leaves room for other unspecified ways of disabling elements. That's not allowed in the applicability of a rule. I suggest we keep it simpler and stick to the two items you have here, leave out the part about perceivable / (in)operable. If you want to leave room for a future "disabled" definition that does include those, we can call this definition "programatically disabled" or something along those lines. Not my preference, I'd rather not try to anticipate the future, but I wouldn't be opposed to it either.

I'd be fine with sticking to disabled and aria-disabled 👍

@WilcoFiers Let me know if 174c64e does the trick. I've left in "perceivable" and "operable" but otherwise restricted the ways in which elements can be "disabled".

Jym77

Quick review. many editorials and some questions.

_rules/text-node-contrast-afw4f7.md

pages/glossary/disabled.md

pages/glossary/large-scale-text.md

Jym77 · 2019-09-11T11:40:07Z

pages/glossary/background-colors-of-text.md

+---
+
+All colors of the pixels not part of the [foreground colors](#foreground-colors-of-text) pixels, in an bounding box around each [visible](#visible) character in a [text node](https://dom.spec.whatwg.org/#text), where the width is the [advance width](https://www.w3.org/TR/css-values/#length-advance-measure
+), plus one pixel on the left and right, and the height is the [advance height](https://www.w3.org/TR/css-values/#length-advance-measure).


There seems to be an extra newline at the start of this line.

pages/glossary/large-scale-text.md

Jym77

One outstanding issue on the "decorative"/"font example" test case. We might be faster discussing this over a call.

Several nitpicking or polishing editorials…

_rules/text-contrast-afw4f7.md

Jym77 · 2019-12-16T08:58:10Z

_rules/text-contrast-afw4f7.md

+
+#### Passed Example 4
+
+This dark grey text has a contrast ratio between 6.1:1 and 9:1 on white background with grey text shadow on it.


Also, if I get it correctly, the bounding box of, says, the 'o' does include the inside of the character which is far away from the shadow and thus has color #737373 and a contrast ratio of 4.42 with the black text.
Which is OK because the rule only considers the highest contrast ratio.

_rules/text-contrast-afw4f7.md

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

_rules/text-contrast-afw4f7.md

Thanks for the suggestions.

Jym77

https://github.com/act-rules/act-rules.github.io/pull/833/files/243deec0535bb3d4f2a3dfc12944f7d000075a97#r358815636
is a leftover editorial change.

The rest looks good.

Jym77 · 2019-12-18T08:31:39Z

_rules/text-contrast-afw4f7.md

+	shadowRoot.textContent = 'Some text in English'
+</script>
+```
+


I agree that the text is decorative.
I do not understand why a decorative text is relevant for 1.4.11 (as pointed out by the note in Passed Example 7).
(it is not a UI component, and it is not a "Graphical Object" either; so 1.4.11 does not apply)

This is not important enough to block that PR…

danistr

Looks good, nice job :-)

_rules/text-contrast-afw4f7.md

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

Please give it another look

EmmaJP · 2020-01-09T14:57:20Z

_rules/text-contrast-afw4f7.md

+
+- [Success criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) also has an exception for logos and brand names. Since logos and brand names are usually displayed through images to ensure correct rendering, this rule does not take logos or brand names into consideration. If a logo or brand name is included using [text nodes](https://dom.spec.whatwg.org/#text), this rule may produce incorrect results.
+
+- Text that has the same foreground and background color (a contrast ratio of 1:1) is assumed to be [purely decorative](). The text is assumed to not convey information that is meant for users. Hiding text in this way is sometimes used for search engine optimisation. Text with a contrast of 1:1 does not fail this rule, but may not satisfy [Success criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) if it is not decorative.


I'm not sure this is good wording to add. It isn't something to encourage and frowned upon by modern search engine algorithms.

_rules/text-contrast-afw4f7.md

EmmaJP · 2020-01-10T19:02:51Z

_rules/text-contrast-afw4f7.md

+```
+
+#### Passed Example 8
+


Is Passed Example 8 intended to be an example of something non-meaningful or decorative? If so, should it not be an Inapplicable Example?

No, this is an exception mentioned in the expectation. This is because "decorative" is subjective, and the ACT rules format requires the applicability to be objective.

So passed example 7 is including text that can be considered decorative (visual only), and passed example 8 is including text that is not conveying meaning.

And in this instance the exceptions are passing examples rather than inapplicable examples because ... ? The only reason I can determine is because the exception is in the expectation rather than the applicability. Is this consistent across rules? Should it be added to the rule guidance docs?

Cause in my understanding, a rule is inapplicable to something that is an exception.

…rom #833

Jym77

Seems good to me now 😄

_rules/text-contrast-afw4f7.md

Co-Authored-By: EmmaJP <emma.richens@bbc.co.uk>

Jym77 · 2020-01-30T10:20:36Z

Congratulations on completing that one!
That was a lot of difficult precision work chiseling it to perfection 🎉

WilcoFiers and others added 9 commits August 23, 2019 13:02

new rule: Text nodes have minimal contrast

7f2571d

Update highest-possible-contrast.md

c44f9a7

Update large-scale-text.md

2ef5fb9

Update background-colors-of-text.md

a575e29

Add Kasper to package.json

9aedf12

Update background-colors-of-text.md

c5e79d2

Update text-node-contrast-afw4f7.md

5ef8422

Use advance measures for character width / height

28740ca

Use advance height in large scale text

8e05cfe

kasperisager assigned kasperisager and WilcoFiers Aug 26, 2019

First stab at definition of "disabled"

83161d2

Clarify exception of form-associated custom elements

4877a49

jeeyyy changed the title ~~new rule: Text nodes have minimal contrast~~ New rule: Text nodes have minimal contrast Sep 2, 2019

WilcoFiers commented Sep 5, 2019

View reviewed changes

kasperisager and others added 5 commits September 5, 2019 12:21

Update disabled.md

174c64e

Update disabled.md

28ff7c0

Update text-node-contrast-afw4f7.md

ec8738c

More definitions

a774d59

Add example.png

5fded85

WilcoFiers marked this pull request as ready for review September 9, 2019 11:02

WilcoFiers requested review from jeeyyy, carlosapaduarte, Jym77 and ShadowBB September 9, 2019 11:03

WilcoFiers and others added 2 commits September 11, 2019 12:35

Merge branch 'develop' into color-contrast-text-nodes

e093e30

Fix a heading

4bae23b

Jym77 previously requested changes Sep 11, 2019

View reviewed changes

Jym77 previously requested changes Dec 16, 2019

View reviewed changes

Apply suggestions from code review

243deec

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

Jym77 reviewed Dec 17, 2019

View reviewed changes

_rules/text-contrast-afw4f7.md Outdated Show resolved Hide resolved

Update text-contrast-afw4f7.md

b688d96

WilcoFiers requested a review from Jym77 December 17, 2019 14:40

Jym77 previously requested changes Dec 18, 2019

View reviewed changes

danistr approved these changes Jan 7, 2020

View reviewed changes

EmmaJP reviewed Jan 8, 2020

View reviewed changes

_rules/text-contrast-afw4f7.md Show resolved Hide resolved

WilcoFiers and others added 3 commits January 9, 2020 13:22

Update _rules/text-contrast-afw4f7.md

4893c3c

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

new assumption about 1:1 contrast text

2bc7f23

Merge branch 'develop' into color-contrast-text-nodes

e6fc156

WilcoFiers requested a review from Jym77 January 9, 2020 13:01

EmmaJP reviewed Jan 9, 2020

View reviewed changes

resolve feedback on 1:1 contrast text

b6b70b0

WilcoFiers requested a review from EmmaJP January 10, 2020 12:54

EmmaJP reviewed Jan 10, 2020

View reviewed changes

_rules/text-contrast-afw4f7.md Outdated Show resolved Hide resolved

EmmaJP reviewed Jan 10, 2020

View reviewed changes

_rules/text-contrast-afw4f7.md Outdated Show resolved Hide resolved

EmmaJP reviewed Jan 10, 2020

View reviewed changes

carlosapaduarte added a commit that referenced this pull request Jan 11, 2020

Update expectation to use the foreground and background definitions f…

3ce2bb9

…rom #833

Jym77 approved these changes Jan 13, 2020

View reviewed changes

_rules/text-contrast-afw4f7.md Show resolved Hide resolved

WilcoFiers and others added 3 commits January 14, 2020 14:35

Update _rules/text-contrast-afw4f7.md

14b9ecb

Co-Authored-By: EmmaJP <emma.richens@bbc.co.uk>

Update _rules/text-contrast-afw4f7.md

3bcd16a

Co-Authored-By: EmmaJP <emma.richens@bbc.co.uk>

Update text-contrast-afw4f7.md

6ba646d

WilcoFiers added Review call 2 weeks Call for review for new rules and big changes and removed reviewers wanted labels Jan 14, 2020

WilcoFiers merged commit 89ad7e2 into develop Jan 30, 2020

WilcoFiers deleted the color-contrast-text-nodes branch January 30, 2020 09:40


		#### Passed Example 4

		This dark grey text has a contrast ratio between 6.1:1 and 9:1 on white background with grey text shadow on it.


		- [Success criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) also has an exception for logos and brand names. Since logos and brand names are usually displayed through images to ensure correct rendering, this rule does not take logos or brand names into consideration. If a logo or brand name is included using [text nodes](https://dom.spec.whatwg.org/#text), this rule may produce incorrect results.

		- Text that has the same foreground and background color (a contrast ratio of 1:1) is assumed to be [purely decorative](). The text is assumed to not convey information that is meant for users. Hiding text in this way is sometimes used for search engine optimisation. Text with a contrast of 1:1 does not fail this rule, but may not satisfy [Success criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) if it is not decorative.

New rule: Text nodes have minimal contrast #833

New rule: Text nodes have minimal contrast #833

Uh oh!

Conversation

WilcoFiers commented Aug 23, 2019

Pull Request Etiquette

When creating PR:

After creating PR:

How to Review And Approve

Uh oh!

kasperisager commented Aug 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kasperisager commented Aug 27, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jym77 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Jym77 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Jym77 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danistr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

EmmaJP Jan 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EmmaJP Jan 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jym77 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Jym77 commented Jan 30, 2020

Uh oh!

Uh oh!

kasperisager commented Aug 26, 2019 •

edited

Loading

EmmaJP Jan 9, 2020 •

edited

Loading

EmmaJP Jan 14, 2020 •

edited

Loading