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.
Large-scale text is defined as text that is a font size of 24px (18pt) or larger with a font weight under 700, or text that is a font size of 19px (14pt) or larger with a font weight of 700 or higher.
For large-scale text, the color contrast requirement is 3: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. In general, for testing, you want to start testing for 4.5:1 (the Level AA requirement for small text). Any text that meets 4.5:1 will meet 3:1.
Above: An example of the Color Contrast Analyzer plugin testing for 4.5:1 contrast.
If you come across text that does not pass the 4.5:1 contrast ratio test, if the text meets the definition of large-scale text, re-test using 3:1. If the text is still not highlighted in the color contrast analyzer, mark it as a failure in the checklist.
