What you need to know

Low contrast can make labels, hints, and button states difficult to distinguish. A color palette that looks clear on a designer's display may not remain readable across screens and lighting.

How to apply it

Check foreground and background pairs with a contrast tool, test text at actual size and weight, and include visible focus and disabled states. Do not communicate status through color alone.

Common mistake to avoid

Do not fix contrast by adding a shadow that changes inconsistently. Adjust the color pair and test every state, including hover and focus.