{"id":265404,"date":"2018-02-13T07:25:41","date_gmt":"2018-02-13T14:25:41","guid":{"rendered":"http:\/\/css-tricks.com\/?p=265404"},"modified":"2018-02-21T15:45:05","modified_gmt":"2018-02-21T22:45:05","slug":"css-basics-using-fallback-colors","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-basics-using-fallback-colors\/","title":{"rendered":"CSS Basics: Using Fallback Colors"},"content":{"rendered":"

Something you very much want to avoid in web design is unreadable text<\/em>. That can happen when the background color of an element is too close or exactly the color of the text. For instance:<\/p>\n

.header {\r\n  background-color: white;\r\n  color: white;\r\n}<\/code><\/pre>\n
<\/p>\n
Which could lead to text that’s there, but invisible.<\/p>\n
\"\"
This is … very bad.<\/figcaption><\/figure>\n
You’d never do that on purpose of course!  The trouble is it can sneak up on you. For one thing, the default background-color<\/code> is transparent<\/code>, so without setting any background the background of an element is probably white. <\/p>\n
More commonly, you’re using a background-image<\/code> that makes the background a different color, and you’re setting white text on top of that.<\/p>\n
header {\r\n  background-image: url(plants.jpg);\r\n  color: white;\r\n}<\/code><\/pre>\n
Under perfect circumstances, this is all good:<\/p>\n
\"\"<\/figure>\n
But let’s take a look at what it looks like while the website is loading over a very common “Slow 3G” internet connection:<\/p>\n