Sự tương phản làm cho sự khác biệt trở nên rõ ràng. Đó có thể là sự tương phản về kích thước, màu sắc, độ đậm nhạt, hình dạng hoặc khoảng cách. Một tiêu đề lớn bên cạnh văn bản chính nhỏ tạo ra sự tương phản. Tương tự như vậy, một nút màu đỏ tươi trên nền xám cũng tạo ra hiệu ứng tương phản. Nếu thiếu sự tương phản, thiết kế sẽ trở nên phẳng lặng. Mọi thứ đều cạnh tranh như nhau và không có gì nổi bật. Ngược lại, nếu quá nhiều tương phản, trang web sẽ trở nên rối mắt và người xem không có chỗ để nghỉ ngơi.

Độ tương phản không chỉ mang tính thẩm mỹ. Nó ảnh hưởng đến khả năng đọc. Văn bản có độ tương phản thấp so với nền rất khó đọc, đặc biệt là đối với người có thị lực kém. Hướng dẫn về khả năng truy cập nội dung web yêu cầu tỷ lệ tương phản tối thiểu là 4,5:1 đối với văn bản thông thường. Các nhà thiết kế kiểm tra điều này bằng các công cụ tính toán sự khác biệt về độ sáng. Độ tương phản cao giúp hiển thị tốt hơn dưới ánh nắng mặt trời gay gắt và trên màn hình chất lượng thấp. Độ tương phản thấp có thể tạo nên không khí, nhưng đó nên là sự lựa chọn chứ không phải là sự ngẫu nhiên.

Các cách tạo sự tương phản

• Kích thước: lớn so với nhỏ.
• Màu sắc: màu bổ sung hoặc màu ấm so với màu lạnh.
• Độ đậm nhạt: đậm so với nhạt.
• Không gian: đông đúc so với biệt lập.

Hiệu quả tốt nhất khi được tạo ra một cách có chủ đích. Một độ tương phản mạnh trên mỗi màn hình thường mang lại hiệu quả tốt hơn năm độ tương phản cạnh tranh nhau.