Text has enhanced contrast

Applicability

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:

disabled ancestor: the ancestor is an [inheriting semantic][] group or widget that is [disabled][]; or
disabled label: the ancestor is used in the [accessible name][] of an [inheriting semantic][] widget that is [disabled][].

Expectation

For each test target, the [highest possible contrast][] between the [foreground colors][] and [background colors][] is at least 4.5:1 for [large scale text][] and 7.0:1 for other texts, except if the test target is part of a [text node][] that is [purely decorative][] or does not express anything in [human language][].

Assumptions

[Success criterion 1.4.6 Contrast (Enhanced)][sc146] has exceptions for "incidental" text, which includes inactive user interface components and decorative texts. The rule assumes that [text nodes][text node] that should be ignored are [disabled][] or hidden from assistive technologies. If this isn't the case, the text node could fail this rule while the success criterion could still be satisfied.
[Success criterion 1.4.6 Contrast (Enhanced)][sc146] 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][text node], the text node could fail while the success criterion could still be satisfied.
Text that has the same foreground and background color (a contrast ratio of 1:1) is not considered to be "visual presentation of text", making it inapplicable to the success criterion. Text hidden in this way can still cause accessibility issues under other success criteria, depending on the content.
The definition of [disabled element][disabled] assumes that when the aria-disabled attribute is specified on an element, this element has also been disabled for users that do not rely on [assistive technology][]. If this is not the case, that definition may produce incorrect results and in consequence this rule might be Inapplicable to some text nodes that still require a good contrast ratio.

Accessibility Support

Different browsers have different levels of support for CSS. This can cause contrast issues in one browser that do not appear in another. Because of that, this rule can produce different results depending on the browser that is used. For example, a text that is positioned using CSS transform may be on a different background in a browser that does not support CSS transform.
Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of none and fail this rule with some technology but users of other technologies would not experience any accessibility issue.

Background

Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility when some but not all pixels have sufficient contrast, which is why passing this rule does not necessarily mean the corresponding success criterion is met.

When the text color or background color is not specified in the web page, colors from other [origins][] will be used. Testers must ensure colors are not affected by styles from a [user origin][], such as a custom style sheet. Contrast issues caused by specifying the text color but not the background or vice versa, must be tested separately from this rule.

This rule is closely related to [success criterion 1.4.3 Contrast (Minimum)][sc143]. Because this rule is stricter, text that passes this rule will likely satisfy 1.4.3 Contrast (Minimum).

Bibliography

Test Cases

Passed

Passed Example 1

This dark gray text has a contrast ratio of 12.6:1 on the white background.

<p style="color: #333; background: #FFF;">
	Some text in a human language
</p>

Passed Example 2

This dark gray text has a contrast ratio between 12.6:1 and 7:1 on the white to light blue gradient background.

<p style="color: #333; background: linear-gradient(to right, #FFF, #BBF); width: 500px;">
	Some text in a human language
</p>

Passed Example 3

This white text has a contrast ratio between 18:1 and 7:1 on the background image.

