Although our main concern in the case of color contrast is text, we also have to care about our other visual element’s presentation.

The basic rule is that our user interface components and graphical objects should have a 3 : 1 contrast ratio against the adjacent color(s).

But what does this mean in practice?

Basically, if you have a button, it should have 4.5 : 1 contrast ratio between the button’s background and its text. Also, the button (its background) should have a 3 : 1 contrast against the containing area.