CSS

Lesson 06

Color contrast states

Define interactive states that remain visible and readable.

Good Code

primary-action.css
.primary-action {
  /* Base and state colors keep readable contrast. */
  color: #ffffff;
  background: #174ea6;
  border: 2px solid #174ea6;
}

.primary-action:hover {
  background: #0b3478;
}

.primary-action:focus-visible {
  outline: 3px solid #f9ab00;
  outline-offset: 2px;
}

Bad Code

primary-action.css
.primary-action {
  /* Low-contrast state changes are hard to perceive or read. */
  color: #7b8794;
  background: #eef2f7;
  border: 1px solid #d8dee8;
}

.primary-action:hover,
.primary-action:focus {
  color: #9aa4b2;
}

Review Notes

What to review

Good Code

The good version specifies hover and keyboard focus states that preserve readable foreground and background contrast while making focus highly visible.

Bad Code

The bad version renders a recognizable button, but the state change is low contrast and color-only, so it can be hard to detect or read.

Takeaways

  • Pair state changes with contrast and focus treatment that users can perceive.