G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text

HTML Snippet Code
Scenario 1: Color values using name

Fill the form


<h2>Fill the form</h2> <label style="display:block;color: lightgreen;">Enter Email id </label> <input type="text" aria-label="enter email id"/> <label style="display:block;color: lightgreen;">Enter Password</label> <input type="text" aria-label="enter password"/><br/> <button style="background-color: lightgreen;color:red">Submit</button> <button style="background-color: lightgreen;color:red">Cancel</button>
Scenario 2: Color values using hexa values

<label >Enter Email id </label> <input type="text" aria-label="enter email id"/> <input type="submit" value="Go!" style="text-align:left;background-color:#6995BF;color:#ff0000" /></br> <label>Enter Password</label> <input type="text" aria-label="enter password"/> <button style="text-align:left;background-color:#6995BF;color:#ff0000">Submit</button> <button style="text-align:left;background-color:#6995BF;color:#ff0000">Cancel</button>
Scenario 3: Color values using RGB values


<label>Enter Email id </label> <input type="text" aria-label="enter email id"/><br/> <label>Enter Password</label> <input type="text" aria-label="enter password"/> <br/> <button style="text-align:left;background-color:rgb(255,0,255);color:rgb(0,0,255)">Submit</button> <button style="text-align:left;background-color:rgb(255,0,255);color:rgb(0,0,255)">Cancel</button>
Scenario 4: Color values using HSLA values


<label>Enter Email id </label> <input type="text" aria-label="enter email id"/> <label>Enter Password</label><br/> <input type="text" aria-label="enter password"/> <br/> <button style="text-align:left;background-color:rgba(0,0,255,0.3);">Submit</button> <button style="text-align:left;background-color: hsla(120, 100%, 75%, 0.3);">Cancel</button>