Color contrast should primarily be measured using the color contrast analyzer tool. This is because automated tools like Siteimprove are unable to check color contrast when the text background is a gradient or image.
For this criterion, any text that is part of a logo, or any text that is part of a disabled or inactive form field, button, or link, and any text that is pure decoration and adds zero information to the site are NOT evaluated for color contrast.
Non large-scale text is defined as text that is below a font size of 24px (18pt) with a font weight under 700, or text that is below a font size of 19px (14pt) regardless of font weight.
For non-large-scale text, the color contrast requirement is 4.5:1. The Color Contrast Analyzer plugin allows you to test for 3:1, 4.5:1, and 7:1 color contrast ratios. The test will show a white outline around text that meets the contrast ratio. For this criterion, evaluate the page using the 4.5:1 contrast test.
Above: An example of the Color Contrast Analyzer plugin testing for 4.5:1 contrast.
If you come across non-large-scale text that does not pass the 4.5:1 contrast ratio test, mark it as a failure on the checklist.
