diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html index c5656bbb17..5510674e5e 100644 --- a/content/patterns/slider/examples/slider-rating.html +++ b/content/patterns/slider/examples/slider-rating.html @@ -130,8 +130,8 @@
canvas
and linkText
values for the stroke
and fill
properties of each inline SVG rect
and text
elements.
+ To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector (e.g. @media (forced-colors: active)
) .
+ For example, the color of the rating value borders is set to match link foreground color of high contrast mode text by specifying the CSS canvas
and linkText
values for the stroke
and fill
properties of each inline SVG rect
and text
elements.
If specific colors were used to specify the stroke
and fill
properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.forced-color-adjust
property set to the value auto
for the currentcolor
value to be updated in high contrast modes.
Some browsers do not use auto
for the default value.