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
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/themes/accessibility.mdx
+20Lines changed: 20 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -101,6 +101,26 @@ The calculation happens in the browser rather than at build time. If the backgro
101
101
`adaptive-contrast()` selects between black and white. Because those are the two available outcomes, the ratio the mechanism can achieve against a mid-tone background is bounded at roughly 4.6:1. That satisfies the WCAG AA threshold of 4.5:1 for normal text, which is the default the engine is configured for. Do not rely on this mechanism alone to reach the 7:1 AAA threshold; reaching AAA requires choosing background colors that are light or dark enough to allow it.
102
102
</DocsAside>
103
103
104
+
### Set the contrast level
105
+
106
+
The calculated foreground is measured against a WCAG threshold held in the `--ig-contrast-level` CSS variable, which defaults to `var(--ig-wcag-aa)`. Three levels are predefined: `a`, `aa`, and `aaa`.
107
+
108
+
Set the level for the whole application when you generate the palette:
To raise the level for one part of the page only, override the variable on that scope:
115
+
116
+
```css
117
+
.high-contrast-panel {
118
+
--ig-contrast-level: var(--ig-wcag-aaa);
119
+
}
120
+
```
121
+
122
+
The contrast level moves the luminance threshold at which the calculated foreground switches between black and white; it does not change which two colors can be chosen. See [Palettes](palettes.mdx) for the generated contrast variables.
123
+
104
124
### Scale text with the user's browser settings
105
125
106
126
No configuration is required. Every type scale in the four shipped themes expresses `font-size`, `line-height`, `letter-spacing`, and margins through the `rem()` function, so all emitted values are relative to the root font size.
Copy file name to clipboardExpand all lines: docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
+13-8Lines changed: 13 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,8 +29,8 @@ Accessibility support is delivered by two layers — the components themselves a
29
29
| Standard | Region | What it requires |
30
30
|---|---|---|
31
31
| <ahref="https://www.w3.org/WAI/WCAG21/quickref/"target="_blank"rel="noopener noreferrer">WCAG 2.1 Level AA</a> | International | The success criteria listed below. The baseline referenced by the other two. |
32
-
| <ahref="https://www.section508.gov/"target="_blank"rel="noopener noreferrer">Section 508 (Revised)</a> | United States | Federal procurement. Since the 2018 Revised Standards it incorporates WCAG 2.0 Level AA by reference, so it is satisfied by the same work. |
33
-
| <ahref="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/"target="_blank"rel="noopener noreferrer">EN 301 549</a> |European Union | The harmonised standard behind the European Accessibility Act, enforceable since 28 June 2025. Also built on WCAG. |
32
+
| <ahref="https://www.section508.gov/"target="_blank"rel="noopener noreferrer">Section 508 (Revised)</a> | United States | Federal procurement. Since the Revised Section 508 Standards (published 2017, compliance date January 2018) it incorporates WCAG 2.0 Level AA by reference, so it is satisfied by the same work. |
33
+
| <ahref="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/"target="_blank"rel="noopener noreferrer">EN 301 549</a> |Europe | The European standard referenced for ICT accessibility, built on WCAG. The European Accessibility Act, which builds on it, applies from 28 June 2025. |
34
34
35
35
<DocsAsidetype="note">
36
36
Section 508 previously defined its own 16 rules under §1194.22. Those were superseded by the Revised Standards, which adopt WCAG directly. Targeting WCAG 2.1 Level AA therefore addresses all three frameworks above.
@@ -86,9 +86,9 @@ This index records what each component's documentation covers today. **Not yet v
86
86
|[Avatar](../layouts/avatar.mdx#accessibility)| Documented | Documented | See the topic's Accessibility section |
87
87
|[Badge](../inputs/badge.mdx#accessibility)| Documented | Documented | See the topic's Accessibility section |
88
88
|[Banner](../banner.mdx)| Not yet verified | Not yet verified | — |
89
-
|[Bottom Navigation](../tabs.mdx)| Not yet verified | Not yet verified | — |
89
+
|[Bottom Navigation](../tabbar.mdx)| Not yet verified | Not yet verified | — |
90
90
|[Button](../button.mdx)| Not yet verified | Not yet verified | — |
|[Button Group](../inputs/button-group.mdx#accessibility)|Documented | Documented|See the topic's Accessibility section|
139
144
|[Calendar](../scheduling/calendar.mdx#keyboard-navigation)| Documented | Not yet verified | See the topic's Keyboard Navigation section |
140
145
|[Card](../layouts/card.mdx)| Not yet verified | Not yet verified | — |
141
146
|[Carousel](../layouts/carousel.mdx#accessibility)| Documented | Documented | See the topic's Accessibility section |
@@ -248,11 +253,11 @@ Include the component, the assistive technology and browser you used, the expect
248
253
</FaqItem>
249
254
250
255
<FaqItemquestion="Why do some components say "Not yet verified"?"indicatorPosition="end">
251
-
That status means the behavior has not been assessed in the current review cycle. It is not a statement that the component fails a criterion. It is recorded honestly so you can tell the difference between a verified result and an unreviewed one.
256
+
That status means the behavior has not been assessed in the current review cycle. It is not a statement that the component fails a criterion. It is recorded honestly so you can tell the difference between a verified result and one that has not been reviewed.
252
257
</FaqItem>
253
258
254
259
<FaqItemquestion="Does Section 508 still have its own separate rules?"indicatorPosition="end">
255
-
No. The 2018 Revised Standards replaced the earlier §1194.22 rules and adopt WCAG Level AA by reference, so meeting WCAG also addresses Section 508.
260
+
No. The Revised Section 508 Standards (published 2017, compliance date January 2018) replaced the earlier §1194.22 rules and adopt WCAG Level AA by reference, so meeting WCAG also addresses Section 508.
256
261
</FaqItem>
257
262
258
263
<FaqItemquestion="Does the compliance information apply to custom themes?"indicatorPosition="end">
Copy file name to clipboardExpand all lines: docs/xplat/src/content/en/components/themes/accessibility.mdx
+20Lines changed: 20 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -99,6 +99,26 @@ The calculation happens in the browser rather than at build time. If the backgro
99
99
`adaptive-contrast()` selects between black and white. Because those are the two available outcomes, the ratio the mechanism can achieve against a mid-tone background is bounded at roughly 4.6:1. That satisfies the WCAG AA threshold of 4.5:1 for normal text, which is the default the engine is configured for. Do not rely on this mechanism alone to reach the 7:1 AAA threshold; reaching AAA requires choosing background colors that are light or dark enough to allow it.
100
100
</DocsAside>
101
101
102
+
### Set the contrast level
103
+
104
+
The calculated foreground is measured against a WCAG threshold held in the `--ig-contrast-level` CSS variable, which defaults to `var(--ig-wcag-aa)`. Three levels are predefined: `a`, `aa`, and `aaa`.
105
+
106
+
Set the level for the whole application when you generate the palette:
To raise the level for one part of the page only, override the variable on that scope:
113
+
114
+
```css
115
+
.high-contrast-panel {
116
+
--ig-contrast-level: var(--ig-wcag-aaa);
117
+
}
118
+
```
119
+
120
+
The contrast level moves the luminance threshold at which the calculated foreground switches between black and white; it does not change which two colors can be chosen. See [Palettes](palettes.mdx) for the generated contrast variables.
121
+
102
122
### Scale text with the user's browser settings
103
123
104
124
No configuration is required. Every type scale in the four shipped themes expresses `font-size`, `line-height`, `letter-spacing`, and margins through the `rem()` function, so all emitted values are relative to the root font size.
0 commit comments