<style>
	p {
		color: #fff;
		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

This 18pt large black text has a contrast ratio of 4.6:1 on the gray background.

<p style="color: #000; font-size:18pt; background: #777;">
	Some text in a human language
</p>

Passed Example 5

This 14pt bold black text has a contrast ratio of 4.6:1 on the gray background.

<p style="color: #000; font-size:14pt; font-weight:700; background: #777;">
	Some text in English
</p>

Passed Example 6

The content of this button ("X") does not convey anything in human language; therefore, it passes the rule regardless of its contrast ratio. However, [Success Criterion 1.4.11 Non-Text Content][sc1411] should be examined for this non-text element.

<button style="color: #666; background-color: #FFF" aria-label="Close">X</button>

Passed Example 7

This text has the default browser text color on the default browser background color. By default this is black text on a white background, which has a contrast ratio of 21:1.

<p>Some text in a human language</p>

Passed Example 8

This dark gray text has a contrast ratio of 12.6:1 on the white background in a shadow DOM tree.

<p style="color: #CCC; background: #fff;" id="p"></p>
<script>
	const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
	shadowRoot.innerHTML = '<span style="color: #333;">Some text in English</span>'
</script>

Passed Example 9

This text has the default user agent link text and background color, of #0000EE and white. This results in a contrast ratio of 9.39:1.

<a href="https://w3c.org/">W3C</a>

Passed Example 10

This text is using the default user agent text color and background color. By default, this is black text on a white background with a contrast ratio of 21:1

<div role="button">My button!</div>

Failed

Failed Example 1

This light gray text has a contrast ratio of 5.7:1 on the white background.

<p style="color: #666; background: white;">
	Some text in English
</p>

Failed Example 2

This light gray text has a contrast ratio between 4.6:1 and 5.7:1 on the white to cyan gradient background.

<p style="color: #666; background: linear-gradient(to right, #FFF, #0FF); width: 300px">
	Some text in English
</p>

Failed Example 3

This 18pt large black text has a contrast ratio of 3.6:1 on the gray background.

<p style="color: #000; font-size:18pt; background: #666;">
	Some text in a human language
</p>

Failed Example 4

This light gray text has a contrast ratio of 2.3:1 on the white background.

<p style="color: #AAA; background: white;">
	Some text in English
</p>

Failed Example 5

This 14pt bold black text has a contrast ratio of 3.6:1 on the gray background.

<p style="color: #000; font-size:14pt; font-weight:700; background: #666;">
	Some text in English
</p>

Failed Example 6

This light gray text has a contrast ratio between 1.4:1 and 4.7:1 on the background image.

<p
	style="color: #777; height:50px; padding-top:20px; background: black no-repeat -20px -20px url('/test-assets/contrast/black-hole.jpeg');"
>
	Black hole sun
</p>

Failed Example 7

This black text with 60% alpha channel has a contrast ratio of 5.7:1 on the white background.

<p style="color: rgba(0,0,0,.6); background: #FFF">
	Some text in English
</p>

Failed Example 8

This black text with 60% opacity has a contrast ratio of 5.7:1 on the white background.

<div style="background: #FFF">
	<p style="color: #000; opacity: .6">
		Some text in English
	</p>
</div>

Failed Example 9

This gray text has a contrast ratio of 5.7:1 on the white background in a shadow DOM tree.

<p style="color: #666; background: #fff;" id="p"></p>
<script>
	const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
	shadowRoot.textContent = 'Some text in English'
</script>

Failed Example 10

This semi-transparent gray text has a contrast ratio between 2.6:1 and 5.4:1 on the black and white background. The light gray text is compared to the white section of the background and the dark gray text is compared to the black section of the background.

<style>
	#backgroundSplit {
		color: rgba(90, 90, 90, 0.9);
		background-position: top 0 left 0;
		background-image: linear-gradient(90deg, transparent, transparent 3.3em, black 3.3em, black 6em);
		padding: 0 1em;
	}
</style>
<span id="backgroundSplit">
	Hello world
</span>

Failed Example 11

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 6.4:1. Because this provides information, and is not only for aesthetic purposes, this is not considered [purely decorative][].

<p style="color: #333; background: #FFF;">
	Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and Eduard Hoffmann.
</p>
<p style="font-family: helvetica; background: #EEE; color: #555;">
	The quick brown fox jumps over the lazy dog.
</p>

Failed Example 12

This text in a button element has a contrast ratio of 6.4:1.

<button style="color: #555; background: #EEE;">My button!</button>

Failed Example 13

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>

Inapplicable

Inapplicable Example 1

This text is not [visible][] because of display: none.

<p style="display: none">Some invisible text in English</p>

Inapplicable Example 2

This text is not [visible][] because it is positioned off screen.

<p style="position:absolute; top: -999em">Some invisible text in English</p>

Inapplicable Example 3

This text is not [visible][] because the foreground color is the same as the background color.

<p style="color: white; background: white;" aria-hidden="true">Hidden text - U U D D L R L R B A S</p>

Inapplicable Example 4

This text is not the child of an HTML element.

