(This uses
text-red-700
on
bg-red-100
for good readability.)
(This uses
text-red-200
on
bg-red-100
- notice how hard it is to read? This is the gotcha!)
bg-red-100
: Light red background.
border
: Default border.
border-red-400
: Medium red border.
text-red-700
: Dark red text for good contrast.
px-4 py-3
: Padding.
rounded
: Rounded corners.
The "Gotcha" is poor color contrast. The second example above intentionally uses
text-red-200
(a very light red)
on
bg-red-100
(a light red background). This results in text that is difficult to read.
To avoid this, always choose a text color that has significant contrast with the background color.
For light backgrounds like
bg-red-100
, use darker text colors like
text-red-700
or
text-red-800
.
Tools like browser developer tools or online contrast checkers can help verify accessibility.