Contrast that actually passes
Everyone knows 4.5:1. Almost nobody knows that it applies to placeholders, disabled states and the border of a text input too.
Body text needs 4.5:1. Text at 18.66px bold or 24px regular and above needs 3:1. Non-text elements that carry meaning, an input border, an icon that is the only label, a focus ring, the boundary of a toggle, need 3:1 against what is behind them. That last category is the one that gets skipped, because most audits people run only check text.
The four usual failures are placeholder text used as a label, disabled controls that nobody can read, white text over a photograph or gradient where the ratio changes across the image, and secondary text at the light end of a neutral ramp. All four appear in generated interfaces by default.
Check against the real background, not the page background. A card sitting on a tinted section changes the maths, and a translucent surface changes it again depending on what scrolls underneath. This is a job for a tool used constantly rather than an audit run once.
You should now be able to
- Apply the correct ratio for text, large text and UI elements
- Check contrast against the actual background, gradients included
- Identify the four places contrast is usually missed
Loading…