Use of Color (Level a) WCAG 1.4.1 – Accessibility Design Tips
chrisyoong.com
chrisyoong.com
> If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1.
So the greyscale design at the top would pass as long as the header was black, and the links were grey with a 3:1 contrast vs the header, and 4:5 contrast between the links vs the background? The grey would have to be pretty light though.
My understanding is color blindness means some can't judge "hue contrast" but they'll still be able to judge "lightness contrast", and this guideline is more about not relying on hue contrast to convey information.
Similar for the green for online and red for offline example, picking a dark green and a light red (or even white, or even no dot) might also be enough visual distinction.