Since color perception is so subjective (and hey 7% - 8% has some form of color blindness so they may not even see the difference) there are no had and fast rules for how dark or light to go.
That said, if you're using hex notation to specify color consider changing to HSL(Hue, Saturation, Luminence). I'm in the midst of making this translation myself and I find it a much more useful way to think about color.
Take a look at basic red in Hex versus HSL notation.
Pure red in hex is; #ff0000
in HSL it is: hsl(0, 100%, 50%)
now say you want to go a bit darker:
In hex: #cc3232
In HSL: hsl(0, 60%, 50%)
You can see in the HSL version all I've done is reduce the saturation by from 100% to 60%. This is much more understandable then whats going on in the hex version.
You can read more about this:
https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/
https://uxdesign.cc/my-struggle-with-colors-52156c664b87
https://uxdesign.cc/my-struggle-with-colors-part-ii-ed71bff6302a
Below is an HTML file that shows various shades of red in all three color models (Hex, RGB, HSL)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Welcome to my website</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Keywords and a brief description">
<link rel="stylesheet" href="style.css" >
<style>
html {
font-family: sans-serif;
font-size: 100%;
line-height: 1.2;
color: #222;
overflow-y: scroll;
/* Turn off auto adjust on some phone browsers */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.75em;
}
.item {
width: 25vw;
height: 25vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1em;
border: 1px solid black;
font-weight: bold;
color: white;
}
</style>
</head>
<body class="lrm-home"> <!-- remember to change for each html page -->
<div class="page-frame">
<header class="site-header">
<h1>Red Color Test</h1>
</header>
<div class="content-frame">
<main>
<h2>Using Hex, RGB and HSL</h2>
<div class="container">
<div class="item" style="background-color: #ff0000"><p>Hex</p><p>#ff0000</p></div>
<div class="item" style="background-color: rgb(255, 0, 0);"><p>RGB</p><p>rgb(255, 0, 0)</p></div>
<div class="item" style="background-color: hsl(0, 100%, 50%);"><p>HSL</p><p>hsl(0, 100%, 50%)</p></div>
<div class="item" style="background-color: #e51919">#e51919</div>
<div class="item" style="background-color: rgb(229, 25, 25);">rgb(229, 25, 25)</div>
<div class="item" style="background-color: hsl(0, 80%, 50%);">hsl(0, 80%, 50%);</div>
<div class="item" style="background-color: #cc3232">#cc3232</div>
<div class="item" style="background-color: rgb(204, 50, 50);">rgb(204, 50, 50)</div>
<div class="item" style="background-color: hsl(0, 60%, 50%);">hsl(0, 60%, 50%);</div>
<div class="item" style="background-color: #b24c4c">#b24c4c</div>
<div class="item" style="background-color: rgb(178, 76, 76);">rgb(178, 76, 76)</div>
<div class="item" style="background-color: hsl(0, 40%, 50%);">hsl(0, 40%, 50%);</div>
</div>
</main>
</div> <!-- end of .content-frame -->
<footer class="site-footer">
© 2019 - Lee Mandell. All Rights Reserved.
</footer>
</div> <!-- end of .page-frame -->
</body>
</html>
