Demonstrating Alert Styling and Color Contrast Gotcha

Error Alert - Incorrect (Poor Contrast - Gotcha)

Error! This text is hard to read due to poor contrast (text-red-200 on bg-red-100).

Notice how the text above is difficult to read. This is the "Gotcha" in action.

Error Alert - Corrected (Good Contrast)

Error! This text is much easier to read (text-red-700 on bg-red-100).

This version uses text-red-700 for better contrast and readability.

Example 2.1: Warning Alert (Good Contrast)

Warning! Your session is about to expire. Please save your work.