[4909] Accessibility: Text contrast

src/_includes/blog/blog-posts.njk

@@ -2,7 +2,7 @@
 <li class="w-full mt-2 px-2 pb-4">
     <a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
         <div class="md:w-3/4 pr-2">
-            <time class="block text-xs" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+            <time class="block text-xs" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
             <h3 class="mb-0 font-medium group-hover:underline">{{ item.data.title }}</h3>
             <div class="italic text-xs mb-3">
                 <div class="author">
@@ -41,7 +41,7 @@
 <li class="w-full md:w-1/3 my-2 px-2 pb-6 border-b">
     <a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
         <div class="">
-            <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+            <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
             <div class="ff-blog-tile">
                 <div class="w-full h-auto">
                     {% tileImage item, "./images/og-blog.jpg", "Image with logo and the slogan: Elevate Node-RED with Flowfuse", 285 %}

src/_includes/certified/template.njk

@@ -16,7 +16,7 @@
                     <div>
                         <div class="flex flex-row justify-between">
                             <h3 class="w-full mb-0 font-medium">{{ node.title }}</h3>
-                            <div class="w-[20px] my-auto text-gray-400">
+                            <div class="w-[20px] my-auto text-gray-500">
                                 {% include "components/icons/arrow-top-right-on-square.svg" %}
                             </div>
                         </div>

src/_includes/changelog/changelog-posts.njk

@@ -1,7 +1,7 @@
 <li class="w-full my-2 py-6 border-b flex flex-col md:flex-row">
     <div class="w-full flex flex-col flex-none md:w-72 md:pr-4">
         <a href="{{ item.url }}" class="flex flex-col group hover:no-underline">
-            <time class="block text-xs" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+            <time class="block text-xs" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
             <h3 class="mb-0 font-medium group-hover:underline">{{ item.data.title }}</h3>
             <div class="italic text-xs mb-3">
                 <div class="author">

src/_includes/components/ai-expert-modal.njk

@@ -14,7 +14,7 @@
                 </div>
                 <h2 id="ai-expert-modal-title" class="text-base font-semibold text-gray-700 -mb-1">Expert</h2>
             </div>
-            <button id="close-modal" class="text-gray-400 hover:text-gray-600" aria-label="Close dialog">
+            <button id="close-modal" class="text-gray-500 hover:text-gray-600" aria-label="Close dialog">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                     <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

src/_includes/layouts/abm-landing.njk

@@ -149,10 +149,10 @@ nohero: true
                 </div>
                 <!-- Chevron -->
                 {% if not loop.last %}
-                <div class="hidden md:block absolute -right-6 top-1/2 -translate-y-1/2 text-gray-400">
+                <div class="hidden md:block absolute -right-6 top-1/2 -translate-y-1/2 text-gray-500">
                     {% include "components/icons/chevron-right.svg" %}
                 </div>
-                <div class="sm:hidden absolute left-1/2 -translate-x-1/2 -bottom-7 text-gray-400">
+                <div class="sm:hidden absolute left-1/2 -translate-x-1/2 -bottom-7 text-gray-500">
                     {% include "components/icons/chevron-down.svg" %}
                 </div>
                 {% endif %}

src/_includes/layouts/post.njk

@@ -34,7 +34,7 @@
                     {%- for author in authors %}
                         {{ comma() }} <span class="font-medium">{{ people[author].name if people[author] else 'FlowFuse' }}</span>
                     {%- endfor %}
-                    <span class="text-gray-400">•</span>
+                    <span class="text-gray-500">•</span>
                     {%- if lastUpdated -%}
                     <time value="{{ lastUpdated | dateToRfc3339 }}">{{ lastUpdated | shortDate }}</time>
                     {%- else -%}

src/_includes/layouts/whitepaper-gated.njk

