Contrast Issue From Media Query

From Level Access Web Labs
Jump to: navigation, search


Contrast Issue With A Responsive Design Implementation

Contrast Issue With A Responsive Design Implementation

Try resizing the browser from 100% to about 30% and observe the foreground color, background color and size of the text below.

Make It Happen!

The point of this page is to demonstrate how a contrast issue can be introduced with CSS for a given range of screen widths. The text string "Make It Happen!" seen above should be very visible when the browser is at its full width. But when resized to a smaller width, the text is smaller and has different foreground and background colors that do not contrast well. This is an extreme example but it is possible that we could see more subtle variations of this issue when testing our clients' products.