Tailwind CSS: Error Alert & Gotcha

Example 2: Error Alert & Color Contrast (Gotcha)

Incorrect: Poor Contrast Alert

Error! (Poor Contrast) Failed to upload file. Text is hard to read.

Note: This alert uses text-red-200 on bg-red-100 , leading to poor contrast.

Correct: Good Contrast Alert

Error! (Good Contrast) Failed to upload file. This text is clear.

Note: This alert uses text-red-700 on bg-red-100 , ensuring good readability.

Addressing the "Gotcha":

The "Gotcha" is about poor color contrast. Light text on a light background (e.g., text-red-200 on bg-red-100 ) makes the message difficult to read, especially for users with visual impairments. The solution is to use a darker text color (e.g., text-red-700 ) that contrasts well with the light background. Tailwind's default color palette provides shades (e.g., 100 for light backgrounds, 700-900 for dark text) that help achieve accessible contrast ratios.