8000 1.4.1 · alphagov/wcag-primer Wiki · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
Anika Henke edited this page Oct 15, 2024 · 7 revisions
8000

1.4.1 Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

When this is applicable

Always.

Check meanings of colours

Just looking at the page is usually fine. It can help to use a grayscale filter and compare the colour version side by side.

Where colour provides meaning or information, check:

  • this meaning or information is also provided by something else other than that colour

As part of this:

  • include focus states
  • include visited as well as unvisited link states, but you don't need to compare them against each other
  • ignore hover and active states

It's okay if:

  • the meaning is represented elsewhere on the page, for example if the highlighted menu item is also visible in the breadcrumbs
  • links are seemingly only distinguished by colour but positioning or spacing provide additional visual cues that it is a link - for example, if it's placed in a side navigation or if it has different padding around it that makes it clearer it's something clickable
  • colour alone is used to distinguish content, as long as there is a sufficient difference (contrast of at least 3:1) - for example, coloured links in contrast to the body text
  • text uses background colours since this usually also adds a shape

Mobile app testing

No difference

Clone this wiki locally
0