@@ -19,7 +19,7 @@
         <div class="ff-prose whitepaper w-full mt-3 md:w-2/3">
             <label class="text-red-600 font-medium mb-2">Whitepaper</label>
             <h3 class="text-gray-600 leading-snug">{% block whitepaperTitle %}Whitepaper Title{% endblock %}</span></h3>
-            <h4 class="text-gray-400">{% block whitepaperSubtitle %}{% endblock %}</h4> 
+            <h4 class="text-gray-600">{% block whitepaperSubtitle %}{% endblock %}</h4>
             {% block description %}Whitepaper description{% endblock %}
                 <!-- Social proof logos -->
             <div class="border-t border-gray-200 mt-16">
@@ -28,7 +28,7 @@
         </div>
         <div class="max-w-[350px] flex flex-col mx-auto">
             <div class="sticky top-20 bg-indigo-50 border-2 border-indigo-200 rounded-md drop-shadow-xl px-6 pb-2 mt-4">
-                <p class="text-gray-500"><span class="font-semibold">{% block formTitle %}Download our whitepaper{% endblock %}</span></br>{% block formSubtitle %}to learn how to unleash your engineers' potential and accelerate industrial innovation.{% endblock %}</p>
+                <p class="text-gray-600"><span class="font-semibold">{% block formTitle %}Download our whitepaper{% endblock %}</span></br>{% block formSubtitle %}to learn how to unleash your engineers' potential and accelerate industrial innovation.{% endblock %}</p>
                 {% include hubspot.script %}
             </div>
         </div>

src/_includes/stories/customer-story.njk

@@ -33,7 +33,7 @@
                 {% endif %}
             </div>
             <div class="flex flex-col mt-1 mb-0 p-5 pt-3 gap-2">
-                <label class="font-bold"><span class="text-gray-400">{{ brand }}</span></label>
+                <label class="font-bold"><span class="text-gray-600">{{ brand }}</span></label>
                 <h3 class="group-hover:text-blue-600 font-medium m-0 mt-0 mb-2" style="line-height: 1.6rem"><span class="text-lg">{{ title }}</span></h3>
             </div>
         </div>

src/community/newsletter.njk

@@ -19,7 +19,7 @@ hubspot:
         <li class="w-full mt-2 px-2 pb-4">
             <a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
                 <div class="md:w-1/2 pr-2">
-                    <time class="block text-xs" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+                    <time class="block text-xs" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
                     <h3 class="mb-0 font-medium group-hover:underline">{{ item.data.title }}</h3>
                     <div class="italic text-xs mb-3">
                         <div class="author">
@@ -54,7 +54,7 @@ hubspot:
         <li class="w-full md:w-1/3 my-2 px-2 pb-6 border-b">
             <a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
                 <div class="">
-                    <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+                    <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
                     <div>
                         <div class="w-full h-auto mb-4">
                             {% tileImage item, "./images/og-blog.jpg", "Image with logo and the slogan: Elevate Node-RED with Flowfuse", 285 %}

src/css/style.css

