Tailwind CSS Course
Tailwind CSS
/
Beginner

Color Contrast

Definition

The practice of selecting text and background color combinations in Tailwind that meet the WCAG contrast ratio requirements for visual legibility.

Explain Like I'm New

Putting light gray text on a white background might look 'aesthetic' and minimalist, but someone with visual impairments physically cannot read it. You must ensure sufficient contrast.

Real World Example

Checking if `text-gray-400` on a `bg-white` card passes accessibility tests. (Spoiler: It fails terribly. You must use at least `text-gray-500` or `text-gray-600`).

Common Use Cases

  • •WCAG Compliance
  • •UI Design

Interactive Example

 Interview Questions
basic
  • Is `text-gray-300` on a `bg-white` background considered accessible?
intermediate
  • If you put `text-white` inside a `bg-yellow-400` warning banner, why might users complain?
Flash Cards
Question
Gray-300 on White?
Click to reveal answer
Answer
Absolutely not. The contrast is far too low. It is nearly invisible to many users.
Question
White text on Yellow?
Click to reveal answer
Answer
Yellow is a very bright, light color. Putting white text on a bright yellow background has terrible contrast. You should use `text-yellow-900` (very dark brown/yellow) for the text instead.