The problem poses three different states to solve with only two graphic answers. This can always lead to confusion. I think the wrong approach is in the working process, where an attempt is made to reach a solution without properly defining the approach. My working process would be the following:
- As a starting point, I would define the exact meaning of each
state in the entire app or web page
- Create a graphic answer for each state, no matter how many they
- And finally see if some of these answers can be unified without
affecting the state meaning
Definition of states (only for this case):
- Status #1: accept/yes/save/Ok
- Status #2: cancel/no
- State #3: revoke/refuse/reject
Graphic alternative for each state:
And only at the end of the process see what possibility exists to unify any of the states visually. It's clear that Accept and Cancel are antagonistic, so they cannot be the same.
If it's due to a color problem, in the image you are already using three: red, green, and black. If it's a problem of the area that each color occupies, this is solved by giving greater relevance to white. If the goal is to make the user clearly see what type of action they are performing or what result they obtained with this action, two different states sharing the same graphic is not the best solution.
Give relevance to the icon, for example in negative with the color of the alert, facilitates perception without the need to occupy the entire area with a background of the same color.