From 46420050af6f7c9e5b8548833a6d5bfa542dca7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSophie?= <“sophie.rauhut@inspired.consulting“>
Date: Tue, 16 Jul 2024 11:53:56 +0200
Subject: [PATCH] Improve accessibility and contrast ratios

---
 src/index.html     | 22 +++++++++++-----------
 tailwind.config.js |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/index.html b/src/index.html
index dd7f620..5ee5a1f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,9 +41,9 @@
             <img src="./logos/threatshield_white.svg" alt="ThreatShield Logo"
                 class="w-36 rounded-sm h-auto border-2 p-3">
         </a>
-        <button id="menuToggle" class="text-gray-100 ml-auto" onclick="toggleMobileMenu()">
+        <button id="menuToggle" class="text-gray-100 ml-auto" onclick="toggleMobileMenu()" aria-label="Toggle mobile menu">
             <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
+                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
             </svg>
         </button>
@@ -169,7 +169,7 @@
         <section id="preview-web-app" class="bg-primary-800 flex justify-center py-10 scroll-mt-12">
             <div class="container text-primary-100 px-4 md:px-0 flex flex-col lg:flex-row justify-between gap-8">
                 <div class="w-full lg:w-1/2 flex flex-col gap-4 justify-center">
-                    <h3 class="text-center lg:text-left leading-normal text-gray-100 uppercase">Sneak Peek</h3>
+                    <p class="text-center lg:text-left leading-normal text-gray-100 uppercase">Sneak Peek</p>
                     <hr class="border-t-2 border-secondary-500 w-32 lg:w-28 mx-auto lg:mx-0">
                     <h2 class="text-3xl/tight xl:text-4xl/tight w-full font-bold text-center lg:text-left">
                         AI-driven threat modeling with intuitive design
@@ -180,7 +180,7 @@ <h2 class="text-3xl/tight xl:text-4xl/tight w-full font-bold text-center lg:text
                     </p>
                 </div>
                 <div class="w-full lg:w-1/2 flex justify-center lg:justify-end">
-                    <img src="./img/preview-systems.webp" alt="Preview image of the app interface" class="max-h-full">
+                    <img src="./img/preview-systems.webp" alt="Preview image of the app interface" class="max-h-full ts-img-shadow">
                 </div>
             </div>
         </section>
@@ -190,7 +190,7 @@ <h2 class="text-3xl/tight xl:text-4xl/tight w-full font-bold text-center lg:text
 
         <section id="list-of-benefits" class="w-full bg-gray-100">
             <div class="container mx-auto h-full py-20 pb-24 px-4 bg-gray-100">
-                <h3 class="text-center leading-normal text-primary-800 mb-4 uppercase">Your benefits</h3>
+                <p class="text-center leading-normal text-primary-800 mb-4 uppercase">Your benefits</p>
                 <hr class="border-t-2 border-secondary-300 w-40 mx-auto my-4">
                 <h2 class="text-3xl/tight xl:text-4xl/tight mb-8 font-bold text-center text-primary-800 pt-2">
                     Stay one step ahead of potential threats
@@ -266,8 +266,8 @@ <h3 class="font-bold text-xl/relaxed mb-2 text-primary-800 text-center">
         <section id="how-does-it-work" class="w-full bg-primary-200 py-10 scroll-mt-12">
             <div class="container mx-auto px-4 flex flex-col gap-10">
                 <div class="flex flex-col gap-4">
-                    <h3 class="text-center leading-normal text-primary-800 uppercase">How to ensure your security
-                    </h3>
+                    <p class="text-center leading-normal text-primary-800 uppercase">How to ensure your security
+                    </p>
                     <hr class="border-t-2 border-primary-300 w-72 mx-auto">
                     <h2 class="text-3xl/tight xl:text-4xl/tight font-bold text-center text-primary-800 mb-0 lg:mb-4">
                         3 simple steps to start
@@ -382,7 +382,7 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
         <section id="offers" class="w-full bg-gray-100">
             <div class="container flex flex-col gap-10 bg-gray-100 mx-auto py-12 px-4">
                 <div class="flex flex-col justify-center gap-4">
-                    <h3 class="text-center leading-normal text-primary-800 uppercase">Offer</h3>
+                    <p class="text-center leading-normal text-primary-800 uppercase">Offer</p>
                     <hr class="border-t-2 border-secondary-300 w-40 mx-auto">
                     <h2 class="text-3xl/tight xl:text-4xl/tight font-bold text-center text-primary-800">
                         Our offer to you
@@ -538,8 +538,8 @@ <h2 class="text-3xl/tight xl:text-4xl/tight font-bold text-center text-primary-8
             <div class="container flex flex-row justify-center mx-auto">
                 <div class="mx-auto px-4 w-full lg:px-8 flex flex-col justify-center text-center lg:text-left">
                     <div>
-                        <h3 class="text-center lg:text-left text-primary-800 leading-normal px-2 uppercase">About us
-                        </h3>
+                        <p class="text-center lg:text-left text-primary-800 leading-normal px-2 uppercase">About us
+                        </p>
                         <hr class="border-t-2 border-primary-500 w-24 mx-auto my-4 lg:mx-0">
                     </div>
                     <h2 class="text-3xl/tight xl:text-4xl/tight text-primary-800 pt-2 font-bold">
@@ -565,7 +565,7 @@ <h2 class="text-3xl/tight xl:text-4xl/tight text-primary-800 pt-2 font-bold">
         <section id="contact" class="bg-gray-100 py-10">
             <div class="container mx-auto">
                 <div class="flex flex-col gap-4 text-center px-4 md:px-0">
-                    <h3 class="text-primary-800 uppercase leading-normal">Ready to protect your business?</h3>
+                    <p class="text-primary-800 uppercase leading-normal">Ready to protect your business?</p>
                     <hr class="border-t-2 border-secondary-400 mx-auto w-80">
                     <h2 class="text-3xl/tight xl:text-4xl/tight font-bold text-primary-800 leading-normal">
                         Feel free to reach out
diff --git a/tailwind.config.js b/tailwind.config.js
index d4b649e..f809366 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,7 +35,7 @@ module.exports = {
           400: "#AEB1C0",
           500: "#9396A7",
           600: "#7E8291",
-          700: "#626571",
+          700: "#5E606C",
           800: "#393B42",
           900: "#1A1B1F",
         },