The following is an example of a chart using patterns. When a chart uses patterns (instead of plain colors) to separate sections, in which category of WCAG levels does it fall – A, AA or AAA?
-
Hi, few questions as there isn't enough information at the moment. Is it an image or is it made of elements? If it isn't an image, what is the markup / code used to generate it? The only thing I can say for certain is that the light green probably fails contrast level of 3:1 and at its current size the font size is too small. You need to include a fiddle if this is not an image.– GrahamTheDevCommented Nov 17, 2020 at 9:54
-
This is just an example of as chart. I'm interested to know in general, when a chart uses patterns instead of plain colors to separate sections in which category of WCAG levels does it fall A, AA or AAA?– ElenaCommented Nov 17, 2020 at 9:57
-
Patterns themselves would not make a chart fail, if anything it would improve accessibility as you now have a way of distinguishing areas that isn't just by colour. The colour choices are important as is font size. However that is about 10% of accessibility so not sure how else to guide other than look at those items.– GrahamTheDevCommented Nov 17, 2020 at 9:58
Add a comment
|
1 Answer
Talking purely about patterns to differentiate areas of a chart and nothing else:-
Patterns (perhaps a little less fussy than the ones shown) actually enhance accessibility.
The reason for this is people with colour blindness have a way of differentiating between each area. This is especially important for people with Achromatopsia (complete colour blindness).
In fact if you don't use a pattern you may fail Success Criterion 1.4.1 Use of Color as colour would be the only way of differentiating a section (that is assuming you don't have labels or use a key at the side of the table).
The example given is OK without patterns.
With that being said, you are labelling each section of the graph so as long as there is at least a 3:1 contrast ratio between each section (which can be achieved by ensuring the section border is at a 3:1 contrast ratio with the contents of the section on either side in order to pass 1.4.3 contrast minimum) then you would pass 1.4.1 as it states:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
and your labels make your graph conform to that.
Other things that we can't ascertain but you need to consider
The only thing with the example given is the size of the font looks too small.
Also if this is an image and not created from interactive elements you need to ensure the information is available in an alternative format.
As alt text (assuming this is web based) is not appropriate for providing that much information you would be better hiding the image from screen readers by making the alt attribute empty (so alt="" not alt) and then including the information in a table or similar. If you want more help with this throw a question up on stackoverflow.com as that is more about technical implementation.
Also consider adding the percentages for each section just as a general UX observation.