<svg>
	<text x="0" y="15">I love SVG!</text>
</svg>

Inapplicable Example 5

This text not part of a [text node][].

<p>
	<img scr="/test-assets/contrast/example.png" alt="example" />
</p>

Inapplicable Example 6

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

<label style="color:#888; background: white;">
	My name
	<input type="text" disabled />
</label>

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

<label id="my_pets_name" style="color:#888; background: white;">
	My pet's name
</label>
<div
	role="textbox"
	aria-labelledby="my_pets_name"
	aria-disabled="true"
	style="height:20px; width:100px; border:1px solid black;"
>
	test
</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 in a fieldset element with the disabled attribute.

<fieldset disabled style="color:#888; background: white;">
	<label>
		My name
		<input />
	</label>
</fieldset>

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.

<div role="group" aria-disabled="true" style="color:#888; background: white;">
	<label>
		My name
		<input />
	</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.

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

<div role="button" style="color: #777; background: #EEE;" aria-disabled="true">My button!</div>

AI Prompt

Create a PHP class in the namespace "App\Services\AccessibilityAnalyzer\ActRules"
that extends "App\Services\AccessibilityAnalyzer\ActRuleRunner" and is called "TextContrastEnhanced09o5cg" that has a function with the signature "protected function findApplicableElements(Crawler $crawler): Crawler". The base class includes the function "protected function isElementIncludedInAccessibilityTree(\DOMNode $element): bool" for determining if an element is included in the accessibility tree.

Web accessibility rule:

# Text has enhanced contrast

metadata:
    id: 09o5cg
    name: 'Text has enhanced contrast'
    rule_type: atomic
    description: "This rule checks that the highest possible contrast of every text character with its background meets the enhanced contrast requirement.\n"
    accessibility_requirements: { 'wcag20:1.4.6': { forConformance: true, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag-technique:G17': { forConformance: false, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag-technique:G18': { forConformance: false, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag20:1.4.3': { secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower minimum contrast. Some of the failed examples may satisfy this success criterion.' } }
    input_aspects: ['Accessibility Tree', 'DOM Tree', 'CSS Styling', Language]
    acknowledgments: { authors: ['Jean-Yves Moyen'], funding: [WAI-Tools] }

## Applicability

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:

- **disabled ancestor**: the ancestor is an [inheriting semantic][] `group` or `widget` that is [disabled][]; or
- **disabled label**: the ancestor is used in the [accessible name][] of an [inheriting semantic][] `widget` that is [disabled][].

## Expectation

For each test target, the [highest possible contrast][] between the [foreground colors][] and [background colors][] is at least 4.5:1 for [large scale text][] and 7.0:1 for other texts, except if the test target is part of a [text node][] that is [purely decorative][] or does not express anything in [human language][].

## Assumptions

- [Success criterion 1.4.6 Contrast (Enhanced)][sc146] has exceptions for "incidental" text, which includes inactive user interface components and decorative texts. The rule assumes that [text nodes][text node] that should be ignored are [disabled][] or hidden from assistive technologies. If this isn't the case, the text node could fail this rule while the success criterion could still be satisfied.

- [Success criterion 1.4.6 Contrast (Enhanced)][sc146] 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][text node], the text node could fail while the success criterion could still be satisfied.

- Text that has the same foreground and background color (a contrast ratio of 1:1) is not considered to be "visual presentation of text", making it inapplicable to the success criterion. Text hidden in this way can still cause accessibility issues under other success criteria, depending on the content.

- The definition of [disabled element][disabled] assumes that when the `aria-disabled` attribute is specified on an element, this element has also been disabled for users that do not rely on [assistive technology][]. If this is not the case, that definition may produce incorrect results and in consequence this rule might be Inapplicable to some text nodes that still require a good contrast ratio.

## Accessibility Support

- Different browsers have different levels of support for CSS. This can cause contrast issues in one browser that do not appear in another. Because of that, this rule can produce different results depending on the browser that is used. For example, a text that is positioned using CSS transform may be on a different background in a browser that does not support CSS transform.
- Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `none` and fail this rule with some technology but users of other technologies would not experience any accessibility issue.

