Contrast makes differences visible. It can be contrast of size, color, weight, shape, or spacing. A large headline next to small body text creates contrast. So does a bright red button on a gray form. Without contrast, a design flattens. Everything competes equally and nothing stands out. With too much, the page becomes noisy and the eye has no place to rest.

Contrast is not just aesthetic. It affects readability. Text with low contrast against its background is hard to read, especially for people with low vision. The Web Content Accessibility Guidelines require a contrast ratio of at least 4.5 to 1 for normal body text. Designers check this with tools that calculate luminance differences. High contrast helps in bright sunlight and on low-quality screens. Low contrast can create mood, but it should be a choice, not an accident.

Ways to create contrast

• Size: big versus small.
• Color: complementary or warm versus cool.
• Weight: bold versus light.
• Space: crowded versus isolated.

Contrast works best when it is intentional. One strong contrast per screen often does more than five competing ones.