Color contrast and hover state [a11y]

Question

When multiple pieces of information of different importance are presented within a same piece of UI (e.g., table row, list item), some designers prefer to have the "secondary" or "less important" information be presented using subtle colors (e.g., light grey) that fail the basic color contrast criteria. From the accessibility point of view, is the contrast less than 3 acceptable if the hover/focus state has over 4.5? If not, what is a viable alternative that maintains the primary-secondary relationship between different pieces of information (e.g., the need to reduce distraction)?

Answer 1

Relying only on hover and focus to provide enough contrast is indeed not sufficient. Informative/interactive elements should have enough contrast in every state.

But contrast is not the only way to provide "visual hierarchy". I quickly created these buttons and links to show that it is a matter of playing around with border thickness, font-weight, color, contrast etc.

So if lowering contrast is not sufficient due to the minimal accessibility requirement, you can combine multiple ideas. When you search for "visual hierarchy" you will find enough information to move forward, like one of the first results gave me this list of possible characteristics to use:

• Size – Users notice larger elements more easily.
• Color – Bright colors typically attract more attention than muted ones.
• Contrast – Dramatically contrasted colors are more eye-catching.
• Alignment – Out-of-alignment elements stand out over aligned ones.
• Repetition – Repeating styles can suggest content is related.
• Proximity – Closely placed elements seem related.
• Whitespace – More space around elements draws the eye towards them.
• Texture and Style – Richer textures stand out over flat ones.

_{Source: https://www.interaction-design.org/literature/topics/visual-hierarchy}