Color Contrast

<section id="demoContentStart">
    <div class="demoPageContent">
        <h2 style="margin-top: 1em;">Stay Informed</h2>
        <p>
            With Neo soon being retired, please subscribe to our
            <a href="#">a11y.training mailing list</a> to ensure you receive
            updates delivered directly to your inbox.
        </p>
        <div class="image-with-text">
            <img src="./happy-boy-graduate.jpg" alt="">
            <div class="image-text">
                <h2>Be yourself in any language</h2>
                <p>
                    We believe that everyone should have the confidence to be
                    themselves in any language because when you can be yourself,
                    you can do anything.
                </p>
                <p>Start building your confidence today.</p>
                <div class="hero-buttons-wrapper">
                    <a href="#" id="primaryButton" class="slider-slide-content__cta button button--primary">
                        Explore our products
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="frm-containor">
        <form id="registrationForm">
            <div class="container">
                <h2>Register</h2>
                <p>Please fill in this form to create an account.</p>
                <p>
                    <strong>Fields marked with asterisk
                    (<span class="span">*</span>) are mandatory.</strong>
                </p>
                <label for="firstname">Name<span class="span">*</span></label>
                <input type="text" id="firstname" required>
                <div>
                    <fieldset id="fieldset">
                        <legend>
                            <strong>Gender <span class="span">*</span></strong>
                        </legend>
                        <input type="radio" id="option1" name="options" value="1" required>
                        <label for="option1">Male</label>
                        <input type="radio" id="option2" name="options" value="2" required>
                        <label for="option2">Female</label>
                    </fieldset>
                </div>
                <div class="inline">
                    <input type="checkbox" id="myCheckbox">
                    <label for="myCheckbox" style="font-size: 14px;">
                        I agree to the Terms of Use and acknowledge the Privacy
                        Policy.
                    </label>
                </div>
                <button type="button" onclick="validateForm()">Submit</button>
                <p class="mt5">Have a Pearson account? <a href="#"> Sign in.</a></p>
            </div>
        </form>
    </div>
</section>

body { font-family: Arial, Helvetica, sans-serif; }

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}

.container {
    display: flex;
    flex-direction: column;
    width: 30vw;
    padding: 1rem;
    border: 3px solid #7f7f7f;
}

h1, h2, h3, p {
    margin: 0.5em;
}

.mt5 { margin: 0.5rem; }

.mt5 a { color: #0000EE; }

input[type=text] {
    margin: 0.25em 0em 1em 0em;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

button {
    padding: 0.75em;
    border: none;
    background-color: #003057;
    color: white;
    border-radius: 40px;
    font-size: 16px;
}

button:hover { background-color: #037d76; }

button:focus {
    outline: .10em solid #000000;
    outline-offset: 1px;
}

fieldset {
    margin: 0.5em;
    border: 1px solid #333;
    border-radius: 0.25em;
}

.pageContent {
    flex-basis: 48%;
    margin-right: 1rem;
}

#contentStart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.frm-containor { flex-basis: 50%; }

@media screen and (max-width: 600px) {
    #contentStart { display: block; }

    .pageContent > div { flex-basis: 100%; }

    .container { width: 80% !important; }
}

@media screen and (max-width: 600px) {
    .image-text {
        top: 0 !important;
        left: 0 !important;
        padding: 0.4rem !important;
        font-size: 14px !important;
    }

    .hero-buttons-wrapper { margin-top: 1rem !important; }

    img { height: 14rem !important; }
}

.span { color: red; }

input[type=text].error,
select.error,
fieldset.error {
    border: 2px solid red !important;
}

input[type="text"]:focus,
select:focus {
    border: 1px solid red !important;
    outline: none;
}

.inline {
    display: inline-flex;
    margin: 0.5em;
}

.image-with-text {
    position: relative;
    display: inline-block;
}

.image-text {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 3px;
    background-color: rgba(0, 0, 0, 0.21);
    color: white;
    padding: 1rem;
    font-size: 16px;
}

.hero-buttons-wrapper {
    margin-top: 2rem;
}

.hero-buttons-wrapper .button--primary {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal;
    text-decoration: none;
    border-radius: 2rem;
    color: #151515;
    background-color: #ffbb1c;
    vertical-align: middle;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.775em 1.25em;
    position: relative;
    z-index: 1;
}

function validateForm() {
    const firstname = document.getElementById('firstname');
    const option1 = document.getElementById('option1');
    const option2 = document.getElementById('option2');
    const fieldset = document.getElementById('fieldset');
    const checkbox = document.getElementById('myCheckbox');

    let errorMessage = '';
    let focusField = null;

    if (!firstname.value) {
        errorMessage += 'Please fill out the Name field.\n';
        firstname.classList.add('error');
        if (!focusField) {
            focusField = firstname;
        }
    } else {
        firstname.classList.remove('error');
    }

    if (!option1.checked && !option2.checked) {
        errorMessage += 'Please select a Gender.\n';
        fieldset.classList.add('error');
        if (!focusField) {
            focusField = option1;
        }
    } else {
        fieldset.classList.remove('error');
    }
    if(!checkbox.checked){
        errorMessage += 'Please select a Checkbox.\n';
        if (!focusField) {
            focusField = checkbox;
        }
    }

    if (errorMessage) {
        alert(errorMessage);
        if (focusField) {
            focusField.focus();
        }
        return false;
    }

    alert('Form submitted successfully!');
    return true;
}