Gotcha: Text Color Contrast

Poor contrast between text and background makes text hard to read and is an accessibility issue.

Good Contrast Examples

Dark text (`text-gray-900`) on a light background (`bg-white`) is easy to read.

Light text (`text-white`) on a dark background (`bg-slate-800`) is also clear.

Poor Contrast (Accessibility Issue)

This text (`text-gray-500`) on `bg-gray-300` has poor contrast and is hard to read. This makes it an accessibility concern.

Light blue text (`text-blue-400`) on a light blue background (`bg-blue-200`) is very difficult to see.

Even within the same color family, `text-red-300` on `bg-red-100` can lack sufficient contrast. Imagine `text-red-500` on `bg-red-300` - always check contrast!

Gotcha Explanation: Always ensure sufficient contrast between your text color and its background. Tools like browser developer tools (accessibility checkers) or online contrast checkers can help. Aim for WCAG AA or AAA compliance.