يُبرز التباين الاختلافات. قد يكون هذا التباين في الحجم، أو اللون، أو الوزن، أو الشكل، أو التباعد. يُحدث العنوان الكبير بجانب نص صغير تباينًا واضحًا، وكذلك الزر الأحمر الفاقع على خلفية رمادية. بدون تباين، يصبح التصميم باهتًا، وتتنافس جميع العناصر بالتساوي دون أن يبرز أي منها. أما مع التباين المفرط، فتصبح الصفحة مزدحمة، ولا تجد العين ما ترتاح إليه.

لا يقتصر التباين على الجانب الجمالي فحسب، بل يؤثر أيضًا على سهولة القراءة. فالنص ذو التباين المنخفض مع خلفيته يصعب قراءته، خاصةً لمن يعانون من ضعف البصر. وتشترط إرشادات إمكانية الوصول إلى محتوى الويب نسبة تباين لا تقل عن 4.5 إلى 1 للنصوص العادية. ويتحقق المصممون من ذلك باستخدام أدوات تحسب فروق الإضاءة. يساعد التباين العالي في ضوء الشمس الساطع وعلى الشاشات ذات الجودة المنخفضة. أما التباين المنخفض فيمكن أن يخلق جوًا معينًا، ولكن ينبغي أن يكون اختيارًا مقصودًا لا صدفة.

طرق لخلق التباين

• الحجم: كبير مقابل صغير.
• اللون: متكامل أو دافئ مقابل بارد.
• الوزن: ثقيل مقابل خفيف.
• الفضاء: مزدحم مقابل معزول.

يكون التباين أكثر فعالية عندما يكون مقصوداً. فغالباً ما يكون تباين قوي واحد لكل شاشة أفضل من خمسة تباينات متنافسة.