@@ -1034,7 +1034,7 @@ h4:hover .header-anchor::before {
     .ff-footer .copyright-statement {
         font-size: 0.75rem;
         margin-top: 0.75rem;
-        color: theme(colors.gray.400);
+        color: theme(colors.gray.600);
         font-weight: 200;
     }
 
@@ -1705,7 +1705,7 @@ h4:hover .header-anchor::before {
 }
 
 .ff-tier-badge__label {
-    @apply px-2.5 py-0.5 text-gray-500 font-medium bg-gray-100 border border-r-0 border-gray-200 rounded-l;
+    @apply px-2.5 py-0.5 text-gray-600 font-medium bg-gray-100 border border-r-0 border-gray-200 rounded-l;
 }
 
 .ff-tier-badge__value {

src/handbook/design/branding.md

@@ -316,6 +316,28 @@ The following fonts are used across the FlowFuse platform, website, and branded
     </div>
 </div>
 
+### Text Color & Contrast
+
+[WCAG 2.1 AA](https://www.w3.org/TR/WCAG21/#contrast-minimum) requires a contrast ratio of at least **4.5:1** between normal-size body text and its background (large text — 18pt or larger, or 14pt bold — requires 3:1; see [Success Criterion 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)). Several values in the grey scale above look similar but sit on opposite sides of that threshold, so choose by background:
+
+| Background | Minimum grey for normal text | Notes |
+|------------|------------------------------|-------|
+| White (`#FFFFFF`) | **Grey 500** (`#6B7280`, 4.83:1) | Minimum for normal text. Site body copy uses Grey 700 (`#374151`, 7.56:1); Grey 500 is used for bolded prose text and for secondary metadata like dates, bylines, and captions |
+| Grey 50 / Grey 100 (`bg-gray-50`, `bg-gray-100`) | **Grey 600** (`#4B5563`) | Grey 500 produces only ~4.3:1 on Grey 100, below AA |
+| Indigo 50 (`bg-indigo-50`) | **Grey 600** | Tinted background reduces effective contrast against mid-greys |
+| Dark backgrounds (Grey 600+) | Grey 300 or lighter, or white | Light values required to reach 4.5:1 |
+
+**Grey 400 (`#9CA3AF`) fails AA for normal text on any light background (≈2.85:1 on white).** Reserve it for:
+
+- Decorative, non-text elements (icons, dividers, tree-branch characters), where the 3:1 non-text contrast rule applies
+- Intentional placeholder or disabled states where the reduced contrast is the intended signal — for example, unconfirmed talks on an event schedule, inactive form fields, or greyed-out menu items. Document the intent inline so future edits preserve it.
+
+When in doubt, run the page through Lighthouse and check the `color-contrast` audit before shipping.
+
+**Lighthouse** (built into Chrome DevTools): open the page → DevTools (`⌘⌥I` / `F12`) → **Lighthouse** tab → tick **Accessibility** → **Analyze page load**. Scroll to "Contrast" in the report — any failing element is listed with its selector and the actual ratio.
+
+For a one-off spot-check without running a full audit, the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) takes two hex values and returns the ratio.
+
 ## Iconography
 
 All app and site iconography uses [Heroicons](https://heroicons.com/), by the makers of Tailwind CSS. Within our flowforge app, we have two icon sizes available which can be assigned with `ff-icon` and `ff-icon-sm`.

src/handbook/engineering/product/features.njk

@@ -86,7 +86,7 @@ navTitle: Feature Catalog
         {% for feature in section.features %}
         <tr class="border-t border-gray-100 hover:bg-gray-50">
             <td class="py-3 px-4 align-top border-r border-gray-100{% if feature.subfeature %} pl-8{% endif %}">
-                {% if feature.subfeature %}<span class="text-gray-400 mr-1">└</span><span class="text-gray-600 font-medium">{{ feature.label }}</span>{% else %}<strong>{{ feature.label }}</strong>{% endif %}{% if feature.beta %} <span class="text-xs text-indigo-600 font-medium bg-indigo-50 rounded" style="padding: 2px 8px;">Beta</span>{% endif %}
+                {% if feature.subfeature %}<span class="text-gray-500 mr-1">└</span><span class="text-gray-600 font-medium">{{ feature.label }}</span>{% else %}<strong>{{ feature.label }}</strong>{% endif %}{% if feature.beta %} <span class="text-xs text-indigo-600 font-medium bg-indigo-50 rounded" style="padding: 2px 8px;">Beta</span>{% endif %}
                 {% if feature.description %}<br><span class="text-gray-500">{{ feature.description }}</span>{% endif %}
                 {% if feature.docsLink %}<br><a href="{{ feature.docsLink }}" target="_blank" rel="noopener" class="text-indigo-600 text-xs">Docs</a>{% endif %}
                 {% if feature.changelog %}{% if feature.changelog is iterable and feature.changelog is not string %}{% for cl in feature.changelog %}<br><a href="{{ cl.url }}" target="_blank" rel="noopener" class="text-indigo-600 text-xs">Changelog{% if feature.changelog.length > 1 %} ({{ cl.release }}){% endif %}</a>{% endfor %}{% else %}<br><a href="{{ feature.changelog }}" target="_blank" rel="noopener" class="text-indigo-600 text-xs">Changelog</a>{% endif %}{% endif %}
@@ -103,7 +103,7 @@ navTitle: Feature Catalog
                     {% elif cell and cell.value === 'list' %}{{ cell.options | join(', ') }}
                     {% elif cell and cell.value %}{{ cell.value }}
                     {% elif not (cell and cell.note) %}–{% endif %}
-                    {% if cell and cell.note %}{% if cell and cell.value %}<br>{% endif %}<span class="text-gray-400 text-xs">{{ cell.note }}</span>{% endif %}
+                    {% if cell and cell.note %}{% if cell and cell.value %}<br>{% endif %}<span class="text-gray-500 text-xs">{{ cell.note }}</span>{% endif %}
                 </td>
                 {% endfor %}
             {% else %}
@@ -121,7 +121,7 @@ navTitle: Feature Catalog
                     {% elif cell and cell.value === 'list' %}{{ cell.options | join(', ') }}
                     {% elif cell and cell.value %}{{ cell.value }}
                     {% elif not (cell and cell.note) %}–{% endif %}
-                    {% if cell and cell.note %}{% if cell and cell.value %}<br>{% endif %}<span class="text-gray-400 text-xs">{{ cell.note }}</span>{% endif %}
+                    {% if cell and cell.note %}{% if cell and cell.value %}<br>{% endif %}<span class="text-gray-500 text-xs">{{ cell.note }}</span>{% endif %}
                 </td>
                 {% endfor %}
             {% else %}

src/solutions/it-ot-middleware.njk

@@ -259,7 +259,7 @@ description:
                         <div class="title">
                             <h4 class="text-indigo-600">Self managed</br>
                             </h4>
-                            <div class="text-base font-bold text-gray-400 pb-4">(on premise)</div> 
+                            <div class="text-base font-bold text-gray-600 pb-4">(on premise)</div>
                         </div>
                         <p class="mb-0 text-left">
                             Run FlowFuse where you prefer; that's possible too! In your cloud of preference, or even on-site.

src/webinars.njk

@@ -36,9 +36,9 @@ meta:
                                         <label>
                                             <h4 class="text-white">{{ item.data.title }}</h4>
                                             <div class="webinar-tile-datetime">
-                                                <time value="{{ item.time }}" class="text-gray-400">{{ item.data.time }}</time>
-                                                <time value="{{ item.date }}" class="text-gray-400">{{ item.data.date | shortDate }}</time>
-                                                <time value="{{ item.duration }}" class="text-gray-400">{{ item.data.duration | duration }}</time>
+                                                <time value="{{ item.time }}" class="text-gray-500">{{ item.data.time }}</time>
+                                                <time value="{{ item.date }}" class="text-gray-500">{{ item.data.date | shortDate }}</time>
+                                                <time value="{{ item.duration }}" class="text-gray-500">{{ item.data.duration | duration }}</time>
                                             </div>
                                         </label>
                                     </div>
@@ -77,7 +77,7 @@ meta:
                 <li class="w-full my-2 pb-6 border-b">
                     <a href="{{ item.url }}" class="w-full flex flex-col group hover:no-underline">
                         <div class="">
-                            <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-400">{{ item.date | shortDate }}</time>
+                            <time class="block text-xs mb-2" value="{{ item.date }}" class="text-gray-500">{{ item.date | shortDate }}</time>
                             <div>
                                 <div class="w-full h-auto shadow rounded mb-4">
                                     {% tileImage item, "./images/og-blog.jpg", "Image with logo and the slogan: Elevate Node-RED with Flowfuse", 285 %}