Avoid reliance on color

In addition to its role in aesthetic appeal, color is a valuable way to present information—for example, coding categories of information or highlighting information to take advantage of cultural stereotypes (such as red for “stop”). However, some people with vision impairments can’t perceive color at all, while others are unable to distinguish specific color pairs. Information provided only through color will be unavailable to these users.

When using visual characteristics, make sure the information is available to people who can’t see color:

  • Provide another cue. Use color as a way to convey information to people who can perceive color, but then also provide the information in another way for people who can’t see color—in text, for example.
  • Provide meaningful labels. Give controls such as links and menus meaningful labels and titles so that people can understand what they do without needing instructions.


  • Print out your page in black and white. Do its information and instructions make sense when color isn’t available?
  • Read your page to someone who isn’t looking at the screen. Can they make sense of everything they hear?
  • Check your page for references to visual appearance, size, position, or orientation, and then update the content so that people who can’t see can still understand what you mean.


✎ Technique: Required fields

A clear indication that specific form fields are required can save users time and avoid potential errors relating to missing data when a form is submitted.

This indication should be visually distinct without relying on color, and it should also be programmatically available to screen-reader users.


Bad example

In this example, the asterisk is placed next to the text input. It has no connection to the input, so it will not be read aloud when the input is focused, and the screen-reader user would have no idea that it was required. If it were read, it would be read as “asterisk,” even though it should be read as “required.”

<label for="email">Your email</label>
<input type="text" id="email" /> <span>*</span>

Bad example

In this example, the asterisk is inside the label, so it is announced. However, “asterisk” or “star” does not clearly convey that the field is required.

<label for="email">Your email *</label>
<input type="text" id="email" />

Good example

In this example, the aria-required attribute is placed on the form field itself, meaning that “required” will be read when the control has focus. In addition, the redundant “star” is hidden from screen readers by placing it inside a <span> with aria-hidden="true". Content in a DOM tree with an aria-hidden="true" attribute is ignored by screen readers.

<label for="email">Your email <span aria-hidden="true">*</span></label>
<input type="text" id="email" aria-required="true" />

This information is now available to screen readers whenever the field is focused. For example, VoiceOver (macOS) will read, “Your email, required, edit text.”

✎ Technique: Indicating current page location

Users can find their way around a web site more easily and confidently if they know where they are.

This is why websites tend to highlight the navigation-menu item for the current page or section. But to make this information is accessible, we cannot rely on color alone to differentiate that link.


Consider the following image of a navigation menu. The active (current page) link is differentiated with a green background.

Menu of four links. All are blue with black text except the second which is green.

The differentiation is quite clear if you can perceive all colors, but if you have trouble telling the difference between colors, you have to rely on the difference in shade alone. In this case, that difference is very subtle and might be missed:

A menu with four links. The second has a very slightly different shade of grey as the background.


So it's important to use an additional means to differentiate the "active" link. One way would be to provide an additional underline:

.active {
  background: #5fd35f;
  text-decoration: underline;

With that, there is a supplementary way to differentiate the links. This visual information will also need to be available to people using High Contrast Mode to view web pages or those who apply a custom style sheet to make text easier to read.

A menu with four links. The second has a very slightly different shade of grey as the background and a clear text underline.

Accessibility for screen reader users

Screen-reader users will not be aware of any change in visual design because information about visual appearance is not conveyed by screen readers. So we also need to non-visually indicate that our  .active 

link represents the current page.

One robust and well-supported way to do this is by including some text that is hidden from view but available to screen readers:

  <a href="/about">about <span class="vh">(the current page)</span></a>

The vh (“visually hidden”) class would call CSS that removes the content from view but does not also hide it from assistive technologies.

This CSS code can be used to apply this styling:

.vh {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;