I'm trying to find information about minimum contrast ratio between graphic elements (e.g. a bar-graph and its background) but I can't seem to find any. Are there any good practices?

WCAG 2.0 mentions 3.0 Contrast between text / background. Would this be the standard for a graph?

1 Answer 1


See this: for thick design elements (width > 3px), you should plan for a minimum 3:1 contrast ratio, and 4.5:1 otherwise.

For a bar graph, the bars need a 3:1 contrast ratio with the background.

If you're doing a stacked bar graph, you will need a 3:1 contrast ratio between any two adjacent slices of the stack (which is pretty hard unless you alternate bright / dark slices), or add 3px+ gaps between slices.

Neither of these things are relevant to accessibility if labels indicating the numerical value of the bars are provided, since in that case the sizes of the bars are not essential to comprehension.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.