add: display warning in profile settings if your text contrast is horrible

crates/app/src/public/html/profile/settings.html

@@ -313,6 +313,25 @@
 
     <div class="w-full hidden flex flex-col gap-2" data-tab="theme">
         <div class="card tertiary flex flex-col gap-2" id="theme_settings">
+            {% if failing_color_keys|length > 0 %}
+            <div
+                class="card flex flex-col gap-2"
+                style="background: white; color: black"
+                ui_ident="awful_contrast"
+            >
+                <div class="flex gap-2 items-center">
+                    {{ icon "contrast" }}
+                    <b>Some of your custom colors fail contrast checks:</b>
+                </div>
+
+                <ul>
+                    {% for key in failing_color_keys %}
+                    <li>{{ key[0] }} <b>{{ key[1] }} &lt; 4.5</b></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+
             <div
                 class="card w-full flex flex-wrap gap-2"
                 ui_ident="import_export"
@@ -725,6 +744,7 @@
                 "change_banner",
             ]);
             ui.refresh_container(theme_settings, [
+                "awful_contrast",
                 "import_export",
                 "theme_preference",
                 "profile_theme",