search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.46k stars 11.89k forks source link

Accessibility Testing - Applying High contrast #10372

Open nishantjhade opened 2 years ago

nishantjhade commented 2 years ago

Expected behavior

While doing Accessibility Testing - applied High Contrast Mode

While the user is applying High contrast (Aquatic mode) the the chart legend and axis labels should visible clearly.

image

image

Current behavior

While the user is applying High contrast (Aquatic mode) the the chart legend and axis labels are not visible clearly.

Reproducible sample

https://www.chartjs.org/docs/2.9.4/charts/bar.html

Optional extra steps/info to reproduce

From Windows Setting -> Color Contrast mode enable Color Contrast and select High Contrast from dropdown to enable High Contrast Mode and issue can repro in sample site - https://www.chartjs.org/docs/2.9.4/charts/bar.html

Possible solution

No response

Context

Accessibility Testing

chart.js version

v3.7.1

Browser name and version

Chrome

Link to your project

No response

LeeLenaleee commented 2 years ago

Chart.js is fully customizable, what you can do is add a white background to the chart so that it always is clearly vissable or edit the colors yourself.

I am not sure if it should be up to chart.js to detect if high contrast mode is on and change colors because of that. Also the ways to detect if contrast mode is enabled that I could find are hacky at best.

So I think that its best for the user itself to check is high contrast mode is on and update the colors of the chart accordingly to what he wants for now. Or use a custom plugin to draw a white background behind the chart so its always good vissable.

https://jsfiddle.net/r9vsog51/1/

nishantjhade commented 2 years ago

Chart.js is fully customizable, what you can do is add a white background to the chart so that it always is clearly vissable or edit the colors yourself.

I am not sure if it should be up to chart.js to detect if high contrast mode is on and change colors because of that. Also the ways to detect if contrast mode is enabled that I could find are hacky at best.

So I think that its best for the user itself to check is high contrast mode is on and update the colors of the chart accordingly to what he wants for now. Or use a custom plugin to draw a white background behind the chart so its always good vissable.

https://jsfiddle.net/r9vsog51/1/

Thanks for reply. I am aware how to change background and legend colors as I have used DarkMode and LightMode theme option. problem is that Chart is generating as image and when you are in light mode (normal / default) - background is white / light and legend text color is black.
as chart is generating as image when we do accessibility test with High Contrast in which all color would be dark then due to image Chart legend are not visible in that case

brennanyoung commented 1 year ago

Please note: While individual opinions and needs may differ, there is no WCAG requirement to support Windows HCM. A lengthy discussion on this may be found here, in particular, this comment.

The WCAG success criteria that pertain to color/contrast make no mention of special contrast or dark modes offered by the user agent or host system (although those success criteria are still valid in their own specific contexts).

However, HCM can reveal WCAG failures that may otherwise be overlooked. In most cases, these are failures of WCAG SC 1.3.1 Info and Relationships because

The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

So, if meaningful information is actually lost (or unavailable) in HCM, because it depends on a particular color/contrast change, you do have a problem to fix. For example, if the legend disappears entirely. This also applies very much to GUI elements such as slider tracks, progress bars, button borders and so on.

For non-bitmap content (such as native HTML elements), you can support high-contrast mode by making sure everything non-decorative has a non-zero border/stroke. If you do not wish the border/stroke to be visible when HCM is not enabled, use "transparent" as the color value. Windows HCM will draw 'transparent' 1px borders/strokes in Windows HCM using a foreground color and will even change that color automatically to express certain attributes (such as disabled).

For canvas (bitmap) content, you are more constrained, because HCM is liable to render bitmaps with the HCM background color (typically black). In such a case, devise a proper dark mode or high contrast color scheme that users can enable, and redraw the canvas with that swatch.

If you're attempting to support end-user high contrast anyway, consider exploring the various other high-contrast or dark mode browser extensions. They use different mechanisms to achieve the effect, and this leads to different results. If you can find one (or more) which works with your content, you can mention it in your accessibility statement as an alternative to HCM.