1

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)?

1 Answer 1

0

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.

Examples of primary and secondary buttons and links

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

3
  • I like these ideas. Note that the example might not pass contrast. I don't know the exact colors used for the text but I get roughly a 4:1 contrast for the "Secondary" button text on a gray background, which will only pass if the font size of "Secondary" is 18pt or larger (or 14pt bold and larger). The "Secondary" link text, since it's on a white background, might have a higher contrast but the text is too small/pixelated for me to test it. But the main point was using bold font (and border) for primary and normal font for secondary, which I like from an accessibility perspective. Aug 10, 2023 at 1:44
  • That's strange, I tested the secondary button and got 5:1 otherwise I wouldn't have posted it. Have you clicked on the image to get it full size? Or maybe the tool I'm using isn't telling the truth.
    – jazZRo
    Aug 10, 2023 at 8:24
  • Tried again with a zoomed version of your button but I'm getting some anti-aliasing so might not have the exact RGB values. The secondary button text came out as #636363 and the button background was #DADADA, giving a contrast of 4.3:1. That's probably close enough to 4.5:1 that I might not have the exact color values and the real colors might pass. But that's not close to the 5:1 you're seeing. It's somewhat irrelevant because I liked your ideas. I just wanted to make sure WCAG conformant colors were used. Aug 25, 2023 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.