Component Library

Color Contrast Minimum

Issue Description

  • An element lacks sufficient contrast with a ratio of <x.x:x>
  • There are design elements that lack sufficient contrast.

Recommendation

Make sure there is sufficient contrast between elements which provide information or meaning (4.5:1 for normal text, 3:1 for large text).

Replace low-contrast color combinations with high-contrast combinations, change the background color to <#XXXXXX> or text color to <#YYYYYY>.

https://webaim.org/articles/contrast/