What level of compliance does a chart with patterns have in WCAG 2.1?



  • 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?

    Pie chart with slices that use different patterns



  • 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.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2