Issue:
Colour contrast on the small text above the <h1>
<div class="col-span-2 lg:col-span-1">
<!-- this text -->
<p class="text-sm text-orange-600 font-bold tracking-wide uppercase">What is 4C?</p>
<h1 class="mt-2 text-5xl font-extrabold tracking-tight text-gray-900 md:text-6xl">The Cool Community For <strong class="text-orange-600">Content Creators</strong></h1>
The current contrast is 3.35:1 and needs to be 4.5:1 minimum.
Suggested Fix Options:
1. Put the text within a box with a dark background with rounded corners.
Styles
background-color: #212121; /*this is 4.54:1 contrast ratio */
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-left: -1rem;
margin-bottom: -1rem;
2. Make the text darker (introduce third colour that allows for sufficient contrast).
A darker text colour, either the existing body text grey (text-gray-500
) or another to be decided.
3. Make the text larger
Make the font size 24px equivalent (preferable to use rem
which would be font-size: 1.5rem
or tailwind equivalent)
minor accessibility hacktoberfest