: According to the WCAG2 (Web Content Accessibility Guidelines), a minimum contrast ratio of 4.5:1 for text under 18px, and a contrast ratio 3:1 for text larger than 18px, is necessary to pass

@Phylliss782

According to the WCAG2 (Web Content Accessibility Guidelines), a minimum contrast ratio of 4.5:1 for text under 18px, and a contrast ratio 3:1 for text larger than 18px, is necessary to pass AA. Bold text at 14px or more can use the the contrast ratio of 3:1. Again, font-weight and tracking can improve/reduce readability, so use your best judgement there.

The WGAC documentation specifically mentions that color/luminance isn't reliable as a way to manipulate contrast, because of perception variance by users with color vision deficiencies.

Here's a Sketch plugin that works well, except it can't calculate contrast when backgrounds are compound/layered (e.g. gradients over images): github.com/getflourish/Sketch-Color-Contrast-Analyser I try to sample the area with least contrast to compensate.

WCAG2 contrast guidelines here: github.com/getflourish/Sketch-Color-Contrast-Analyser

Vote Up Vote Down

Login to post a comment!