Large scale text and images can be 3:1 (4.5:1 AAA).
Purely decorative, logos, or inactive elements that don’t matter, have no contrast ratio requirements.
Designing for color contrast is straightforward in many situations. Contrast checkers take the background color and the foreground color, and give you a ratio. However, there are more complex situations which need special testing methods. The challenges we most often run into are text over images, text over gradients, and moving or dynamic components.
The simplest and most robust solution for text over images is to make sure the text works over a background of the same color. This means white text on a white background should have a passing contrast ratio.
Text Over Image – Design
Text Over Image – Testing Set Up With White Background
The design will still be accessible in a worst case scenario where you have a 1:1 contrast ratio. This, of course, means you need something between the background and foreground. It can be an overlay, text-shadow, gradient, outline or combination. But, it needs to create enough contrast on a background of the same color.
This often applies to dynamic and moving components as well. If you’re not sure of the content, or it has many states it is easiest to test for a worst case scenario.
For text over gradients the most comprehensive approach is to test against the most similar value of the gradient. This only applies to areas where the text and gradient line up. Don’t check margins and padding where text will never occur. If the gradient is blue to white with blue text, the text should pass against the blue of the gradient. Even if in the current mockup or prototype it doesn’t seem like a problem it may become one later. It’s hard to predict on every device, resolution and browser exactly where things will line up. Add to that the possibility that the text could be changed and it’s easier to be sure the entire gradient and text work together.
Text Over Gradient – Technically this passes, however if the text or width ever change it will fail
http://webaim.org/resources/contrastchecker/
https://gmazzocato.altervista.org/colorwheel/wheel.php
