Small text* must meet a 4.5 to 1 foreground to background color ratio
Large text** must meet a 3 to 1 foreground to background color ratio
Link text must stand out from adjacent text by a 3 to 1 ratio (if it is only set apart by color).
* Less than 18 pt normal or 14 pt bold
**Greater or equal to 18 pt normal or 14 pt bold
In other words, this is bad:
And this is very bad, to demonstrate the point to even those with really good eyes
This is good:
As for links, this link doesn't have adequate contrast (2.5:1) from surrounding text. This link does (3:1). P.S. these are faux links so I could properly color the text.
The contrast ratio checkpoint specifically refers to text, but visual controls can have the same issue. You want users to be able to discover these controls, so follow the same principle (with the exception of a disabled control which users can't interact with, anyway).
Here is a real-world example of that. These controls (the "x" and double downward-pointing chevron images) are large text equivalent. But the first example is less than a 3:1 contrast ratio and could be a problem for some users:
The controls that follow have been adjusted to a 3:1 contrast ratio:
NOTE: For icons with a non-transparent background, like this help icon , you should test the foreground color of the icon against the background color of the icon. The color of the background it is sitting on doesn't matter in this case. The user needs to be able to distinguish the question mark, not the background of the icon.
People with moderately low vision should not be required to use assistive technology to view our web applications. Most people's eyesight deteriorates as they age, so this checkpoint is very relevant to a large population of our users.