## Background

Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility when some but not all pixels have sufficient contrast, which is why passing this rule does not necessarily mean the corresponding success criterion is met.

When the text color or background color is not specified in the web page, colors from other [origins][] will be used. Testers must ensure colors are not affected by styles from a [user origin][], such as a custom style sheet. Contrast issues caused by specifying the text color but not the background or vice versa, must be tested separately from this rule.

This rule is closely related to [success criterion 1.4.3 Contrast (Minimum)][sc143]. Because this rule is stricter, text that passes this rule will likely satisfy 1.4.3 Contrast (Minimum).

### Bibliography

- [Understanding Success Criterion 1.4.6: Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html)
- [G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG22/Techniques/general/G17)
- [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG22/Techniques/general/G18)
- [F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)](https://www.w3.org/WAI/WCAG22/Techniques/failures/F83)
- [CSS Scoping Module Level 1 (Editor's Draft)](https://drafts.csswg.org/css-scoping/)

## Test Cases

### Passed

#### Passed Example 1

This dark gray text has a contrast ratio of 12.6:1 on the white background.

```html
<p style="color: #333; background: #FFF;">
	Some text in a human language
</p>
```

#### Passed Example 2

This dark gray text has a contrast ratio between 12.6:1 and 7:1 on the white to light blue gradient background.

```html
<p style="color: #333; background: linear-gradient(to right, #FFF, #BBF); width: 500px;">
	Some text in a human language
</p>
```

#### Passed Example 3

This white text has a contrast ratio between 18:1 and 7:1 on the background image.

```html
<style>
	p {
		color: #fff;
		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

This 18pt large black text has a contrast ratio of 4.6:1 on the gray background.

```html
<p style="color: #000; font-size:18pt; background: #777;">
	Some text in a human language
</p>
```

#### Passed Example 5

This 14pt bold black text has a contrast ratio of 4.6:1 on the gray background.

```html
<p style="color: #000; font-size:14pt; font-weight:700; background: #777;">
	Some text in English
</p>
```

#### Passed Example 6

The content of this button ("X") does not convey anything in human language; therefore, it passes the rule regardless of its contrast ratio. However, [Success Criterion 1.4.11 Non-Text Content][sc1411] should be examined for this non-text element.

```html
<button style="color: #666; background-color: #FFF" aria-label="Close">X</button>
```

#### Passed Example 7

This text has the default browser text color on the default browser background color. By default this is black text on a white background, which has a contrast ratio of 21:1.

```html
<p>Some text in a human language</p>
```

#### Passed Example 8

This dark gray text has a contrast ratio of 12.6:1 on the white background in a shadow DOM tree.

```html
<p style="color: #CCC; background: #fff;" id="p"></p>
<script>
	const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
	shadowRoot.innerHTML = '<span style="color: #333;">Some text in English</span>'
</script>
```

#### Passed Example 9

This text has the [default user agent link text and background color](https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3), of `#0000EE` and white. This results in a contrast ratio of 9.39:1.

```html
<a href="https://w3c.org/">W3C</a>
```

#### Passed Example 10

This text is using the default user agent text color and 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

This light gray text has a contrast ratio of 5.7:1 on the white background.

```html
<p style="color: #666; background: white;">
	Some text in English
</p>
```

#### Failed Example 2

This light gray text has a contrast ratio between 4.6:1 and 5.7:1 on the white to cyan gradient background.

```html
<p style="color: #666; background: linear-gradient(to right, #FFF, #0FF); width: 300px">
	Some text in English
</p>
```

#### Failed Example 3

This 18pt large black text has a contrast ratio of 3.6:1 on the gray background.

```html
<p style="color: #000; font-size:18pt; background: #666;">
	Some text in a human language
</p>
```

#### Failed Example 4

This light gray text has a contrast ratio of 2.3:1 on the white background.

```html
<p style="color: #AAA; background: white;">
	Some text in English
</p>
```

#### Failed Example 5

This 14pt bold black text has a contrast ratio of 3.6:1 on the gray background.

```html
<p style="color: #000; font-size:14pt; font-weight:700; background: #666;">
	Some text in English
</p>
```

#### Failed Example 6

This light gray text has a contrast ratio between 1.4:1 and 4.7:1 on the background image.

```html
<p
	style="color: #777; height:50px; padding-top:20px; background: black no-repeat -20px -20px url('/test-assets/contrast/black-hole.jpeg');"
>
	Black hole sun
</p>
```

#### Failed Example 7

This black text with 60% alpha channel has a contrast ratio of 5.7:1 on the white background.

```html
<p style="color: rgba(0,0,0,.6); background: #FFF">
	Some text in English
</p>
```

#### Failed Example 8

This black text with 60% opacity has a contrast ratio of 5.7:1 on the white background.

```html
<div style="background: #FFF">
	<p style="color: #000; opacity: .6">
		Some text in English
	</p>
</div>
```

#### Failed Example 9

This gray text has a contrast ratio of 5.7:1 on the white background in a shadow DOM tree.

```html
<p style="color: #666; background: #fff;" id="p"></p>
<script>
	const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
	shadowRoot.textContent = 'Some text in English'
</script>
```

#### Failed Example 10

This semi-transparent gray text has a contrast ratio between 2.6:1 and 5.4:1 on the black and white background. The light gray text is compared to the white section of the background and the dark gray text is compared to the black section of the background.

```html
<style>
	#backgroundSplit {
		color: rgba(90, 90, 90, 0.9);
		background-position: top 0 left 0;
		background-image: linear-gradient(90deg, transparent, transparent 3.3em, black 3.3em, black 6em);
		padding: 0 1em;
	}
</style>
<span id="backgroundSplit">
	Hello world
</span>
```

#### Failed Example 11

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 6.4:1. Because this provides information, and is not only for aesthetic purposes, this is not considered [purely decorative][].

```html
<p style="color: #333; background: #FFF;">
	Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and Eduard Hoffmann.
</p>
<p style="font-family: helvetica; background: #EEE; color: #555;">
	The quick brown fox jumps over the lazy dog.
</p>
```

#### Failed Example 12

This text in a `button` element has a contrast ratio of 6.4:1.

```html
<button style="color: #555; background: #EEE;">My button!</button>
```

#### Failed Example 13

This text in a [semantic button][semantic role] has a contrast ratio of 6.4:1.

```html
<div role="button" style="color: #555; background: #EEE;">My button!</div>
```

### Inapplicable

#### Inapplicable Example 1

This text is not [visible][] because of `display: none`.

```html
<p style="display: none">Some invisible text in English</p>
```

#### Inapplicable Example 2

This text is not [visible][] because it is positioned off screen.

```html
<p style="position:absolute; top: -999em">Some invisible text in English</p>
```

#### Inapplicable Example 3

This text is not [visible][] because the foreground color is the same as the background color.

```html
<p style="color: white; background: white;" aria-hidden="true">Hidden text - U U D D L R L R B A S</p>
```

#### Inapplicable Example 4

This text is not the child of an HTML element.

```html
<svg>
	<text x="0" y="15">I love SVG!</text>
</svg>
```

#### Inapplicable Example 5

This text not part of a [text node][].

```html
<p>
	<img scr="/test-assets/contrast/example.png" alt="example" />
</p>
```

#### Inapplicable Example 6

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
<label style="color:#888; background: white;">
	My name
	<input type="text" disabled />
</label>
```

#### 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"`.

```html
<label id="my_pets_name" style="color:#888; background: white;">
	My pet's name
</label>
<div
	role="textbox"
	aria-labelledby="my_pets_name"
	aria-disabled="true"
	style="height:20px; width:100px; border:1px solid black;"
>
	test
</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 in a `fieldset` element with the `disabled` attribute.

```html
<fieldset disabled style="color:#888; background: white;">
	<label>
		My name
		<input />
	</label>
</fieldset>
```

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

```html
<div role="group" aria-disabled="true" style="color:#888; background: white;">
	<label>
		My name
		<input />
	</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>
```