Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font color) so that the text will be readable as it spans both light and dark background colors.<\/p>\n
There is a CSS trick to this that I have created a working example of on codepen:<\/p>\n
\nSee the Pen light and dark font based on background (CSS only) \u2013 4 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
Light blue background –> dark font
\nDark blue background –> white font<\/p>\n
In this codepen example, I have added some buttons that will allow you to advance\u00a0 the progress of the dark blue so that you can see the font color changing.<\/p>\n
This CSS solution has three parts.<\/p>\n
This needs to be have the following attributes:<\/p>\n
Here is the CSS for Part 1 of the codepen example above:<\/p>\n
.ats-status-bar {\r\n height: 44px;\r\n color: #222;\r\n background-color: #deedf4;\r\n text-align: left;\r\n border-radius: 10px;\r\n width: 500px;\r\n border-radius: 10px;\r\n font-family: 'Raleway', sans-serif;\r\n font-size: 20px;\r\n margin-left: 2%; \r\n position: relative;\r\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\r\n }<\/pre>\n<\/h4>\nPart 2: inner div<\/strong><\/h4>\n\n- position: absolute;<\/li>\n
- z-index to raise it above the lighter layer<\/li>\n
- overflow: hidden;<\/li>\n
- white-space: nowrap;<\/li>\n
- width is % of task that is complete (adjustable)<\/li>\n
- features dark blue background with white text<\/li>\n<\/ul>\n
Here is the CSS for Part 2 of the codepen example above:<\/p>\n
.ats-status-bar-completed {\r\n height: 44px;\r\n background-color: #59A3C8;\r\n width: 100px;\r\n border-radius: 10px;\r\n font-family: 'Raleway', sans-serif;\r\n color: #fff;\r\n font-size: 20px;\r\n text-align: left;\r\n position: absolute; \r\n z-index: 10; \r\n overflow: hidden; \r\n white-space: nowrap;\r\n }<\/pre>\n <\/p>\n
Part 3: repeated text<\/strong><\/h4>\nThis is the step that makes the whole trick work. You basically repeat the text twice. Once inside the inner div and again in the outer div that holds the inner div. For example, here is the HTML:<\/p>\n
<div class=\"ats-status-bar-completed\">\r\n <div class=\"ats-task-name\">The quick brown fox jumped over the lazy dogs.<\/div>\r\n <\/div>\r\n <div class=\"ats-task-name\">The quick brown fox jumped over the lazy dogs.<\/div>\r\n<\/div><\/pre>\nHere is the complete HTML:<\/p>\n
<div class=\"ats-job-progress-container\">\r\n <div class=\"ats-status-bar-bottom\">\r\n <div class=\"ats-left-spacing\" style='width: 10%;'><\/div>\r\n <!-- Part 1 -->\r\n <div class=\"ats-status-bar\">\r\n <!-- Part 2 -->\r\n <div class=\"ats-status-bar-completed\">\r\n <div class=\"ats-task-name\">The quick brown fox jumped over the lazy dogs.<\/div>\r\n <\/div>\r\n <div class=\"ats-task-name\">The quick brown fox jumped over the lazy dogs.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<br>\r\n<input style='margin-left: 2%;' type=\"button\" id=\"b1\" value=\"Reset\" onClick=\"reset();\"> \r\n<input type=\"button\" id=\"b2\" value=\"Increase Percent\" onClick=\"increase();\"><\/pre>\nHere is the complete CSS:<\/p>\n
.ats-job-progress-container {\r\n width: 100%;\r\n align: left;\r\n border-radius: 10px;\r\n font-family: 'Raleway', sans-serif;\r\n font-size: 16px;\r\n}\r\n\r\n.ats-status-bar-bottom {\r\n width: 100%;\r\n height: 44px;\r\n border-radius: 10px;\r\n text-align: right;\r\n vertical-align: middle;\r\n position: relative;\r\n}\r\n\r\n.ats-left-spacing {\r\n height: 44px;\r\n padding-top: 8px;\r\n padding-right: 8px;\r\n position: absolute;\r\n z-index: 121;\r\n}\r\n\r\n.ats-status-bar {\r\n height: 44px;\r\n color: #222;\r\n background-color: #deedf4;\r\n text-align: left;\r\n border-radius: 10px;\r\n width: 500px;\r\n border-radius: 10px;\r\n font-family: 'Raleway', sans-serif;\r\n font-size: 20px;\r\n margin-left: 2%; \r\n position: relative;\r\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\r\n}\r\n\r\n.ats-status-bar-completed {\r\n height: 44px;\r\n background-color: #59A3C8;\r\n width: 100px;\r\n border-radius: 10px;\r\n font-family: 'Raleway', sans-serif;\r\n color: #fff;\r\n font-size: 20px;\r\n text-align: left;\r\n position: absolute; \r\n z-index: 10; \r\n overflow: hidden; \r\n white-space:nowrap;\r\n}\r\n\r\n.ats-task-name {\r\n vertical-align: middle;\r\n text-align: left;\r\n padding-top: 10px;\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n position: absolute;\r\n}\r\n\r\nbody {\r\n background-color: #888;\r\n}\r\n\r\n#b1{\r\n background-color: #59A3C8; \r\n padding: 5px;\r\n width: 100px;\r\n color: white;\r\n font-size: 14px;\r\n border: none;\r\n border-radius: 10px;\r\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\r\n}\r\n\r\n#b2 {\r\n background-color: #59A3C8; \r\n padding: 5px;\r\n width: 200px;\r\n color: white;\r\n font-size: 14px;\r\n border: none;\r\n border-radius: 10px;\r\n margin-left: 10px;\r\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\r\n}\r\n\r\n#b1:hover, #b2:hover {\r\n background-color: #deedf4; \r\n color: black;\r\n}\r\n\r\n\r\n<\/pre>\nAnd here is the JavaScript code (jQuery) that was used for the buttons:<\/p>\n
function reset() {\r\n $('.ats-status-bar-completed').css('width', '100px')\r\n}\r\n\r\nfunction increase() {\r\n let percent = $('.ats-status-bar-completed').width();\r\n console.log(percent);\r\n percent += 100;\r\n let p = percent.toString() + 'px';\r\n $('.ats-status-bar-completed').width(p);\r\n if (percent > 550) reset();\r\n}<\/pre>\n <\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font … Continue reading HTML & CSS: How to change text color based on background color<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[10,105,45,123],"class_list":["post-1955","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1955"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1955\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1955\/revisions\/1962"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}