In situations where the color is a gradient or cannot be determined programmatically, compare the lightest part of the text with the lightest part of the background using the color picker. Then compare the darkest part of the text with the darkest part of the background.
How to Check Gradients
Check that the ratios are greater than [4.5:1]
- Choose a color picker tool and a color contrast checker tool.
- Note: some color contrast checkers like WebAIM’s Color Contrast Checker and TPGi’s Color Contrast Analyzer have a color picker built into their checker tool. For this article we will use WebAIM color contract tool.
For example we will use WebAIM color contract tool
- Click inside the input field filled with the color (next to the Hex value field)
- When the color menu opens, look for the Color picker icon (a dropper tool).
- This is what you’ll use to select the colors from your gradient and text
- In the web page or image, use the color picker to select the lightest part of the text color and the lightest part of the gradient’s background color
- In the Color Contrast Checker, enter the text colors into the “foreground” and “background” inputs. Results will show up automatically below
- Then do the same with the darkest part of the text color and the darkest part of the background color
- Based on the results of these two checks, you can adjust either your gradient color or the text color and recheck to get to a passing contrast score overall