Skip to content

SC 1.4.11 - Solid colour logo as link #4376

Open
@erikkroes

Description

@erikkroes

Following a conversation in WCAG-Audit-Discussions/NL-BE#83 and during a video call, it was suggested to clarify this issue here as well.

The case

A logo has a single color and is being used as a link. The contrast with the background is low (less than 3∶1). Does this fail WCAG SC 1.4.11?

My impression

SC 1.4.11 has an exception for Graphical Objects, which includes logos.

Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Graphical objects do not have to meet the contrast requirements when "a particular presentation of graphics is essential to the information being conveyed".
Het slaat op "User interface components" en "Graphical objects".

"Testing Principles" states:

Identify each user-interface component (link, button, form control) on the page and: ...

The definition of user interface component:

User interface components include form elements and links as well as components generated by scripts.
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html#dfn-user-interface-component

My conclusion

I read that a link is a user interface component. I read that there is an exception for logos under graphical objects.
However, the link is a user interface component. It should not be assessed as a graphical object, and the exception does not apply. The logo fails 1.4.11

Possible solutions:

  • Make sure the contrast is higher than 3∶1.
  • Make the link meet 1.4.11 in another way with a border, underline or some other contrasty addition.
  • Don't use the logo as a link.
  • Compliance loophole: if the link is present elsewhere on the page, there's an alternative.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions