Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge...
Transcript of Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge...
![Page 1: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/1.jpg)
Tailoring the High Contrast Experience
@soMelanieSaid at TPAC 2019 Web Developer Meetup
![Page 2: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/2.jpg)
![Page 3: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/3.jpg)
![Page 4: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/4.jpg)
“The text on the blue background is kind
of hard to read”
![Page 5: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/5.jpg)
“The text on the blue background is kind
of hard to read”
Contrast ratio:
1.74:1
![Page 6: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/6.jpg)
“The text on the blue background is kind
of hard to read”
Contrast ratio:
21:1
![Page 7: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/7.jpg)
“That’s much better!”
Contrast ratio:
21:1
![Page 8: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/8.jpg)
![Page 9: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/9.jpg)
Layered Approach Towards Inclusive Color and Contrast
![Page 10: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/10.jpg)
We can tailor our websites to users’ visual needs.
![Page 11: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/11.jpg)
![Page 12: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/12.jpg)
![Page 13: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/13.jpg)
![Page 14: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/14.jpg)
![Page 15: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/15.jpg)
![Page 16: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/16.jpg)
![Page 17: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/17.jpg)
![Page 18: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/18.jpg)
prefers-color-scheme
prefers-contrast
forced-colors
![Page 19: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/19.jpg)
prefers-color-schemeHint to provide a particular color
scheme (e.g. dark)
![Page 20: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/20.jpg)
![Page 21: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/21.jpg)
@media (prefers-color-scheme: dark) {/* “Dark mode” styles */
}
![Page 22: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/22.jpg)
prefers-contrast Hint to increase or
decrease contrast
![Page 23: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/23.jpg)
forced-colorsHint that content is rendered in user’s
system colors
![Page 24: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/24.jpg)
prefers-color-scheme
prefers-contrast
Expectation:the website will fully manage its
own color scheme and contrast
![Page 25: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/25.jpg)
forced-colors
Expectation:colors are applied
by the browser; the website may want
to optimize its design
![Page 26: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/26.jpg)
![Page 27: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/27.jpg)
![Page 28: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/28.jpg)
![Page 29: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/29.jpg)
How browsers apply forced colors to web content
![Page 30: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/30.jpg)
![Page 31: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/31.jpg)
![Page 32: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/32.jpg)
![Page 33: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/33.jpg)
![Page 34: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/34.jpg)
![Page 35: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/35.jpg)
Reverted properties
color
fill
stroke
text-decoration-color
text-emphasis-color
background-color
border-color
outline-color
column-rule-color
scrollbar-color
-webkit-tap-highlight-color
box-shadow
text-shadow
background-image (only on user interactive controls, excluding buttons)
![Page 36: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/36.jpg)
Why not globally revert background-image?
Many developers use this property to display “content” images
![Page 37: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/37.jpg)
Text backplates guarantee legibility
![Page 38: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/38.jpg)
Color schemes in forced color modes
prefers-color-schemeevaluates appropriately based on Canvas color (page background)
![Page 39: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/39.jpg)
Web devs can apply content-specific knowledge to tailor
the forced colors experience.
![Page 40: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/40.jpg)
SVGs are not modified…mostly
Only SVG <text> and<foreignObject> have forced colors applied for legibility
![Page 41: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/41.jpg)
currentColor
.header__brand-icon * {stroke:currentColor;
}
.header__c-glyph {fill: currentColor;
}
![Page 42: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/42.jpg)
Forced colors page missing color swatches
![Page 43: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/43.jpg)
Component requirements
1. Retain the color swatch2. Prevent swatch rendering
on top of any given background color (muddy?)
3. Preserve the user’s color scheme for text legibility
![Page 44: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/44.jpg)
Prior art: media query syntax
@media (-ms-high-contrast: active) {}
Values:
none (IE and early MS Edge) | active | black-on-white | white-on-black
![Page 45: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/45.jpg)
Standard media query syntax
@media (-ms-high-contrast: active), (forced-colors: active) {}
Values:
none | active
![Page 46: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/46.jpg)
Prior art: opt out of forced colors
@media (-ms-high-contrast: active) {
.prefs__palette {
-ms-high-contrast-adjust: none;
}
…
![Page 47: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/47.jpg)
Opt out of forced colors
@media (-ms-high-contrast: active), (forced-colors: active) {
.prefs__palette {
-ms-high-contrast-adjust: none;
forced-color-adjust: none;
}
![Page 48: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/48.jpg)
![Page 49: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/49.jpg)
Be careful with static colors
.prefs__palette {
forced-color-adjust:
none;
background-color: #000;
}
![Page 50: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/50.jpg)
Static color values are unaware of the user scheme
![Page 51: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/51.jpg)
Use appropriate system colors
.c-label {
padding: .25em;
background-color:
Canvas;
color: Text;
}
![Page 52: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/52.jpg)
CSS system colors relevant to Windows High Contrast
High Contrast Theme Color CSS System Color Prior System Colors
Text Text WindowText
Hyperlinks LinkText -ms-hotlight (IE and MS Edge only)
Disabled Text GrayText
Selected Text HighlightText (foreground), Highlight (background)
Button Text ButtonText (foreground), ButtonFace (background)
Background Canvas Window
![Page 53: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/53.jpg)
Full list of system colors on CSS Color Editor’s Draft
aka.ms/system-colors-draft
![Page 54: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/54.jpg)
Optimize for dark / light forced colors
@media (forced-colors: active)
and (prefers-color-scheme: light){
.prefs__palette {
background: #fff;
}
}
![Page 55: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/55.jpg)
Instead of removing styles…
button {
border: 0;
}
![Page 56: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/56.jpg)
…consider transparency
button {
border: 1px solid
transparent;
}
![Page 57: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/57.jpg)
Browser support for forced colors (desktop)
Vendor-prefixed styling
New standards
In development behind a flag in the Chromium project
![Page 58: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/58.jpg)
Testing without a Windows machine?
Virtual Machines: aka.ms/web-vms
![Page 59: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/59.jpg)
![Page 60: Tailoring the High Contrast Experience€¦ · Hyperlinks LinkText -ms-hotlight(IE and MS Edge only) Disabled Text GrayText Selected Text HighlightText(foreground), Highlight(background)](https://reader036.fdocuments.us/reader036/viewer/2022081523/5fd47a80ef95c70d94269efe/html5/thumbnails/60.jpg)
Slides, demo, and more:aka.ms/tpac-hc