diff --git a/www/assets/js/toolbox_weather.js b/www/assets/js/toolbox_weather.js
index c9f1a7e..95de1d7 100644
--- a/www/assets/js/toolbox_weather.js
+++ b/www/assets/js/toolbox_weather.js
@@ -202,8 +202,10 @@ function loadWeather(reload) {
                         temps: low + " to " + high,
                         uv_index: resp.forecast[i].uv_index,
                         uv_color: uvIndexToColor(resp.forecast[i].uv_index),
+                        uv_foreground: uvIndexToColor(resp.forecast[i].uv_index) == "yellow" ? "black" : "white",
                         precip_chance: Math.round(resp.forecast[i].precipitation.chance * 100),
-                        precip_color: precipcolor
+                        precip_color: precipcolor,
+                        precip_foreground: precipcolor == "lightblue" ? "black" : "white"
                     });
                 }
 
@@ -213,8 +215,8 @@ function loadWeather(reload) {
                         + '    <div class="item-title">'
                         + '    <div class="item-header">{{day}}</div>'
                         + '        {{temps}}'
-                        + '        <br /><span class="padding-half forecast-uv-badge badge color-{{uv_color}}"><i class="fas fa-sun fa-fw"></i> {{uv_index}}</span>'
-                        + '        &nbsp; <span class="padding-half forecast-precip-badge badge color-{{precip_color}}"><i class="fas fa-tint fa-fw"></i> {{precip_chance}}%</span>'
+                        + '        <br /><span class="padding-half forecast-uv-badge badge color-{{uv_color}} text-color-{{uv_foreground}}"><i class="fas fa-sun fa-fw"></i> {{uv_index}}</span>'
+                        + '        &nbsp; <span class="padding-half forecast-precip-badge badge color-{{precip_color}} text-color-{{precip_foreground}}"><i class="fas fa-tint fa-fw"></i> {{precip_chance}}%</span>'
                         + '    </div>'
                         + '  </div>'
                         + '</div>'