Confirmed users
36
edits
Accessibility/Design Guide: Difference between revisions
Jump to navigation
Jump to search
Add SVG guidance
Mreschenberg (talk | contribs) (Add blur guidance) |
Mreschenberg (talk | contribs) (Add SVG guidance) |
||
| Line 32: | Line 32: | ||
* With HCM enabled, the set of styles our style system will permit is reduced. Properties [https://searchfox.org/mozilla-central/search?q=ignored_when_colors_disabled&redirect=false here] with a value of `ignored_when_colors_disabled=True` may be tweaked by the style system before computed style is set. Learn more [https://searchfox.org/mozilla-central/rev/25997ce8267ec9e3ea4b727e0973bd9ef02bba79/servo/components/style/properties/cascade.rs#388 here]. | * With HCM enabled, the set of styles our style system will permit is reduced. Properties [https://searchfox.org/mozilla-central/search?q=ignored_when_colors_disabled&redirect=false here] with a value of `ignored_when_colors_disabled=True` may be tweaked by the style system before computed style is set. Learn more [https://searchfox.org/mozilla-central/rev/25997ce8267ec9e3ea4b727e0973bd9ef02bba79/servo/components/style/properties/cascade.rs#388 here]. | ||
* Blur effects, drop shadows, semi-opaque overlays, and other potentially distracting styles should be removed and/or replaced with their solid colour equivalent. For example, if a modal renders above content on a blurred background in non-HCM, when HCM is active it should render on a solid Canvas colour background. Drop shadows should be replaced with borders, following the guidance above. On most platforms, enabling HCM also enables "Reduce Transparency" -- we should respect this. | * Blur effects, drop shadows, semi-opaque overlays, and other potentially distracting styles should be removed and/or replaced with their solid colour equivalent. For example, if a modal renders above content on a blurred background in non-HCM, when HCM is active it should render on a solid Canvas colour background. Drop shadows should be replaced with borders, following the guidance above. On most platforms, enabling HCM also enables "Reduce Transparency" -- we should respect this. | ||
* SVGs should be adapted to render "reasonably" in HCM. When SVGs are decorative, or communicate information that is duplicated in a more traditional/accessible format like text, colours outside of the HCM palette may be used. The primary foreground colour for the SVG should be CanvasText and the primary background colour should be Canvas. When SVGs uniquely communicate information, or act as controls, they must be rendered using only colours from the HCM palette. You can find examples of decorative SVGs that have been adapted for HCM [https://www.figma.com/file/w4zKuXo3sn4y9q2NdMCXY4/High-Contrast-Mode?type=design&node-id=1667-13796&t=3zKtSbl9lUiY52P3-0 here]. | |||
=== Independent of HCM (with or without HCM enabled) === | === Independent of HCM (with or without HCM enabled) === | ||